Formatos de color
Hex, RGB o HSL: ¿qué formato de color deberías usar?
Entiende cómo Hex, RGB y HSL representan el mismo color en pantalla, cómo funciona el alfa y cuándo resulta más útil cada formato CSS.
Publicado Actualizado
Hex, RGB y HSL son notaciones distintas para colores representados en un espacio de color como sRGB. Pueden describir el mismo resultado visible:
.sample {
color: #00ffff;
color: rgb(0 255 255);
color: hsl(180 100% 50%);
}Las tres declaraciones anteriores representan el cian.
Hex es compacto
El Hex de seis dígitos guarda el rojo, el verde y el azul como parejas de 00 a FF. El Hex de tres dígitos es una abreviatura: #0ff se expande a #00ffff. El Hex de ocho dígitos añade el alfa, y el de cuatro dígitos es su forma abreviada. Usa el conversor de Hex a RGB para inspeccionar cualquiera de estas variantes.
RGB refleja los canales de la pantalla
RGB indica de forma explícita los canales rojo, verde y azul, normalmente de 0 a 255. El CSS moderno permite añadir el alfa tras una barra: rgb(0 255 255 / 60%). Es práctico cuando los valores vienen de imágenes o de la API de Canvas.
HSL es más fácil de ajustar con intención
HSL describe el tono como un ángulo y la saturación y la luminosidad como porcentajes. Girar el tono o reducir la saturación resulta intuitivo, aunque los pasos iguales en HSL no son perceptualmente iguales. Para escalas perceptualmente uniformes, OKLCH suele ser una opción moderna mejor.
¿Y HSV y OKLCH?
HSV es habitual en los selectores de color porque encaja de forma natural con un tono y un cuadrado de saturación y valor. OKLCH es más reciente en CSS y funciona mejor para generar escalas de tonos visualmente uniformes. Usa el conversor de RGB a Hex o el conversor de Hex a RGB cuando necesites comparar Hex, RGB, HSL, HSV y OKLCH del mismo color.
Ningún formato es el mejor en todos los casos. Elige un formato de origen coherente, convierte en los límites y conserva el alfa cuando haga falta. El conversor de RGB a Hex también muestra HSL, HSV y OKLCH para compararlos.
A continuación, descubre cómo se comportan los canales y el alfa en la mezcla de colores digital.