Conversor de colores: HEX, RGB y HSL
Convierte entre formatos de color y comprueba el contraste sobre blanco.
Datos de la calculadora
Resultados
Introduce los datos y pulsa «Calcular» para ver el resultado.
En resumen
- Qué calcula
- Convierte entre formatos de color y comprueba el contraste sobre blanco.
- Fórmula aplicada
Luminancia = 0,2126·R + 0,7152·G + 0,0722·B (linealizados)- Ejemplo
- El color #2563eb equivale a:
Conversor de colores HEX, RGB y HSL
Cada herramienta de diseño habla un idioma distinto: hexadecimal en CSS, RGB en editores de imagen y HSL cuando quieres ajustar el tono sin perder la saturación.
Además se calcula el contraste sobre blanco, el dato que decide si un texto será legible.
Cómo funciona
El color se interpreta en cualquiera de los tres formatos y se convierte a los otros dos. La luminancia relativa se calcula según la fórmula de las pautas de accesibilidad WCAG.
Fórmula
Luminancia = 0,2126·R + 0,7152·G + 0,0722·B (linealizados)
Contraste = (L1 + 0,05) ÷ (L2 + 0,05)
Ejemplo resuelto
El color #2563eb equivale a:
rgb(37, 99, 235)
hsl(221, 83%, 53%)
Contraste sobre blanco: 5,17:1
Explicación
El contraste no es cuestión de gusto
Las pautas de accesibilidad WCAG fijan una relación mínima de 4,5 a 1 entre texto y fondo para texto normal, y de 3 a 1 para texto grande. No es una recomendación estética: por debajo de esos valores, una parte importante de la población no puede leer cómodamente, y en muchos países es un requisito legal para sitios públicos.
Por qué HSL es más manejable que RGB
En RGB, aclarar un color exige tocar tres números a la vez y adivinar. En HSL basta con subir la luminosidad dejando el tono intacto, lo que permite construir paletas coherentes cambiando un solo valor. Es la razón de que los sistemas de diseño lo prefieran para generar variantes.
El canal alfa y la transparencia
Un color con alfa se mezcla con lo que tiene debajo, así que el contraste real depende del fondo sobre el que se sitúe. Un texto gris al cincuenta por ciento puede cumplir sobre blanco y fallar sobre una imagen.
El color no debe ser la única señal
Alrededor de un ocho por ciento de los hombres tiene alguna forma de daltonismo. Indicar un error sólo con rojo, o un estado sólo con verde, deja fuera a esas personas. Conviene acompañar siempre con texto, icono o forma.
Preguntas frecuentes
¿Qué contraste necesito?
Las pautas WCAG 2.2 piden 4,5:1 para texto normal y 3:1 para texto grande en el nivel AA.
¿Por qué usar HSL?
Porque separa tono, saturación y luminosidad, lo que facilita crear variantes coherentes de un mismo color.
¿Qué contraste necesita un texto?
Al menos 4,5 a 1 para texto normal y 3 a 1 para texto grande, según las pautas WCAG en su nivel AA.
¿Por qué no basta con distinguir estados por color?
Porque cerca de un ocho por ciento de los hombres tiene algún tipo de daltonismo. Conviene añadir un icono, una forma o un texto además del color.
¿Quieres calcular otra cosa?
Estas herramientas suelen usarse junto a esta calculadora.
Conversor de bases
Convierte números entre las bases 2, 8, 10, 16, 32 y 36.
Base64
Convierte texto a Base64 y recupera el texto original.
Generador de slug
Convierte un título en una URL limpia, sin acentos ni caracteres raros.
Contraseñas
Contraseñas aleatorias con entropía calculada, generadas en tu navegador.
Timestamp
Convierte entre timestamp Unix y fecha legible en UTC.