Se hai mai provato a progettare un sito Web, creare un logo o stampare un biglietto da visita, ti sei immediatamente imbattuto nella confusa zuppa alfabetica dei codici colore: HEX, RGB, HSL e CMYK. Perché ci sono così tanti modi per descrivere una semplice tonalità di blu?
La verità è che computer e stampanti "vedono" la luce in modi fondamentalmente diversi. Inoltre, il modo in cui i computer elaborano la luce non corrisponde necessariamente al modo in cui il cervello umano interpreta il colore. Comprendere questi formati non è solo teoria: ti eviterà di implementare siti Web con rapporti di contrasto inaccessibili o di pagare migliaia di dollari per volantini di marketing che vengono stampati con un aspetto confuso e scuro.
Luce additiva e sottrattiva
Prima di immergerci nel codice, dobbiamo stabilire la differenza fisica tra schermo e carta.
- Gli schermi emettono luce (additiva). Se disattivi tutti i pixel, lo schermo sarà nero. Per creare il bianco, uno schermo emette luce rossa, verde e blu alla massima intensità.
- La carta riflette la luce (sottrattiva). Un pezzo di carta bianco è già bianco (riflette tutta la luce). Per creare il nero, una stampante sovrappone l'inchiostro ciano, magenta e giallo uno sopra l'altro per assorbire tutta la luce.
1. RGB (rosso, verde, blu)
RGB è la lingua nativa del monitor del tuo computer. Definisce un colore dicendo allo schermo esattamente quanta luce rossa, verde e blu emettere. Ogni canale è rappresentato da un numero intero compreso tra 0 (disattivato) e 255 (intensità massima).
Ad esempio, il rosso puro è rgb(255, 0, 0). Il bianco puro è rgb(255, 255, 255).
Ideale per: editing di immagini (Photoshop) e fotografia digitale. Manipola direttamente i pixel dell'hardware.
2. HEX (esadecimale)
I codici HEX, come #FF5733, sono esattamente la stessa cosa di RGB. L'unica differenza è la matematica. Invece di utilizzare numeri in base 10 (0-255), utilizza numeri esadecimali in base 16 (da 00 a FF). Le prime due lettere indicano il rosso, le due centrali il verde e le ultime due il blu.
Perché gli sviluppatori web usano HEX? Perché è più corto. Scrivere #FFF è molto più veloce per uno sviluppatore CSS che scrivere rgb(255, 255, 255).
Ideale per: codificare i colori del marchio nei CSS. È conciso e facilmente copiabile tra strumenti di progettazione come Figma e editor di codice.
Converti istantaneamente i codici colore
Non perdere tempo a fare calcoli esadecimali nella tua testa. Utilizza il nostro strumento offline per tradurre istantaneamente tra HEX, RGB, HSL e CMYK con un'anteprima visiva.
Apri Convertitore di colori3. HSL (tonalità, saturazione, luminosità)
RGB e HEX sono terribili per gli esseri umani. Se ti mostro il codice #4A90E2, non potrai facilmente indovinare di che colore è. Se ti chiedo di "rendere quel blu più scuro del 20%", fare i conti in HEX è quasi impossibile.
HSL è stato progettato per il cervello umano. Definisce il colore attraverso una ruota cromatica a 360 gradi.
- Tonalità (0-360): il colore effettivo. 0 è rosso, 120 è verde, 240 è blu.
- Saturazione (0-100%): quanto è intenso il colore. Lo 0% è grigio, il 100% è vibrante.
- Luminosità (0-100%): quanto è scuro o luminoso. Lo 0% è nero, il 100% è bianco.
Se il blu del tuo marchio è hsl(210, 100%, 50%) e desideri una tonalità più scura per un effetto al passaggio del mouse, devi semplicemente modificare l'ultimo numero: hsl(210, 100%, 40%). È magico per l'architettura CSS.
4. CMYK (ciano, magenta, giallo, chiave/nero)
CMYK è puramente per il mondo fisico. Determina il modo in cui una stampante mescola l'inchiostro fisico. Poiché l'inchiostro assorbe la luce, lo spazio colore è fisicamente più piccolo dell'RGB. Ci sono verdi neon vibranti che uno schermo può emettere (in RGB) che una stampante fisicamente non può stampare (in CMYK).
La regola d'oro: non inviare mai un file RGB a una stampante commerciale. La stampante lo convertirà forzatamente in CMYK, facendo sì che i tuoi colori vivaci sembrino confusi e sbiaditi. Converti sempre i tuoi disegni in CMYK prima di inviarli alla tipografia.
Matrice di confronto
| Format | Environment | Readability | Primary Use Case |
|---|---|---|---|
| HEX | Digital | Low | Standard web design, copying from Figma |
| RGB | Digital | Medium | Manipulating alpha transparency (rgba) |
| HSL | Digital | High | Dynamic CSS theming, Dark Modes |
| CMYK | Physical Print | N/A | Business cards, flyers, packaging |
Domande frequenti (FAQ)
Quale formato dovrei usare per una modalità oscura CSS?
Utilizza sempre HSL per temi dinamici. Mantenendo costanti Tonalità e Saturazione, puoi semplicemente invertire il valore Luminosità per tradurre perfettamente un colore in modalità luce in un colore in modalità scura.
Posso utilizzare CMYK su un sito web?
No. I browser Web supportano solo i formati di colore basati sulla luce (RGB, HEX, HSL). Se carichi un JPEG CMYK su un sito web, alcuni browser tenteranno di eseguirne il rendering, ma i colori appariranno interrotti o invertiti.
Cos'è un canale alfa?
La "A" in RGBA o HSLA sta per Alpha, che controlla la trasparenza. Un alfa di 1,0 è completamente solido, mentre 0,5 è trasparente al 50%. I moderni CSS ora consentono la trasparenza direttamente anche nei codici HEX aggiungendo due cifre extra (ad esempio, #FFFFFF80).