Convertitore Codici Colore
I colori nello sviluppo web possono essere specificati in diversi formati: hex, RGB, HSL e colori nominati. Questo strumento converte tra tutti i formati, visualizza un'anteprima visiva, calcola i rapporti di contrasto per l'accessibilita e genera palette di colori complementari.
Specifiche
Casi d'uso comuni
- Conversione di colori hex forniti dal designer in HSL per una manipolazione piu semplice
- Verifica che il colore del testo soddisfi gli standard di accessibilita WCAG
- Generazione di palette colori per il design dell'interfaccia
- Debug dei valori colore CSS che non vengono visualizzati come previsto
- Ricerca dell'equivalente hex dei colori nominati CSS
Funzionalità
- Analisi hex (#RGB, #RRGGBB, #RRGGBBAA), RGB, RGBA, HSL, HSLA e colori nominati
- Conversione istantanea tra tutti i formati colore
- Output HEX8 (hex a 8 cifre con alfa)
- Anteprima visiva del colore con alternanza sfondo chiaro/scuro
- Anteprima del testo campione su sfondi bianco e nero
- Calcolo del rapporto di contrasto WCAG rispetto a bianco e nero
- Classificazione colore chiaro/scuro
- Generazione di palette colori complementari, analoghi, triadici, tetradici e monocromatici
- Visualizzazione di luminanza e raccomandazioni di accessibilita
Esempi
Suggerimenti
- HSL e spesso piu facile da usare: H e il colore, S e la vivacita, L e la luminosita.
- Per un testo accessibile, punta ad almeno un rapporto di contrasto 4.5:1 (WCAG AA).
- Il formato hex a 8 cifre (#RRGGBBAA) include la trasparenza alfa.
- CSS4 introduce nuovi spazi colore come oklch() per una migliore uniformita percettiva.
Approfondimenti Convertitore Codici Colore
I valori colore CSS definiscono i colori per lo stile web usando diversi sistemi di notazione. Il piu comune e l'esadecimale (#RRGGBB), dove ogni coppia di cifre hex rappresenta i canali rosso, verde e blu da 00 (0) a FF (255). La forma abbreviata #RGB raddoppia ogni cifra (#F00 equivale a #FF0000). La forma a 8 cifre #RRGGBBAA aggiunge un canale di trasparenza alfa.
Le notazioni funzionali forniscono una specifica del colore piu intuitiva. RGB (rgb(255, 0, 0)) specifica i canali come interi 0-255 o percentuali. HSL (hsl(0, 100%, 50%)) usa tonalita (ruota dei colori 0-360 gradi), saturazione (0-100%) e luminosita (0-100%), che molti designer trovano piu intuitivo per creare palette e regolare i colori. Sia RGB che HSL supportano la trasparenza alfa con rgba() e hsla() o la sintassi moderna rgb(255 0 0 / 50%).
L'accessibilita dei colori e una preoccupazione critica nello sviluppo web. WCAG 2.1 definisce rapporti di contrasto minimi: 4.5:1 per il testo normale (Livello AA), 3:1 per il testo grande e 7:1 per il contrasto migliorato (Livello AAA). Un contrasto insufficiente rende il testo difficile o impossibile da leggere per utenti con problemi di vista o deficit di visione dei colori.
CSS supporta anche 148 colori nominati (come rebeccapurple, cornflowerblue, tomato), la parola chiave currentColor e spazi colore piu recenti come HWB (tonalita-bianchezza-nerezza), LAB, LCH e OKLCH che forniscono una manipolazione del colore percettivamente uniforme. I nuovi spazi sono particolarmente utili per generare palette armoniche e gradienti uniformi.
Hex (#FF0000) e RGB (rgb(255,0,0)) specificano entrambi i valori dei canali rosso, verde e blu: hex usa la base 16 mentre RGB usa interi decimali. HSL (hsl(0,100%,50%)) rappresenta il colore usando tonalita (il colore stesso su una ruota a 360 gradi), saturazione (intensita) e luminosita (brillantezza), che molti sviluppatori trovano piu intuitivo per creare variazioni. Tutti e tre i formati possono rappresentare gli stessi colori, ma HSL rende immediato produrre varianti piu chiare, piu scure o piu tenui regolando un singolo valore.
Il canale alfa controlla la trasparenza su una scala da 0 (completamente trasparente) a 1 (completamente opaco). Nella notazione hex, l'alfa viene aggiunto come due cifre aggiuntive: #FF000080 rappresenta il rosso al 50% di trasparenza (80 hex = 128 decimale). Nella notazione funzionale, la sintassi e rgba(255,0,0,0.5) o la forma moderna rgb(255 0 0 / 50%). La trasparenza alfa e essenziale per sovrapposizioni, filigrane ed elementi dell'interfaccia a livelli. Per la conformita WCAG, il Livello AA richiede un rapporto di contrasto di almeno 4.5:1 per il testo normale e 3:1 per il testo grande (grassetto 18px+ o regolare 24px+), mentre il Livello AAA richiede 7:1 per il testo normale e 4.5:1 per il testo grande. Gli elementi non testuali come icone, bordi e controlli dei moduli necessitano di almeno 3:1 di contrasto rispetto ai colori adiacenti.
LAB e OKLCH sono spazi colore percettivamente uniformi dove cambiamenti numerici uguali producono differenze di colore visivamente uguali, rendendoli superiori per generare palette e gradienti uniformi. OKLCH (Luminosita, Croma, Tonalita) e particolarmente utile in CSS perche la regolazione della luminosita produce risultati naturali e prevedibili. Entrambi sono supportati nel CSS moderno con le funzioni oklch() e lab().