palette Convertitore di Colore star

Come Funziona

Queste tre notazioni descrivono tutte lo stesso identico colore sottostante — codificano semplicemente i livelli di luce rossa, verde e blu che uno schermo miscela per produrlo. RGB memorizza ciascun canale come numero decimale da 0 a 255. HEX è semplicemente RGB scritto in base 16: ogni canale diventa una coppia esadecimale di due cifre, quindi rgb(255, 128, 0) diventa #ff8000 (ff = 255, 80 = 128, 00 = 0). In questa traduzione non si guadagna né si perde alcuna informazione di colore — è pura notazione.

HSL è diverso: rideriva il colore lungo tre assi percettivi — tonalità, saturazione e luminosità — calcolati matematicamente dai canali RGB. La tonalità (0–360°) è l'angolo su una ruota dei colori, calcolato in base a quale canale è il più grande e quanto distanti sono i canali tra loro: per #ff8000, il rosso è massimo (255) e il blu è minimo (0), e la formula 60 × ((verde − blu) / (max − min)) dà 60 × (128/255) ≈ 30°, collocandolo nella banda dell'arancione. La luminosità è la media tra il canale più alto e quello più basso — qui (255 + 0) / 2 ≈ 50%. La saturazione misura quanto il colore si allontana dal grigio a quella luminosità — 100% in questo caso, poiché un canale è alla massima intensità e un altro a zero. Insieme si leggono come hsl(30, 100%, 50%) — lo stesso arancione di #ff8000, descritto in modo diverso.

Questo è esattamente il motivo per cui i designer preferiscono HSL a RGB: per rendere un colore più scuro del 20% mantenendone la tonalità, HSL richiede solo di abbassare il valore di luminosità — RGB richiederebbe di ricalcolare proporzionalmente tutti e tre i canali. Scegli un colore con il selettore o digita un codice HEX qualsiasi e questo strumento converte istantaneamente in entrambe le notazioni.

Cosa Dovresti Sapere

Il HEX breve a 3 cifre (#f80) e le forme a 4/8 cifre con canale alfa (#ff8000cc, rgba(255,128,0,0.8)) sono varianti comuni; questo strumento lavora con il HEX opaco standard a 6 cifre e i suoi equivalenti RGB/HSL. Nomi di colore come orange corrispondono a valori HEX fissi definiti nella specifica CSS, ma non ogni colore con nome ha un codice HEX memorabile, il che è un altro motivo per cui gli sviluppatori convertono avanti e indietro. Due colori che appaiono identici su un monitor possono rendere leggermente diversi su un altro, perché gli schermi consumer variano in gamut cromatico e calibrazione — i valori HEX/RGB/HSL sono numeri esatti, ma la luce che producono non è garantita identica su ogni schermo. Quando scegli colori per testo e sfondo, ricorda che il valore di luminosità di HSL non è la stessa cosa del contrasto percettivo — un giallo saturo e un blu saturo possono condividere lo stesso valore L ma apparire molto diversi su sfondo bianco, quindi i controlli di accessibilità dovrebbero usare un vero calcolo del rapporto di contrasto, non solo il numero L.

Il CSS accetta anche RGB basato su percentuali, come rgb(100%, 50%, 0%), come equivalente esatto di rgb(255, 128, 0) — utile quando si lavora con strumenti di design che esprimono il colore in percentuali anziché in interi 0–255. Le funzioni colore CSS più recenti come oklch() e lab() vanno oltre HSL: sono costruite per essere percettivamente uniformi, il che significa che passi numerici uguali di luminosità appaiono ugualmente diversi all'occhio umano in ogni tonalità, cosa che HSL non garantisce del tutto. Per il lavoro quotidiano su web e UI, tuttavia, HEX, RGB e HSL restano i tre formati che incontrerai in quasi ogni codebase, guida di stile e strumento di design.