RGB non basta: notazioni colore HSL, CMYK e OKLCH

Nel post precedente, Come il computer crea i colori: RGB, HEX e numeri binari, abbiamo visto che un colore è semplicemente tre numeri — rosso, verde, blu, ciascuno da 0 a 255. Gli schermi funzionano benissimo con quei numeri. Ma nel momento in cui un essere umano inizia a lavorare con il colore, RGB diventa subito scomodo.

RGB è pratico, ma poco intuitivo

“Un rosso leggermente più chiaro.” Come si ottiene in RGB? Bisogna aumentare tutti e tre i canali contemporaneamente. “Voglio solo abbassare un po’ la saturazione” — guardando solo RGB non si capisce dove intervenire. “Stampa esattamente questo colore su carta” — con RGB è impossibile.

Gli altri modelli colore sono nati proprio per risolvere questi problemi.

HSL — il modo in cui ragiona l’essere umano

HSL descrive il colore attraverso tre valori: tonalità · saturazione · luminosità. hsl(14, 100%, 60%) è lo stesso colore di #FF5733, ma è immediatamente chiaro cosa viene da dove.

Se RGB è il linguaggio della macchina, HSL è il linguaggio del designer. Puoi lavorare sullo stesso colore partendo da cosa vuoi modificare.

Hue — la tonalità è un cerchio di 360°

La tonalità percorre un cerchio completo, da 0° a 360°. 0° e 360° sono lo stesso rosso.

Saturation — la saturazione è l’intensità del colore

Abbassando la saturazione dello stesso colore, si avvicina progressivamente al grigio.

Lightness — la luminosità va dal nero al bianco

Con L a 0% il risultato è sempre nero, con L a 100% sempre bianco. 50% è la luminosità “naturale” di quel colore.

Il vero vantaggio di HSL — creare palette

Tenendo fisso il valore H e variando solo L si ottiene naturalmente una famiglia di colori armoniosi. Con RGB bisognerebbe calcolare manualmente tutti i 9 valori; con HSL basta far avanzare L da 12% a 92% per gradi.

Entrambe le palette si possono generare con una sola riga.

:root {
  --terra-100: hsl(14 60% 92%);
  --terra-200: hsl(14 60% 82%);
  --terra-300: hsl(14 60% 72%);
  /* ... basta cambiare L di 10 in 10 */
}

È qui che HSL dà il meglio di sé quando si costruisce un design system.

CMYK — il linguaggio dell’inchiostro

Per mettere il colore su carta, anziché su uno schermo, serve un sistema completamente diverso. CMYK è la percentuale di ciascuno dei quattro inchiostri usati in tipografia.

Perché il nero si chiama “K” anziché “B”? Per evitare confusione con il Blue. Deriva inoltre dal termine tipografico “Key plate” — la lastra di riferimento su cui si allineano tutti gli altri inchiostri.

La luce si somma e diventa più chiara; l’inchiostro si somma e diventa più scuro

La differenza principale tra RGB e CMYK sta nel modo di miscelare.

L’inchiostro rosso appare rosso perché assorbe le altre lunghezze d’onda e riflette solo il rosso. L’inchiostro sottrare luce. Per questo, più si mescolano gli inchiostri, più il colore scurisce. In teoria, mescolando CMY si dovrebbe ottenere il nero; in pratica si ottiene un marrone fangoso. Ecco perché esiste un inchiostro nero dedicato (K).

Dove si usa CMYK

Se lavori con grafica per schermo, difficilmente toccherai CMYK. Compare solo quando si stampa su carta.

• Consegna file in tipografia — biglietti da visita, poster, libri, packaging. Le tipografie ricevono file RGB e li convertono in CMYK.
• Lavoro di stampa in Photoshop / Illustrator — si imposta la modalità colore CMYK sin dall’inizio.
• Brand guide — contengono sia il valore HEX per lo schermo sia il valore CMYK per la stampa. Lo stesso colore brand deve risultare simile su entrambi i supporti.

Perché i colori a schermo e su carta differiscono — Gamut

La gamma di colori riproducibili dallo schermo (RGB gamut) e quella dell’inchiostro (CMYK gamut) non coincidono. Un rosa fluorescente brillante sullo schermo non si può ottenere stampandolo — semplicemente non è riproducibile con l’inchiostro.

I designer per la stampa scelgono quindi fin dall’inizio solo colori dentro il gamut CMYK. I progetti realizzati in RGB che vengono stampati direttamente risultano spesso opachi e spenti.

Come si scrivono i valori CMYK

Si indica la percentuale di ogni inchiostro da depositare. 0% = niente, 100% = al massimo.

Il nero profondo realizzato con solo K al 100% risulta un nero grigio e opaco. Per questo le tipografie aggiungono CMY per ottenere un nero più intenso.

OKLCH — le coordinate dell’occhio umano

È un modello colore entrato nell’uso comune negli anni 2020. La parola chiave è una sola — “naturale per l’occhio umano.”

Le tre coordinate sembrano simili a HSL.

• L — Lightness (luminosità, 0~1)
• C — Chroma (saturazione, 0~circa 0.4)
• H — Hue (tonalità, 0~360°)

HSL però nasconde un problema: con lo stesso L = 50%, la luminosità percepita varia enormemente da colore a colore. Confrontiamoli direttamente.

In una riga: RGB e HSL sono coordinate della macchina. OKLCH sono coordinate dell’occhio umano.

Il ruolo di L · C · H

Proviamo a variare una sola coordinata alla volta tenendo fisso il colore di base.

Dove si usa

• Palette con luminosità uniforme — quando vuoi che 8 colori categorici abbiano tutti la stessa luminosità percepita
• Conversione automatica dark/light mode — invertendo L si ottiene naturalmente un tema scuro
• Accessibilità — permette di prevedere con precisione il contrasto tra testo e sfondo
• Gradienti — transizioni fluide senza quella banda grigia intermedia

È stato adottato ufficialmente da CSS Color Level 4 ed è disponibile direttamente nei browser moderni.

.btn { background: oklch(67% 0.18 30); }       /* arancio */
.btn:hover { background: oklch(60% 0.18 30); } /* abbasso solo L di 7 → diventa esattamente più scuro */

Quando usare cosa

Per la maggior parte del lavoro digitale RGB/HEX è più che sufficiente. HSL torna utile quando si costruiscono palette; OKLCH aiuta molto nel design con dark/light mode.

Come fns gestisce i colori

Sapere che il colore è un numero è il primo passo; avere i colori che usi spesso sempre a portata di mano è il passo successivo. fns raccoglie tutto il flusso — catturare, salvare e richiamare i colori — dietro un singolo tasto.

Cattura il colore da qualsiasi punto dello schermo con Eyedropper — ⌘+Shift+K

Eyedropper cattura con precisione il colore esatto di qualsiasi pixel sullo schermo. È come avere il color picker di Figma/Photoshop disponibile ovunque nel sistema.

Premi ⌘+Shift+K da qualsiasi punto e l’Eyedropper di fns appare immediatamente. Un pixel del mockup di design, un’area specifica di una foto, il colore di sfondo di un’altra app — portaci il cursore e clicca per catturare quel colore con precisione.

• Ad ogni clic il colore viene copiato automaticamente negli appunti. Non serve una “copia” separata.
• Dal widget Eyedropper puoi scegliere in quale formato — RGB / HEX / HSL / CMYK / OKLCH — il colore entrerà negli appunti.
• Mostra un’anteprima visiva del colore catturato e i colori di sistema più vicini.

Eyedropper → copia automatica negli appunti → richiamo dal color picker degli appunti — il flusso non si interrompe. Non serve aprire il Digital Color Meter di Mac a parte, né premere ogni volta la scorciatoia di copia.

Gli appunti riconoscono automaticamente i colori

La cronologia degli appunti di fns rileva automaticamente se il testo copiato è un codice colore, indipendentemente dal formato.

Quando richiami dalla cronologia un colore copiato in precedenza, ricordare di che colore si trattasse guardando solo il testo è difficile. fns mostra un piccolo chip di colore accanto a ogni voce, così riconosci il colore a colpo d’occhio.

Filtrare solo i colori

Con un tasto puoi filtrare la cronologia degli appunti per vedere solo i codici colore. Durante il lavoro di design, quando vuoi rivedere solo i colori usati di recente, non devi scorrere tra testi, URL e codice.

• Dal picker usa una parola chiave come color: → mostra solo le voci di colore
• Cerca per nome — digitare “blue” o “red” filtra i colori di quella famiglia
• I colori simili vengono raggruppati visivamente

Convertire un colore in un altro formato

Puoi estrarre lo stesso colore in una notazione diversa. Se hai copiato #FF5733 da Figma e vuoi incollarlo come rgb(...) nel CSS, seleziona quella voce nel color picker degli appunti di fns e con una scorciatoia ottieni la conversione automatica.

Non devi più aprire un convertitore ogni volta che passi tra Figma (HSB) e CSS (HSL/HEX/OKLCH).

Text expansion e raggruppamento

Registra i colori del brand che usi spesso come abbreviazioni di testo.

La stessa abbreviazione funziona ovunque: nel campo colore di CSS, in Figma, nei messaggi Slack, nell’editor di codice. Il tempo speso a cercare e copiare i colori dalla brand guide svanisce.

Prova fns e risparmia il tempo che passi ad aprire convertitori e a riformattare codici colore.

Curioso di sapere da dove vengono questi numeri — le basi dei tre canali RGB, il binario e la notazione HEX? Inizia da Come il computer crea i colori: RGB, HEX e numeri binari.