En CSS, el mismo color se puede escribir de al menos tres formas distintas, y cada una resulta cómoda para una tarea diferente, desde el diseño hasta la animación de la transparencia.
HEX: un formato compacto para copiar y pegar
La notación hexadecimal como #FF5733 codifica los tres canales — rojo, verde, azul — con dos caracteres cada uno. Es el formato más compacto, cómodo para copiar de un mockup de diseño, pero casi ilegible para una persona: es difícil saber a simple vista qué tono representa una cadena de dígitos.
RGB: acceso directo a cada canal
rgb(255, 87, 51) escribe esos mismos tres canales como números decimales del 0 al 255. Resulta útil cuando hay que cambiar un canal concreto por código, por ejemplo aumentar el rojo de forma suave en una animación de JavaScript.
HSL: selección intuitiva de tono
HSL describe un color mediante el tono (hue, 0–360°), la saturación y la luminosidad. Es el formato más cómodo para elegir un color a mano: para obtener una versión más oscura del mismo tono, basta con reducir solo la luminosidad, sin recalcular los tres canales RGB desde cero.
El canal alfa para la transparencia
Los formatos rgba() y hsla() añaden un cuarto parámetro: la opacidad, de 0 a 1. El CSS moderno también permite indicar la transparencia en HEX mediante dos caracteres adicionales al final, como #FF573380.
Para qué sirve esto
- Convertir rápidamente un color de un mockup de diseño al formato CSS que necesites.
- Elegir una versión más oscura o más clara del mismo color usando HSL.
- Añadir transparencia a un color sin cambiar su tono base.
CMYK: el formato que la pantalla no necesita, pero la imprenta sí
Este conversor incluye CMYK junto a HEX, RGB y HSL, aunque CMYK no sirve para nada en una página web: es un modelo sustractivo pensado para imprenta, donde cian, magenta, amarillo y negro (la cuatricromía, como se conoce en la industria gráfica en español) se superponen como capas de tinta sobre papel blanco en lugar de sumar luz como hace RGB en una pantalla. Por eso un diseñador que prepara un logo para una imprenta en España o Latinoamérica necesita convertir su HEX de pantalla a CMYK antes de enviarlo a producción — y por eso el resultado impreso casi nunca coincide exactamente con lo que se veía en el monitor: el espacio de color de la imprenta es más reducido que el de una pantalla RGB, así que algunos tonos vivos simplemente no tienen equivalente en tinta.