HEX, RGB y HSL son tres formas en que CSS te permite especificar el mismo color. HEX es compacto y habitual en las herramientas de diseño; RGB se parece más a cómo mezclan realmente las pantallas la luz roja, verde y azul; HSL (tono, saturación, luminosidad) suele ser más intuitivo para ajustar a mano, ya que puedes cambiar la luminosidad o la saturación sin recalcular tres números distintos.
Cómo funciona
Un código HEX de 6 dígitos son en realidad tres números hexadecimales de 2 dígitos seguidos: uno para el rojo, otro para el verde y otro para el azul, cada uno de 00 a FF (0-255 en decimal). Una abreviatura de 3 dígitos como #2B6 duplica cada dígito, así que se expande a #22BB66 antes de la conversión.
RGB son simplemente esos mismos tres valores escritos en decimal en lugar de hexadecimal: rgb(43, 110, 74) es el mismo color que #2B6E4A.
HSL se obtiene a partir de los valores RGB con la fórmula colorimétrica estándar: el tono es el ángulo en una rueda de color (0-360°), la saturación indica lo vivo o grisáceo que es el color y la luminosidad lo cerca que está del negro o del blanco.
Un ejemplo resuelto
El color HEX #20524A (el color de acento de este sitio) se convierte en rgb(32, 82, 74) y hsl(170, 44%, 22%), un verde azulado oscuro y apagado.
Más ejemplos
#3366CC es rgb(51, 102, 204) y hsl(220, 60%, 50%). Para un color más claro al pasar el cursor, sube la luminosidad: hsl(220, 60%, 65%).
Errores frecuentes
- Interpretar la luminosidad de HSL como brillo percibido; la misma luminosidad puede verse muy distinta según el tono.
- Olvidar el contraste: el texto necesita al menos 4,5:1 frente a su fondo para cumplir WCAG AA.
- Perder el canal alfa al convertir colores con transparencia.
- Expandir mal la abreviatura: #36C es #3366CC.
Preguntas frecuentes
¿Por qué a veces veo un cuarto valor, como en RGBA o HSLA?
La "A" significa alfa: la opacidad, de 0 (totalmente transparente) a 1 (totalmente opaco). Este conversor trabaja con los tres canales de color; añade un valor alfa por separado en tu CSS si necesitas transparencia, por ejemplo rgba(32, 82, 74, 0.5).
¿Qué formato debería usar en mi CSS?
Los tres se muestran exactamente igual. Es solo cuestión de comodidad. HSL suele ser el más fácil de ajustar a mano (por ejemplo, oscurecer un color bajando el porcentaje de luminosidad) sin recurrir a un selector de color, por eso muchos sistemas de diseño definen su paleta en HSL aunque también exporten valores HEX.
¿Por qué mi código HEX de 3 dígitos se expandió a 6 dígitos?
El HEX abreviado (#2B6) es un atajo en el que cada dígito se duplica para formar el valor completo (#22BB66). Solo puede representar 16 tonos por canal en lugar de 256, por lo que se usa sobre todo para colores simples y saturados.
¿Cómo convierto HEX a RGB a mano?
Divide los seis dígitos en tres pares y convierte cada par de hexadecimal a decimal. #1E90FF se convierte en 1E = 30, 90 = 144 y FF = 255, es decir, rgb(30, 144, 255).
¿Puedo convertir RGB a CMYK para imprimir?
Solo de forma aproximada. Las pantallas mezclan luz (RGB) y las impresoras mezclan tinta (CMYK), y muchos colores brillantes de pantalla no se pueden imprimir con exactitud. Para trabajos de impresión, convierte con el perfil de color de la imprenta en una herramienta de diseño.