HEX, RGB, HSL: ¿cuál es la diferencia entre formatos de color?
Veamos cuatro formatos de color: HEX, RGB, HSL y CMYK. Cuándo usar cada uno, cómo convertir, ejemplos de código.
Formatos de color en la web
En el desarrollo y diseño web, los colores se especifican de varias formas. Cada formato tiene sus ventajas.
HEX (#RRGGBB)
La notación hexadecimal es el formato más común en la web.
color: #4f46e5; /* Índigo */
color: #09090b; /*Casi negro*/
color: #fff; /* Forma corta #ffffff */ Pros: Brevedad, claridad para los diseñadores, compatible en todas partes.
RGB (rojo, verde, azul)
Establece el color a través de la intensidad de tres canales de 0 a 255.
color: rgb(79, 70, 229); /* Índigo */
color: rgba(79, 70, 229, 0,5); /* Con transparencia */ Pros: Intuitivo, conveniente para la manipulación programática del color.
HSL (Tono, Saturación, Luminosidad)
El formato más “humano”: tono (°), saturación (%), luminosidad (%).
color: hsl(243, 75%, 59%); /* Índigo */
color: hsl(243, 75%, 45%); /*Más oscuro*/
color: hsl(243, 75%, 75%); /*Más ligero*/ Pros: Crea fácilmente paletas tonales cambiando solo la luminosidad.
CMYK (cian, magenta, amarillo, clave/negro)
Utilizado en impresión.
cmyk(66%, 69%, 0%, 10%) = Índigo Pros: Coincidencia exacta del color cuando se imprime.
¿Cuándo usar qué?
| Problema | Formato |
|---|---|
| --- | --- |
| Estilos CSS | HEX o HSL |
| Animaciones y cálculos | HSL o RGB |
| Impresión de libros de marcas | CMYK |
| Transparencia | rgba() o hsla() |
Convierta colores en línea con nuestra herramienta: comprobador de contraste HEX, RGB, HSL, CMYK y WCAG.