Conversor de color y comprobador de contraste
Convierte colores entre HEX, RGB, HSL y HSV, además de comprobar la ratio de contraste WCAG.
Cargando Conversor de color y comprobador de contraste… Si no ocurre nada, activa JavaScript.
La representación digital del color ha evolucionado a través de varios sistemas en competencia, cada uno optimizado para un propósito distinto. El formato hexadecimal #RRGGBB surgió en los primeros días del HTML en la década de 1990, cuando la web de Tim Berners-Lee necesitaba una forma concisa de especificar los 16 millones de colores que podían mostrar las pantallas de 24 bits. El formato codifica las intensidades de los canales rojo, verde y azul como números hexadecimales de dos dígitos, lo que lo hace compacto para el marcado sin dejar de ser interpretable por humanos. RGB (rojo, verde, azul) es el modelo de color aditivo que usan todas las pantallas digitales: mezclar luz a plena intensidad produce blanco, que es lo opuesto a cómo se comporta la tinta. HSL (tono, saturación, luminosidad) y HSV (tono, saturación, valor) son transformaciones cilíndricas de RGB que se alinean más estrechamente con cómo perciben el color los humanos, lo que las hace indispensables para construir paletas de diseño sistemáticas.
Ejemplos
#ff5733
rgb(255, 87, 51)
Cada par hexadecimal se corresponde con un canal rojo, verde, azul (0-255).
rgb(255, 87, 51)
hsl(11, 100%, 60%)
El mismo color expresado como tono, saturación, luminosidad.
Preguntas frecuentes
¿Se envía algún dato a un servidor cuando uso esta herramienta?
¿Cómo funciona el formato de color hexadecimal?
¿Cuándo debería usar HSL en lugar de RGB en mi CSS?
¿Qué ratio de contraste WCAG necesito para mi sitio web?
¿Por qué los mismos valores HSL a veces se ven distintos en navegadores diferentes?
¿Cuál es la historia de los colores web?
¿Puedo convertir colores con transparencia?
¿En qué se diferencia esta herramienta de las DevTools del navegador?
¿Qué valores de color debería saberse de memoria un desarrollador?
¿Cuál es un error habitual de principiante con los colores hexadecimales?
Acerca de Conversor de color y comprobador de contraste
Los diseñadores usan códigos hexadecimales al escribir hojas de estilo CSS y al elegir colores de marca en herramientas como Figma o Sketch. Los desarrolladores front-end cambian a RGB o RGBA cuando necesitan aplicar opacidad o realizar mezclas de color programáticas en canvas o WebGL. HSL es el favorito para generar escalas de color de forma algorítmica; por ejemplo, manteniendo el tono fijo mientras se escalona la luminosidad para crear una rampa de tonos consistente. HSV es el formato nativo de la mayoría de los widgets selectores de color porque su eje de valor se mapea de forma intuitiva al control deslizante de brillo. Los ingenieros de accesibilidad se apoyan en los cálculos de la ratio de contraste para garantizar que el texto siga siendo legible para usuarios con baja visión o daltonismo, un requisito exigido por las WCAG 2.1 y aplicado en los sitios web del sector público de toda la UE y EE. UU.
Esta herramienta convierte cualquier color que introduzcas a las cuatro notaciones de forma simultánea y también calcula la ratio de contraste WCAG entre tu color y cualquier fondo que especifiques. Todo se ejecuta en tu navegador sin solicitudes al servidor. Puedes pegar un código hexadecimal, escribir valores RGB o introducir coordenadas HSL, y la herramienta te muestra al instante todas las representaciones equivalentes. El comprobador de contraste te da un resultado de aprobado o fallido frente a los umbrales AA y AAA de las WCAG.
Un error común es confundir HSL y HSV: ambos usan tono y saturación, pero su tercer eje difiere de formas importantes. En HSL, una luminosidad del 100 % siempre produce blanco, sin importar el tono ni la saturación. En HSV, un valor del 100 % produce el tono puro (brillo máximo), no blanco. Otro error frecuente es olvidar que la forma abreviada hexadecimal #RGB se expande a #RRGGBB duplicando los dígitos, así que #f09 significa #ff0099, no #f00009. Al trabajar con opacidad, ten en cuenta que CSS acepta tanto el hexadecimal de ocho dígitos (#RRGGBBAA) como la función rgba(), pero algunos navegadores y herramientas de diseño más antiguos solo admiten la forma rgba().
Cómo 16 millones de colores acabaron en un código de seis caracteres
Antes de la web, el color en las pantallas de los ordenadores era una cuestión de severas limitaciones. La tarjeta gráfica CGA original de 1981 ofrecía solo 16 colores, cuidadosamente elegidos para ser distinguibles en los monitores de la época. El estándar EGA amplió esto a 64, y VGA acabó ofreciendo 256 colores de una paleta fija. No fue hasta que las pantallas de color verdadero de 24 bits se volvieron asequibles a principios de la década de 1990 cuando el espectro completo de 16.777.216 colores se hizo accesible al hardware de consumo, y la web necesitó una notación para describirlos todos.
Los ingenieros de Netscape Navigator eligieron el hexadecimal porque se mapeaba a la perfección con el hardware subyacente: cada uno de los tres canales de color de 8 bits (0-255) puede expresarse como exactamente dos dígitos hexadecimales (00-FF), dando un código de seis caracteres compacto e inequívoco. El formato apareció en Netscape 1.1 alrededor de 1994 y fue copiado rápidamente por Internet Explorer. El W3C lo formalizó en la especificación CSS1 en 1996, consolidando su lugar como la abreviatura universal del color web. Las palabras clave de colores con nombre (red, blue, aqua) se heredaron directamente de los 16 colores VGA estándar, con colores adicionales tomados del sistema de ventanas X11 usado en estaciones de trabajo Unix.
El giro hacia los espacios de color perceptualmente uniformes es el siguiente capítulo en la historia del color web. RGB y HSL tradicionales son matemáticamente simples pero perceptualmente no uniformes: un paso de diez unidades de luminosidad en HSL se ve muy distinto según el tono, lo que dificulta los cálculos fiables de accesibilidad. La especificación CSS Color Level 4 introduce OKLCH y OKLAB, espacios de color diseñados para que diferencias numéricas iguales correspondan a diferencias percibidas iguales. Estos espacios ya están admitidos en los navegadores modernos y representan la evolución más significativa en cómo los desarrolladores especifican el color desde que se introdujo el formato hexadecimal original hace treinta años.