Traer unha paleta de impresión á web é máis sinxelo en HSL: unha vez que a túa mestura de tintas está expresada como tinte, saturación e luminosidade, podes construír estados hover, tintes e sombras en segundos.
Como funciona a conversión de CMYK a HSL
- Converte as porcentaxes CMYK a canles RGB entre 0 e 255.
- Divide as canles por 255 e toma o seu máximo e mínimo.
- A media do máximo e mínimo é a luminosidade L; o seu intervalo determina a saturación S.
- A canle que contén o máximo determina o tinte H en graos na roda de cores.
Exemplo práctico
O paso CMYK a RGB xa é unha aproximación e os valores HSL redondeanse a números enteiros. O resultado é moi próximo, non unha conversión xestionada por perfís de cor.
CMYK e HSL explicados
Que é CMYK?
CMYK é o modelo de catro tintas usado en impresión: cyan, magenta, yellow e key (negro), cada unha como porcentaxe de 0 a 100. A tinta subtráe luz en lugar de emitila, polo que CMYK abarca menos cores que unha pantalla — por iso as cores brillantes de pantalla adoitan verse máis apagadas ao imprimilas.
- Sintaxe:
- cmyk(C%, M%, Y%, K%)
- Rango:
- 0–100% por tinta
- Mellor para:
- impresión, embalaxe, arte final para prensa
Que é HSL?
HSL divide unha cor en tonalidade (0–360° na roda de cores), saturación (o nivel de cor, 0–100%) e luminosidade (o brillo, 0–100%). Como cada parte coincide coa forma en que a xente describe a cor, HSL é o formato máis sinxelo para crear tintas, sombras e paletas coherentes — manualmente ou en código.
- Sintaxe:
- hsl(H, S%, L%)
- Rango:
- 0–360°, 0–100%, 0–100%
- Mellor para:
- paletas, tintas e sombras, tematización
Táboa de referencia de CMYK a HSL
As cores CSS máis comúns, convertidas de CMYK a HSL.
| Cor | 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%) |