Formatos de color explicados: HEX, RGB y HSL

En la web, el mismo color puede escribirse de varias formas — #3498db, rgb(52, 152, 219) y hsl(204, 70%, 53%) son exactamente el mismo azul. Saber qué significa cada formato (y cuándo recurrir a cuál) hace mucho más fácil elegir, ajustar y combinar colores. Esta guía desglosa HEX, RGB y HSL, y cómo se relacionan.

Todo empieza con rojo, verde y azul

Las pantallas crean color mezclando tres luces de color: rojo, verde y azul. Cada color que ves es alguna combinación de esos tres canales, cada uno ajustado a una intensidad de 0 (apagado) a 255 (máximo). El negro total es 0, 0, 0; el blanco total es 255, 255, 255. HEX y RGB son solo dos notaciones para esos mismos tres números.

RGB

RGB indica los tres valores de canal directamente:

rgb(52, 152, 219)
     R    G    B

Es el más legible de los tres porque los números se corresponden directamente con «cuánto rojo, verde, azul». Genial cuando quieres razonar sobre los canales en sí.

HEX

HEX codifica esos mismos valores de canal 0–255 en hexadecimal (base 16), como un # seguido de tres pares:

#3498db
 34 98 db
 R  G  B     →  R=52, G=152, B=219

Cada par va de 00 (0) a ff (255). HEX es compacto y es el valor por defecto en la mayoría de las herramientas de diseño y en CSS, por eso es el formato que más copiarás y pegarás. También existe una forma abreviada: #39f se expande a #3399ff duplicando cada dígito.

HSL

HSL describe el color como la gente piensa intuitivamente en él, con tres ejes distintos:

• Tono (Hue) (0–360°) — el color en sí sobre una rueda: 0° rojo, 120° verde, 240° azul.
• Saturación (Saturation) (0–100%) — cuán vívido es, del gris al color pleno.
• Luminosidad (Lightness) (0–100%) — cuán brillante, del negro al blanco pasando por el color.

hsl(204, 70%, 53%)
    hue  sat  light

El superpoder de HSL es ajustar el color. ¿Quieres una versión más oscura de un color? Baja la luminosidad y deja el tono y la saturación en paz. ¿Quieres un conjunto de tonos combinados? Mantén el tono fijo y varía la luminosidad. Hacer eso en HEX o RGB implica recalcular los tres canales; en HSL es un solo número.

Alfa: añadir transparencia

Cada formato tiene una variante con un canal alfa para la opacidad, de 0 (totalmente transparente) a 1 (totalmente opaco): rgba(52, 152, 219, 0.5) y hsla(204, 70%, 53%, 0.5). El CSS moderno también permite un HEX de 8 dígitos donde el último par es alfa — #3498db80 es el mismo azul al 50%.

¿Cuál deberías usar?

• HEX — copiar un color de marca fijo, o pegar en una herramienta de diseño. Compacto y universal.
• RGB / RGBA — cuando razonas sobre los canales en bruto o necesitas transparencia sencilla.
• HSL / HSLA — cuando diseñas: construir paletas, tonos hover/activo, o ajustar un color a ojo.

La buena noticia es que no tienes que convertir a mano. Nuestro conversor HEX↔RGB traduce entre formatos al instante, y el selector de color te deja elegir un color visualmente y leer sus valores HEX, RGB y HSL de una vez — además de construir degradados y paletas. ¿Necesitas sacar un color de una imagen? El selector de color de imagen hace exactamente eso.