Este convertidor de colores pasa un mismo color entre HEX, RGB y HSL al instante, con un selector visual para elegirlo directamente. También compara dos colores (texto y fondo) y calcula su relación de contraste según las pautas WCAG, indicando si aprueba los niveles AA y AAA para texto normal y para texto grande.
Además, genera una paleta de diez tintas (mezclas hacia el blanco) y diez sombras (mezclas hacia el negro) a partir del color elegido, útil para crear una escala de un color de marca para una interfaz o un sistema de diseño.
Cómo usar
- 1Elige un color con el selector o escribe su valor en HEX, RGB o HSL: los otros dos formatos se actualizan solos.
- 2Copia el valor que necesites con un clic.
- 3Para revisar la accesibilidad, elige un color de texto y uno de fondo y consulta la relación de contraste y si cumple AA o AAA.
- 4Genera una paleta de tintas y sombras del color activo y copia cualquiera de sus tonos.
Qué puedes hacer
- Conversión entre HEX, RGB y HSL
- Selector de color visual
- Comprobación de contraste WCAG AA y AAA
- Paleta de tonos y sombras
HEX, RGB y HSL: qué representa cada formato
HEX describe un color con un código hexadecimal de 3, 6 u 8 dígitos (los últimos dos, opcionales, son la transparencia). RGB lo describe con la cantidad de rojo, verde y azul, de 0 a 255, y opcionalmente la opacidad. HSL lo describe de una forma más intuitiva para ajustar un color a mano: tono (0-360°), saturación y luminosidad, ambas en porcentaje.
Cómo se interpreta el contraste WCAG
Las pautas de accesibilidad WCAG 2.x piden una relación de contraste mínima entre el texto y su fondo para que sea legible: 4,5:1 para texto normal y 3:1 para texto grande en el nivel AA (el habitual), y 7:1 y 4,5:1 respectivamente en el nivel AAA (más exigente). El texto grande se considera a partir de 18 puntos, o 14 puntos en negrita.
Tintas y sombras para una paleta de marca
Una tinta es el color mezclado progresivamente con blanco, y una sombra es el mismo color mezclado con negro. Es la forma más simple de construir una escala de un solo color (por ejemplo, del 50 al 900) para botones, fondos y estados de una interfaz, partiendo de un único color de marca.
Preguntas frecuentes
¿Cómo convierto un color HEX a RGB?
Escribe el código HEX (con o sin el símbolo #) en el campo correspondiente; el valor en RGB y en HSL se actualiza automáticamente.
¿Qué relación de contraste necesito para cumplir la accesibilidad web?
Para el nivel AA, que es el más usado como referencia legal y de buenas prácticas, se necesita una relación de al menos 4,5:1 en texto normal y 3:1 en texto grande (18 puntos o más, o 14 en negrita).
¿Qué significa el cuarto valor en RGBA o HSLA?
Es el canal alfa, que controla la opacidad del color: 1 es totalmente opaco y 0 es totalmente transparente. En HEX se representa con dos dígitos adicionales al final (#RRGGBBAA).
¿Cómo elijo un color con el selector?
Haz clic en el cuadro de color para abrir el selector nativo de tu navegador o sistema operativo; al elegir un color, se actualizan automáticamente los campos HEX, RGB y HSL.