Portare una palette da stampa al web è più semplice in HSL: una volta che la tua miscela di inchiostri è espressa come tinta, saturazione e luminosità, puoi costruire stati hover, tinte e ombre in pochi secondi.
Come funziona la conversione da CMYK a HSL
- Converti le percentuali CMYK in canali sRGB tra 0 e 255 con il profilo Coated FOGRA39.
- Dividi i canali per 255 e prendi il loro massimo e minimo.
- La media del massimo e del minimo è la luminosità L, la loro differenza determina la saturazione S.
- Il canale che contiene il massimo determina la tinta H in gradi sulla ruota dei colori.
Esempio pratico
Il passaggio da CMYK a RGB usa il profilo standard Coated FOGRA39, quindi altri profili CMYK (per esempio quelli della tua tipografia) danno numeri diversi. I valori HSL sono arrotondati a numeri interi.
CMYK e HSL spiegati
Cos'è CMYK?
CMYK è il modello a quattro inchiostri usato in stampa: cyan, magenta, yellow e key (nero), ognuno espresso in percentuale da 0 a 100. L'inchiostro sottrae luce invece di emitirla, quindi CMYK copre meno colori rispetto a uno schermo — ecco perché i colori brillanti a schermo spesso risultano più spenti una volta stampati.
- Sintassi:
- cmyk(C%, M%, Y%, K%)
- Intervallo:
- 0–100% per inchiostro
- Ideale per:
- stampa, packaging, artwork pronto per la stampa
Cos'è HSL?
HSL divide un colore in tonalità (0–360° sulla ruota dei colori), saturazione (quanto è colorato, 0–100%) e luminosità (quanto è chiaro, 0–100%). Poiché ogni parte corrisponde al modo in cui le persone descrivono il colore, HSL è il formato più semplice per creare tinte, ombre e palette coerenti — a mano o in codice.
- Sintassi:
- hsl(H, S%, L%)
- Intervallo:
- 0–360°, 0–100%, 0–100%
- Ideale per:
- palette, tinte e ombre, theming
Tabella di riferimento da CMYK a HSL
I colori CSS più comuni, convertiti da CMYK a HSL.
| Colore | 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%) |