HEX, RGB e HSL: tre modi di scrivere un colore
Sullo schermo ogni colore è una miscela di rosso, verde e blu. HEX e RGB descrivono le stesse tre componenti in notazioni diverse; HSL descrive il colore come tonalità, saturazione e luminosità, più vicino al modo in cui lo percepiamo.
| Formato | Esempio (arancione) | Significato |
|---|---|---|
| HEX | #FF8800 | Rosso FF, verde 88, blu 00 in esadecimale |
| RGB | rgb(255, 136, 0) | Le stesse componenti da 0 a 255 |
| HSL | hsl(32, 100%, 50%) | Tonalità 32°, saturazione 100%, luminosità 50% |
Da HEX a RGB
Ogni coppia di cifre esadecimali è un numero da 0 a 255: FF = 15 × 16 + 15 = 255, 88 = 8 × 16 + 8 = 136. Il formato abbreviato #F80 equivale a #FF8800. Per le conversioni tra basi puoi usare il convertitore di basi numeriche.
Perché usare HSL
- Per creare varianti più chiare o più scure basta cambiare la luminosità, mantenendo la stessa tonalità.
- Colori complementari si trovano a 180° di distanza sulla ruota della tonalità.
- In CSS moderno tutti e tre i formati sono supportati, anche con trasparenza: rgb(255 136 0 / 50%).
Contrasto e accessibilità
Per testi leggibili, le linee guida WCAG chiedono un rapporto di contrasto di almeno 4,5:1 tra testo e sfondo (3:1 per i testi grandi). Un colore che sembra leggibile sul tuo schermo può non esserlo per chi ha una ridotta sensibilità ai colori o usa il telefono al sole.
Domande frequenti
Perché lo stesso colore appare diverso su schermi diversi?
I valori sono interpretati nello spazio colore sRGB, ma calibrazione, luminosità e tecnologia dello schermo cambiano la resa. Per la stampa si usano altri sistemi, come CMYK o Pantone.