Diferencias entre los modelos HEX, RGB, HSL y CMYK
En diseño web, interfaces digitales y artes gráficas conviven varios sistemas para representar el color. Comprender qué mide cada uno facilita trabajar con hojas de estilo CSS, programas de edición e imprenta:
- HEX (hexadecimal): expresa los canales rojo, verde y azul en base 16 mediante seis dígitos (
#RRGGBB) o su forma abreviada de tres dígitos (#RGB, donde#abcequivale a#aabbcc). Es el estándar más compacto en HTML y CSS. - RGB (Red, Green, Blue): modelo aditivo basado en la luz emitida por pantallas. Cada canal toma un valor entero de
0a255, generando más de 16,7 millones de combinaciones. - HSL (Hue, Saturation, Lightness): describe el color como lo percibe el ojo humano: matiz en grados del círculo cromático (
0°–360°), saturación (0%–100%) y luminosidad (0%–100%). Resulta ideal para crear escalas de tonos claros y oscuros coherentes. - CMYK (Cyan, Magenta, Yellow, Key/Black): modelo sustractivo utilizado en impresión offset y digital mediante tintas. La conversión desde RGB es matemática y orientativa; para trabajos críticos de imprenta conviene usar perfiles ICC específicos como Fogra o SWOP.
Al preparar recursos gráficos para tu web también puedes optimizar tus archivos con nuestro conversor para convertir imágenes a WebP, PNG o JPG o personalizar códigos con el generador de códigos QR.
Preguntas frecuentes
¿Qué ratio de contraste exige la norma WCAG 2.1?
Para cumplir el nivel AA (el estándar legal y recomendado en la web), el texto normal necesita una relación de contraste mínima de 4,5:1 frente al fondo, y el texto grande (desde 18 pt o 14 pt en negrita) al menos 3:1. El nivel AAA eleva la exigencia a 7:1 en texto normal y 4,5:1 en texto grande.
¿Cómo funciona el código HEX abreviado de 3 cifras?
Cuando cada pareja hexadecimal tiene dos caracteres idénticos, CSS permite escribir solo uno por canal: por ejemplo, #F0A se expande automáticamente a #FF00AA y #fff a #FFFFFF.
¿Por qué un color RGB puede verse distinto al imprimirlo en CMYK?
Las pantallas emiten luz (mezcla aditiva) y alcanzan azules y verdes muy intensos que las tintas sobre papel (mezcla sustractiva) no pueden reproducir con la misma luminosidad. Por eso algunos colores vibrantes de pantalla se atenúan ligeramente al pasar a cuatricromía.
¿Qué diferencia hay entre colores complementarios, análogos y triádicos?
Los complementarios se sitúan en lados opuestos del círculo cromático (a 180°) y generan máximo contraste para botones o llamadas a la acción; los análogos están contiguos (±30°) y producen diseños suaves y armónicos; y la armonía triádica reparte tres tonos equidistantes (cada 120°) logrando paletas equilibradas y vibrantes.