Conversor y selector de color
HEX, RGB, HSL y comprobación de contraste
Entrada
Resultado
- HEX
#1FA89C - RGB
rgb(31, 168, 156) - HSL
hsl(175, 69%, 39%) - CMYK
cmyk(82%, 0%, 7%, 34%)
Tonos claros y oscuros (haz clic para saltar a ese color)
WCAG: el texto normal necesita 4,5:1 (AA) y 7:1 para AAA. El CMYK es solo orientativo, porque ignora los perfiles de color.
Las herramientas de diseño hablan HEX, las animaciones CSS quieren HSL y el código de canvas quiere canales RGB. Elige un color una vez y obtén todas las notaciones, junto con las cifras de contraste que deciden si el texto encima se leerá bien.
Cómo se usa
- 1 Elige un color, o pega un código en cualquier formato.
- 2 Todas las demás notaciones aparecen a la vez.
- 3 Usa la escala de tonos claros y oscuros para construir una paleta coherente.
- 4 Comprueba las relaciones de contraste antes de usarlo detrás de texto.
Preguntas frecuentes
¿Qué relación de contraste necesito?
WCAG AA exige 4,5:1 para el texto normal y 3:1 para el texto grande. AAA pide 7:1. Por debajo de 3:1 el texto resulta realmente difícil de leer para mucha gente, no simplemente poco óptimo.
¿Por qué usar HSL en lugar de HEX?
HSL separa el tono de la saturación y la luminosidad, así que aclarar un color un 10 % es cambiar un número en vez de adivinar en tres canales. Por eso los sistemas de diseño construyen sus escalas en HSL.
¿El valor CMYK sirve para imprimir?
Solo como orientación aproximada. La conversión real depende del papel, la tinta y el perfil de color. Para cualquier cosa que vaya a imprenta, pide los valores a la imprenta y no a una fórmula.