Color y contraste

Convierte colores entre HEX, RGB y HSL, genera una escala de tonos y comprueba el contraste WCAG.

Se procesa en tu navegador · Compruébalo Sin envíosDatos enviados: 0 · A otros dominios: 0Analítica: no existe · Anuncios: no existe

Prueba un ejemplo

Selector de colorColorHEX, rgb(), hsl() o un nombre como tomato.

HEX#4f46e5
RGBrgb(79, 70, 229)
HSLhsl(243, 75%, 59%)

Escala de luminosidad

Pulsa un tono para usarlo.

Contraste WCAG

TextoFondo

Texto grande

Texto de ejemplo

Relación 14.68:1

AA texto normal✓ Cumple
AA texto grande✓ Cumple
AAA texto normal✓ Cumple
AAA texto grande✓ Cumple

Aprende

¿Qué es?

Un color en pantalla se describe con tres números: cuánto rojo, verde y azul. HEX, RGB y HSL son tres formas de escribir lo mismo: #4f46e5, rgb(79, 70, 229) y hsl(243, 75%, 59%) son el mismo color. El contraste mide cuánto se distingue un color de otro, y es lo que decide si un texto se lee bien.

¿Para qué sirve?

Pasar un color del diseñador (HEX) a la notación que pide tu código (rgb, hsl).
Crear tonos más claros y oscuros del mismo color para hover, bordes y fondos.
Comprobar que el texto cumple las pautas de accesibilidad (WCAG) antes de publicar.
Entender por qué un gris claro sobre blanco «se ve bien» en tu monitor pero no para todo el mundo.

¿Cómo funciona por dentro?

HEX y RGB son lo mismo en base 16 y en base 10. HSL reorganiza los números en tono (la posición en la rueda de color), saturación y luminosidad, lo que facilita aclarar u oscurecer sin cambiar el tono. El contraste se calcula con la luminancia relativa de cada color (el ojo percibe el verde mucho más brillante que el azul): (L_claro + 0,05) / (L_oscuro + 0,05). Blanco sobre negro da 21; dos colores iguales dan 1.

Errores comunes

Fiarse del ojo: miles de personas tienen baja visión o daltonismo; el número no miente. Apunta a 4,5:1 en texto normal.
Texto gris claro «elegante»: #777 sobre blanco da 4,48, justo por debajo de AA. Un punto más oscuro (#767676) ya cumple.
Usar sólo el color para informar: «los campos en rojo tienen error» no sirve para daltónicos; añade texto o un icono.
Olvidar la transparencia: un texto con opacidad se mezcla con el fondo; el contraste real es menor.
Suponer que HSL y HEX redondean igual: convertir de ida y vuelta puede variar un valor en ±1.

Glosario

HEX:: Color como #rrggbb, tres pares de dígitos hexadecimales para rojo, verde y azul.
RGB:: Cantidad de rojo, verde y azul de 0 a 255.
HSL:: Tono (0-360°), saturación y luminosidad; más fácil de ajustar a mano.
Contraste:: Relación entre la luminosidad del texto y la del fondo, de 1 a 21.
WCAG:: Pautas de accesibilidad web; AA exige 4,5 a 1 en texto normal y 3 a 1 en texto grande.

Para saber más

Más en Diseño web

Aprende paso a paso en la rutaCSS visual para tu web