En CSS un mismo color se puede escribir de varias formas: #3b82f6, rgb(59, 130, 246) o hsl(217, 91%, 60%). Todas pintan el mismo azul, pero cada formato tiene ventajas según lo que quieras hacer. Esta guía explica los tres y cuándo usar cada uno.
HEX: el más común
El formato hexadecimal representa el color con # seguido de seis dígitos: dos para rojo, dos para verde, dos para azul, cada par de 00 a FF (0 a 255 en decimal).
color: #3b82f6; /* R=59, G=130, B=246 */
Existe la forma corta de tres dígitos cuando cada par se repite: #fff = #ffffff (blanco). Es compacto y el favorito para copiar y pegar, pero poco intuitivo para ajustar a ojo.
RGB: pensar en luz
RGB describe el color por sus componentes de rojo, verde y azul, de 0 a 255:
color: rgb(59, 130, 246);
Es el modelo de cómo funcionan las pantallas (mezcla de luz). Útil cuando manipulas colores programáticamente, pero igual de poco intuitivo que HEX para "hacer este color un poco más claro".
HSL: el más intuitivo para diseñar
HSL describe el color por tono (Hue), saturación (Saturation) y luminosidad (Lightness):
color: hsl(217, 91%, 60%);
- Tono (0-360): la posición en la rueda de color (0 rojo, 120 verde, 240 azul).
- Saturación (0-100%): cuán intenso o apagado.
- Luminosidad (0-100%): cuán claro u oscuro.
HSL es el más cómodo para diseñar: para hacer un color más claro, subes la luminosidad; para una variante apagada, bajas la saturación; para un color complementario, sumas 180 al tono. Por eso es ideal para generar paletas y estados (hover, active).
Transparencia: alpha
Los tres formatos admiten un canal alpha (opacidad, de 0 a 1):
color: rgba(59, 130, 246, 0.5); /* RGB con alpha */
color: hsla(217, 91%, 60%, 0.5); /* HSL con alpha */
color: #3b82f680; /* HEX de 8 dígitos */
El CSS moderno también permite rgb(59 130 246 / 50%) con la sintaxis nueva.
Cuándo usar cada uno
- HEX: para copiar valores fijos de diseño (Figma, guías de marca).
- RGB: cuando manipulas canales por código o necesitas alpha de forma explícita.
- HSL: para diseñar, generar variantes y paletas coherentes ajustando tono/saturación/luminosidad.
Lo práctico es convertir entre ellos según la tarea. Puedes hacerlo gratis con el conversor de colores de esta web, que pasa entre HEX, RGB y HSL al instante en tu navegador.
Consejo: contraste y accesibilidad
Elegir colores bonitos no basta: el texto debe tener suficiente contraste con el fondo para ser legible (las pautas WCAG piden una ratio mínima). Trabajar en HSL ayuda, porque puedes ajustar la luminosidad hasta alcanzar el contraste necesario sin cambiar el tono de tu marca.
Preguntas frecuentes
¿Cuál es "mejor", HEX, RGB o HSL? Ninguno; son representaciones del mismo color. HSL es el más cómodo para diseñar, HEX el más común para copiar.
¿Qué es el HEX de 8 dígitos? Es HEX con canal alpha: los dos últimos dígitos son la opacidad (00 transparente, FF opaco).
¿Pierdo precisión al convertir? Conversiones entre HEX y RGB son exactas. HSL puede tener redondeos mínimos, imperceptibles.
¿Se suben mis datos? No, si usas un conversor local. Todo ocurre en tu navegador.
Convierte entre HEX, RGB y HSL al instante con el conversor de colores gratis, 100% en tu navegador.