MS

Herramienta gratis · funciona en tu navegador

Conversor de colores (HEX, RGB, HSL)

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.

HEX#0071E3
RGBrgb(0, 113, 227)
HSLhsl(210, 100%, 45%)
Contraste sobre blanco4.70:1 · AA
Contraste sobre negro4.47:1 · solo texto grande

WCAG pide al menos 4,5:1 para texto normal (AA) y 7:1 para AAA.

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