Formatos de color y espacios de color
Los colores en pantalla se representan en varios formatos según el contexto. HEX (#RRGGBB o la abreviatura #RGB) se usa en todo CSS y HTML. RGB y RGBA (rojo, verde, azul, alfa) usan valores enteros de 0 a 255 por canal, o valores fraccionarios de 0,0 a 1,0 en algunas APIs. HSL (matiz, saturación, luminosidad) y HSV/HSB (matiz, saturación, valor/brillo) describen los colores en términos más cercanos a la percepción humana — el matiz gira alrededor de una rueda de 360 grados, mientras que la saturación y la luminosidad/valor usan porcentajes.
CMYK (cian, magenta, amarillo, negro) es el modelo de color sustractivo utilizado en impresión. A diferencia de RGB que añade luz, CMYK sustrae luz del papel blanco. Convertir un color RGB a CMYK da una aproximación adecuada para maquetas de diseño; la reproducción de impresión precisa requiere un perfil de color y software compatible con ICC. Este convertidor maneja todas estas traducciones de formato en tiempo real.
El canal alfa (A en RGBA y HSLA) controla la opacidad de 0 (completamente transparente) a 1 (completamente opaco). CSS también admite la función moderna `color()` y la sintaxis CSS Color Level 4 con valores separados por espacios y alfa opcional, pero HEX, RGB y HSL siguen siendo los formatos más utilizados para el desarrollo web y el diseño de UI.
Usos prácticos en diseño web y UI
Los sistemas de diseño y las propiedades personalizadas CSS dependen de valores de color consistentes en todos los formatos. Cuando un diseñador proporciona un color de marca en HEX, un desarrollador puede necesitar el valor HSL equivalente para generar programáticamente tonos más claros y oscuros con CSS `calc()`. Este convertidor hace esa traducción instantánea.
Los estándares de accesibilidad (WCAG 2.1) requieren una relación de contraste mínima de 4,5:1 para texto normal y 3:1 para texto grande. La relación de contraste se calcula a partir de la luminancia relativa de dos colores, que depende de los valores RGB. Entender la representación RGB de un color es por tanto esencial para verificar el cumplimiento de accesibilidad. Muchos desarrolladores usan HSL para variar sistemáticamente la luminosidad manteniendo fijos el matiz y la saturación, garantizando un comportamiento de contraste predecible en toda una escala de colores.
Los preprocesadores CSS (Sass, Less) exponen funciones de manipulación de color como `lighten()`, `darken()`, `saturate()` y `mix()`, que operan internamente en HSL o RGB. Tailwind CSS y otros frameworks de utilidades definen paletas de color como tonos numerados (50–950) generados ajustando la luminosidad HSL. Conocer tus valores HSL iniciales te permite colocar los colores con precisión dentro de estas escalas.
Fundamentos de teoría del color
La rueda de matices divide el espectro visible en un círculo de 360 grados: 0° y 360° son rojo, 120° es verde, 240° es azul. Los colores complementarios están a 180° de distancia (rojo/cian, azul/naranja, amarillo/violeta). Los esquemas de color triádicos usan tres matices separados 120°. Los esquemas análogos agrupan matices dentro de un arco de 30 a 60°. Entender las relaciones de matiz te ayuda a crear paletas armoniosas.
La saturación mide la pureza del color. Una saturación del 100% es el tono más vívido de un matiz; el 0% produce gris independientemente del matiz. La luminosidad en HSL va del 0% (negro) al 100% (blanco), con el 50% dando el matiz puro. El valor en HSV es el brillo máximo: 0% es negro, 100% es la versión más brillante posible del matiz a saturación completa.
Los colores CSS nombrados (como `tomato`, `steelblue`, `rebeccapurple`) todos se mapean a valores HEX/RGB específicos. Este convertidor acepta colores nombrados y cualquier expresión de color CSS válida, resolviéndolos a todos los formatos numéricos. Usa los botones de copiar junto a cada formato para pegar valores directamente en tu editor de código, herramienta de diseño o archivo CSS.