In CSS lo stesso colore può essere scritto in almeno tre modi diversi, e ciascuno risulta comodo per un compito diverso, dal design all'animazione della trasparenza.
HEX: una notazione compatta da copiare e incollare
La notazione esadecimale come #FF5733 codifica i tre canali — rosso, verde, blu — con due caratteri ciascuno. È il formato più compatto, comodo da copiare da un mockup di design, ma quasi illeggibile per una persona: è difficile capire a colpo d'occhio quale tonalità si nasconda dietro una sequenza di cifre.
RGB: accesso diretto a ogni canale
rgb(255, 87, 51) scrive gli stessi tre canali come numeri decimali da 0 a 255. È comodo quando serve modificare un singolo canale via codice, ad esempio aumentare gradualmente il rosso in un'animazione JavaScript.
HSL: selezione intuitiva della tonalità
HSL descrive un colore tramite tonalità (hue, 0–360°), saturazione e luminosità. È il formato più comodo per scegliere un colore a mano: per ottenere una versione più scura della stessa tonalità basta ridurre solo la luminosità, senza ricalcolare tutti e tre i canali RGB da zero.
Il canale alfa per la trasparenza
I formati rgba() e hsla() aggiungono un quarto parametro: l'opacità, da 0 a 1. Il CSS moderno permette anche di impostare la trasparenza in HEX tramite due caratteri aggiuntivi alla fine, come #FF573380.
A cosa serve
- Convertire rapidamente un colore preso da un mockup di design nel formato CSS necessario.
- Scegliere una tonalità più scura o più chiara dello stesso colore tramite HSL.
- Aggiungere trasparenza a un colore senza cambiarne la tonalità di base.
Quando un colore è un marchio registrato
Non tutti i colori HEX sono liberi da vincoli: il "Rosso Ferrari" storicamente usato sulle monoposto di Maranello non corrisponde a un unico codice fisso, ma a una tonalità di riferimento che l'azienda ha rivendicato come propria identità visiva per decenni, in un paese con una lunga tradizione di tutela del design industriale. È un fenomeno più ampio del solo Rosso Ferrari: aziende come Tiffany & Co. hanno registrato uno specifico colore turchese come marchio, e in campo automobilistico ogni grande brand italiano custodisce le proprie sfumature di rosso, blu o giallo come parte del riconoscimento del marchio tanto quanto il logo stesso. Un convertitore come questo permette di verificare quanto un colore scelto per un progetto si avvicini a tonalità così iconiche, cosa da tenere presente prima di usarle in un contesto commerciale.