Llevar una paleta impresa a la web es más fácil en HSL: una vez que tu mezcla de tintas se expresa como hue, saturation y lightness, puedes crear estados hover, tintes y sombras en segundos.
Cómo funciona la conversión de CMYK a HSL
- Convierte los porcentajes CMYK a canales RGB entre 0 y 255.
- Divide los canales por 255 y toma su máximo y su mínimo.
- El promedio del máximo y el mínimo es la lightness L; su diferencia determina la saturation S.
- El canal que contiene el máximo determina el hue H en grados sobre la rueda de color.
Ejemplo práctico
El paso de CMYK a RGB ya es una aproximación y los valores HSL se redondean a números enteros. El resultado es una coincidencia muy cercana, no una conversión gestionada por color.
CMYK y HSL explicados
¿Qué es CMYK?
CMYK es el modelo de cuatro tintas usado en impresión: cyan, magenta, yellow y key (negro), cada una como porcentaje de 0 a 100. La tinta resta luz en vez de emitirla, por eso CMYK cubre menos colores que una pantalla — y los colores brillantes de pantalla suelen verse más apagados al imprimirse.
- Sintaxis:
- cmyk(C%, M%, Y%, K%)
- Rango:
- 0–100% por tinta
- Mejor para:
- impresión, embalaje, archivos listos para imprenta
¿Qué es HSL?
HSL divide un color en tono (0–360° en la rueda de color), saturación (qué tan colorido, 0–100%) y luminosidad (qué tan claro, 0–100%). Como cada parte coincide con la forma en que la gente describe el color, HSL es el formato más sencillo para crear tintes, sombras y paletas coherentes — a mano o en código.
- Sintaxis:
- hsl(H, S%, L%)
- Rango:
- 0–360°, 0–100%, 0–100%
- Mejor para:
- paletas, tintes y sombras, theming
Tabla de referencia de CMYK a HSL
Los colores CSS más comunes, convertidos de CMYK a HSL.
| Color | CMYK | HSL |
|---|---|---|
| black | cmyk(0%, 0%, 0%, 100%) | hsl(0, 0%, 0%) |
| white | cmyk(0%, 0%, 0%, 0%) | hsl(0, 0%, 100%) |
| red | cmyk(0%, 100%, 100%, 0%) | hsl(0, 100%, 50%) |
| lime | cmyk(100%, 0%, 100%, 0%) | hsl(120, 100%, 50%) |
| blue | cmyk(100%, 100%, 0%, 0%) | hsl(240, 100%, 50%) |
| yellow | cmyk(0%, 0%, 100%, 0%) | hsl(60, 100%, 50%) |
| orange | cmyk(0%, 35%, 100%, 0%) | hsl(39, 100%, 50%) |
| teal | cmyk(100%, 0%, 0%, 50%) | hsl(180, 100%, 25%) |
| purple | cmyk(0%, 100%, 0%, 50%) | hsl(300, 100%, 25%) |
| gray | cmyk(0%, 0%, 0%, 50%) | hsl(0, 0%, 50%) |