# Conversor de colores (HEX, RGB, HSL)

URL: https://shahid09.is-a.dev/es/tools/color-converter/
Author: Muhammad Shahid (https://shahid09.is-a.dev/)
Herramienta gratis · funciona en tu navegador

Convierte un color entre HEX, RGB y HSL, elígelo visualmente y comprueba si un texto en ese color se lee bien sobre blanco o negro.

**Respuesta rápida:** Escribe un color en cualquier formato, como #0071E3, rgb(0, 113, 227) o hsl(210, 100%, 45%), o elígelo, y obtén los tres formatos CSS para copiar. La herramienta muestra también el contraste WCAG frente a blanco y negro: el texto normal necesita al menos 4,5:1 (AA) y el texto grande 3:1.

## Cómo usarla

1. **Escribe o elige un color.** Escribe HEX, RGB o HSL, o usa el selector de color.
2. **Copia el formato que necesitas.** HEX, RGB y HSL listos para pegar en CSS, herramientas de diseño o código.
3. **Comprueba el contraste.** Mira si un texto en este color cumple WCAG sobre fondo blanco o negro.

## Ejemplo

Un azul convertido a todos los formatos, con su contraste:

Entrada:

```
#0071E3
```

Salida:

```
HEX  #0071E3
RGB  rgb(0, 113, 227)
HSL  hsl(210, 100%, 45%)

Contraste sobre blanco: 4,70:1 · AA
Contraste sobre negro: 4,47:1 · solo texto grande
```

## Errores comunes y cómo solucionarlos

- **CSS ignora el color**: Los valores HEX necesitan la #, y rgb() necesita tres números. Copia el valor de esta herramienta para evitar erratas.
- **El color no pasa el contraste**: Oscurece el texto o aclara el fondo hasta llegar a 4,5:1. En HSL, bajar la luminosidad es lo más rápido.
- **HSL difiere en 1 de otra herramienta**: Las conversiones se redondean, así que 210 y 211 pueden ser el mismo color. Usa HEX cuando necesites una coincidencia exacta.
- **El color impreso se ve distinto**: Las pantallas usan RGB y las impresoras CMYK, con gamas distintas. Pide a tu imprenta el perfil correcto y revisa una prueba.

## Preguntas frecuentes

### ¿Cómo paso HEX a RGB?

Divide los seis dígitos en tres pares y convierte cada uno de hexadecimal: #0071E3 es 00, 71, E3, es decir, rgb(0, 113, 227).

### ¿Qué es HSL?

Tono (0 a 360 grados en la rueda de color), saturación y luminosidad (0 a 100 %). Facilita crear tonos más claros u oscuros del mismo color.

### ¿Qué significa un código HEX de 3 dígitos?

Cada dígito se duplica: #0AF es lo mismo que #00AAFF.

### ¿Qué contraste necesito?

WCAG AA pide 4,5:1 para texto normal y 3:1 para texto grande (unos 24 px, o 19 px en negrita). AAA pide 7:1 para texto normal.

### ¿Por qué otras herramientas dan valores HSL un poco distintos?

Al convertir se redondea, así que una herramienta puede mostrar 210 y otra 211 para el mismo color. La diferencia no se ve.

### ¿Puedo usar estos valores en CSS?

Sí. Los tres formatos son valores de color CSS válidos en todos los navegadores modernos.

### ¿Cómo paso RGB a CMYK para imprenta?

Hay una fórmula sencilla, pero las imprentas usan perfiles de color: pide el perfil adecuado a tu imprenta o convierte en una herramienta de diseño.

### ¿Admite transparencia?

Este conversor trabaja con colores sólidos. Para transparencia, añade tú el valor alfa, como rgb(0 113 227 / 50%).

### ¿Por qué el color se ve distinto en mi móvil?

Las pantallas tienen gamas y calibraciones distintas, y algunas muestran colores de gama amplia. Los valores HEX y RGB se refieren al espacio sRGB estándar.

### ¿Se sube algo?

No. La conversión se hace en tu navegador.

## Relacionado

- [Conversor de mayúsculas y minúsculas](https://shahid09.is-a.dev/es/tools/case-converter/)
- [Calculadora de porcentajes](https://shahid09.is-a.dev/es/tools/percentage-calculator/)
- [Desarrollador full stack con IA](https://shahid09.is-a.dev/hire/ai-full-stack-developer/)