Le sintassi dei colori
| Sintassi | Esempio | Note |
|---|---|---|
| Hex | #1F4FE0, #1F4FE080 | Due cifre hex per canale; 8 cifre aggiungono l’alfa. #RGB è l’abbreviazione di #RRGGBB. |
| rgb() | rgb(31 79 224 / 50%) | 0–255 per canale. La sintassi moderna usa spazi e una barra per l’alfa; la forma con le virgole funziona ancora. |
| hsl() | hsl(225 76% 50%) | Tonalità in gradi, saturazione e luminosità in percentuale. Facile da ritoccare a mano, ma valori uguali di luminosità non appaiono ugualmente chiari. |
| hwb() | hwb(225 12% 12%) | Tonalità, bianco, nero: come mescola un pittore. |
| oklch() | oklch(0.51 0.22 266) | Luminosità percettiva 0–1, croma, tonalità. Cambiare L della stessa quantità appare come lo stesso cambiamento per ogni tonalità, il che lo rende lo spazio giusto per generare palette. |
| oklab() | oklab(0.51 0.01 -0.22) | La forma cartesiana di OKLCH. |
| Con nome | rebeccapurple | 148 nomi da CSS Color Level 4. |
Contrasto
WCAG 2 definisce il contrasto come (L₁ + 0,05) / (L₂ + 0,05) usando la luminanza relativa, da 1:1 (identici) a 21:1 (nero su bianco). Il testo del corpo richiede 4,5:1 per AA e 7:1 per AAA; il testo grande (18 pt, o 14 pt grassetto) e i componenti di interfaccia come bordi e icone richiedono 3:1. Il verificatore mostra tutti e quattro i verdetti e scambia i due colori per mostrare che il rapporto è simmetrico.
Perché OKLCH
In HSL un giallo e un blu con la stessa «luminosità» appaiono enormemente diversi in quanto a chiarezza, quindi le palette costruite in HSL hanno passi irregolari. OKLCH è stato progettato perché differenze numeriche uguali appaiano uguali. È supportato in tutti i browser attuali, e color-mix() e la sintassi dei colori relativi funzionano con esso. Il convertitore segnala i colori OKLCH che cadono fuori dal gamut sRGB, perché lo strumento li limita.
Domande
Come converto hex in RGB a mano?
Dividi le sei cifre in coppie e converti ciascuna da hex: #1F4FE0 → 1F = 31, 4F = 79, E0 = 224 → rgb(31, 79, 224). L’hex a tre cifre raddoppia ogni cifra (#F80 = #FF8800).
Che rapporto di contrasto mi serve?
4,5:1 per il testo normale e 3:1 per il testo grande o i componenti di interfaccia per soddisfare WCAG AA; 7:1 e 4,5:1 per AAA. Il testo segnaposto e i controlli disabilitati sono esenti, ma vale comunque la pena verificarli.
Perché la stessa luminosità hsl() appare diversa per tonalità diverse?
HSL è una trasformazione geometrica di RGB senza modello percettivo; il giallo puro (hsl 60 100% 50%) è molto più luminoso del blu puro (hsl 240 100% 50%) con la stessa L. Usa OKLCH quando servono passi visivamente uniformi.
Cos’è il canale alfa?
L’opacità, da 0 (trasparente) a 1 (opaco), scritta dopo una barra nella sintassi moderna o come quarto valore in rgba(). Qui il contrasto è calcolato sul colore opaco; un testo semitrasparente su uno sfondo richiede il risultato della fusione.