Levar uma paleta de impressão para a web é mais fácil em HSL: uma vez que a mistura de tinta está expressa como hue, saturation e lightness, você pode criar estados de hover, tons e matizes em segundos.
Como funciona a conversão de CMYK para HSL
- Converta as porcentagens CMYK em canais sRGB entre 0 e 255 com o perfil Coated FOGRA39.
- Divida os canais por 255 e obtenha seu máximo e mínimo.
- A média entre máximo e mínimo é a lightness L; seu espaçamento determina a saturation S.
- O canal que contém o máximo determina o hue H em graus na roda de cores.
Exemplo prático
A etapa de CMYK para RGB usa o perfil padrão Coated FOGRA39, por isso outros perfis CMYK (por exemplo, o da sua gráfica) geram números diferentes. Os valores HSL são arredondados para números inteiros.
CMYK e HSL explicados
O que é CMYK?
CMYK é o modelo de quatro tintas usado na impressão: ciano, magenta, amarelo e key (preto), cada um como percentagem de 0 a 100. A tinta subtrai luz em vez de a emitir, por isso o CMYK cobre menos cores que um ecrã — o que explica porque cores vibrantes do ecrã muitas vezes parecem mais baças quando impressas.
- Sintaxe:
- cmyk(C%, M%, Y%, K%)
- Intervalo:
- 0–100% por tinta
- Melhor para:
- impressão, packaging, arte pronta para impressão
O que é HSL?
HSL divide uma cor em matiz (0–360° na roda de cores), saturação (quão colorida, 0–100%) e luminosidade (quão clara, 0–100%). Como cada parte corresponde à forma como as pessoas descrevem cor, HSL é o formato mais fácil para criar tons, sombras e paletas consistentes — manualmente ou em código.
- Sintaxe:
- hsl(H, S%, L%)
- Intervalo:
- 0–360°, 0–100%, 0–100%
- Melhor para:
- paletas, tons e sombras, theming
Tabela de referência CMYK para HSL
As cores CSS mais comuns, convertidas de CMYK para HSL.
| Cor | CMYK | HSL |
|---|---|---|
| black | cmyk(89%, 78%, 62%, 97%) | hsl(0, 0%, 0%) |
| white | cmyk(0%, 0%, 0%, 0%) | hsl(0, 0%, 100%) |
| red | cmyk(0%, 95%, 92%, 0%) | hsl(1, 79%, 51%) |
| lime | cmyk(64%, 0%, 100%, 0%) | hsl(93, 60%, 44%) |
| blue | cmyk(93%, 75%, 0%, 0%) | hsl(224, 56%, 39%) |
| yellow | cmyk(9%, 0%, 96%, 0%) | hsl(57, 100%, 48%) |
| orange | cmyk(0%, 43%, 94%, 0%) | hsl(37, 93%, 53%) |
| teal | cmyk(83%, 27%, 48%, 12%) | hsl(180, 87%, 27%) |
| purple | cmyk(63%, 100%, 4%, 1%) | hsl(299, 58%, 31%) |
| gray | cmyk(48%, 39%, 39%, 21%) | hsl(30, 1%, 50%) |