Cuándo usar cada formato
Los cuatro formatos describen el mismo color, pero cada uno es más cómodo según la tarea. HEX es el más compacto y el estándar de facto para pegar un color en CSS o compartirlo. RGB es útil cuando necesitás manipular los canales de rojo, verde y azul por separado, por ejemplo en canvas o procesamiento de imágenes. HSL y HSV separan el tono del brillo, así que son ideales cuando querés aclarar, oscurecer o desaturar un color de forma intuitiva.
Cómo leer RGB y HEX
RGB combina tres canales de 0 a 255: rojo, verde y azul. rgb(255, 0, 0) es rojo puro. HEX es exactamente lo mismo, pero en base 16: #FF0000, donde FF es 255. Un HEX de 3 dígitos como #f00 es una abreviatura de #ff0000 (cada dígito se duplica). Por eso ambas notaciones describen el mismo color.
- #FF0000 = rgb(255, 0, 0) = rojo puro.
- #00FF00 = rgb(0, 255, 0) = verde puro.
- #0000FF = rgb(0, 0, 255) = azul puro.
- #000000 = rgb(0, 0, 0) = negro; #FFFFFF = blanco.
La intuición detrás de HSL
HSL descompone el color en tres ideas fáciles de imaginar. El tono (H) es un ángulo de 0 a 360 grados en la rueda de color: 0 es rojo, 120 verde, 240 azul. La saturación (S) va de 0% (gris) a 100% (color intenso). La luminosidad (L) va de 0% (negro) a 100% (blanco), con el color puro en 50%. Para aclarar un color en CSS, subís la L; para desaturarlo, bajás la S, sin tocar el tono.
HSL vs HSV
HSV (también llamado HSB, de brillo/brightness) se parece a HSL pero define el eje de claridad de otra forma. En HSV el valor (V) al 100% es el color más brillante posible, y bajar V lo lleva hacia el negro; la saturación al 100% siempre es el color más puro. En HSL, en cambio, el color puro está en L = 50%, y subir la L lo lleva hacia el blanco. Por eso #FF0000 es hsl(0, 100%, 50%) pero hsv(0, 100%, 100%). HSV es el modelo típico de los selectores de color de Photoshop y otras herramientas gráficas.
Colores comunes en todos los formatos
Tabla de referencia con colores frecuentes y su equivalencia exacta:
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Blanco | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Negro | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| Rojo | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Verde | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Azul | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Azul marca | #3498DB | rgb(52, 152, 219) | hsl(204, 70%, 53%) |
Transparencia y canal alfa
Los cuatro formatos de esta herramienta describen colores sólidos. Para transparencia, CSS agrega un cuarto valor: rgba(52, 152, 219, 0.5) o hsla(204, 70%, 53%, 0.5), donde el último número (de 0 a 1) es la opacidad. También existe el HEX de 8 dígitos (#3498db80), donde los últimos dos dígitos son el alfa en hexadecimal. El alfa es independiente del color base, así que podés convertir el color acá y agregar la opacidad por separado.