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 RGB tra 0 e 255.
- 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 è già un'approssimazione e i valori HSL sono arrotondati a numeri interi. Il risultato è molto vicino, non una conversione gestita colore.
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(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%) |