Las paletas diseñadas en HSL a menudo acaban en papel. Este convertidor toma el hue, saturation y lightness que elegiste y devuelve los cuatro porcentajes de tinta con los que trabaja una imprenta.
Cómo funciona la conversión de HSL a CMYK
- Convierte el triple HSL a canales RGB entre 0 y 255.
- Normaliza esos canales dividiendo por 255.
- Calcula el componente key K = 1 − max(R, G, B).
- Deriva C, M y Y a partir de los canales restantes y convierte los cuatro a porcentajes.
Ejemplo práctico
Se realizan dos conversiones seguidas, por lo que el redondeo ocurre dos veces — y CMYK sigue siendo una aproximación sin perfil de color. Espera que el resultado impreso sea ligeramente menos vivo que la vista previa en HSL.
HSL y CMYK explicados
¿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
¿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
Tabla de referencia de HSL a CMYK
Los colores CSS más comunes, convertidos de HSL a CMYK.
| Color | HSL | CMYK |
|---|---|---|
| black | hsl(0, 0%, 0%) | cmyk(0%, 0%, 0%, 100%) |
| white | hsl(0, 0%, 100%) | cmyk(0%, 0%, 0%, 0%) |
| red | hsl(0, 100%, 50%) | cmyk(0%, 100%, 100%, 0%) |
| lime | hsl(120, 100%, 50%) | cmyk(100%, 0%, 100%, 0%) |
| blue | hsl(240, 100%, 50%) | cmyk(100%, 100%, 0%, 0%) |
| yellow | hsl(60, 100%, 50%) | cmyk(0%, 0%, 100%, 0%) |
| orange | hsl(39, 100%, 50%) | cmyk(0%, 35%, 100%, 0%) |
| teal | hsl(180, 100%, 25%) | cmyk(100%, 1%, 0%, 50%) |
| purple | hsl(300, 100%, 25%) | cmyk(0%, 100%, 1%, 50%) |
| gray | hsl(0, 0%, 50%) | cmyk(0%, 0%, 0%, 50%) |