Formati colore spiegati: HEX, RGB e HSL
Risposta rapida
HEX (#RRGGBB) e RGB (0—55 per canale) codificano direttamente le intensità di rosso, verde e blu. HSL (tonalità 0—60°, saturazione/luminosità 0—00%) codifica il colore in un modo che corrisponde alla percezione umana, semplificando la creazione di tavolozze e sfumature. Converti tra tutti e tre con il nostro convertitore di colori.
Introduzione
I colori Web sono specificati in tre formati dominanti: HEX (base 16 rosso, verde, blu), RGB (decimale 0-55 per canale) e HSL (tonalità, saturazione, luminosità). Tutti e tre descrivono lo stesso spazio colore sRGB ma espongono assi diversi: HEX e RGB sono orientati all'hardware (valori diretti del canale), mentre HSL è orientato all'uomo (tonalità, saturazione e luminosità intuitive). Il moderno CSS supporta anche alpha tramite HEX8, rgba() e hsla().
Passo dopo passo
-
Comprendi la notazione HEX
HEX scrive ciascun canale come un numero in base 16 a due cifre: #RRGGBB. 00 è spento, FF (255) è a piena intensità. #FF0000 è rosso puro, #00FF00 verde puro, #0000FF blu puro, #FFFFFF bianco, #000000 nero. Una abbreviazione di 4 cifre #RGB si espande in #RRGGBB e #RRGGBBAA aggiunge alfa (ad esempio #FF573380 è 50% alfa).
-
Comprendi la notazione RGB
RGB utilizza il numero decimale 0—55 per canale: rgb(255, 87, 51) è uguale a #FF5733. La funzione rgba() aggiunge uno 0— alfa: rgba(255, 87, 51, 0.5) è opaco al 50%. RGB è equivalente a HEX: è solo decimale anziché in base 16.
-
Comprendi la notazione HSL
HSL utilizza la tonalità (0—60° sulla ruota dei colori: 0=rosso, 120=verde, 240=blu), la saturazione (0% = grigio, 100% = colore pieno) e la luminosità (0% = nero, 50% = normale, 100% = bianco). hsl(11, 100%, 60%) è un arancione vivido. HSL rende banale creare tinte (aumentare la luminosità) e sfumature (diminuire la luminosità) della stessa tonalità.
-
Converti tra formati
HEX→RGB: analizza ogni coppia come base 16. RGB→HEX: converte ciascun canale in base 16 a 2 cifre. RGB→HSL: calcola max/min di canali normalizzati, luminosità = (max+min)/2, la saturazione dipende dalla luminosità, la tonalità è l'angolo del canale dominante. Utilizza il nostro convertitore di colori per fare tutto questo all'istante.
-
Scegli il formato giusto per l'attività
Utilizza HEX per compattezza nei token e nelle risorse di progettazione. Utilizza RGB/rgba() quando devi interpolare o animare i canali. Utilizza HSL/HSLA quando generi tavolozze, sfumature o variazioni di temi: regolare la luminosità del 10% è molto più semplice che ragionare sui delta RGB.
Esempi
Rosso puro in tutti e tre i formati
Ingresso: #FF0000
Produzione: rgb(255, 0, 0) = hsl(0, 100%, 50%)
Un arancione vivido
Ingresso: #FF5733
Produzione: rgb(255, 87, 51) = hsl(11, 100%, 60%)
Bianco e nero
Ingresso: #FFFFFF e #000000
Produzione: rgb(255,255,255) = hsl(0, 0%, 100%); rgb(0,0,0) = hsl(0, 0%, 0%)
Creazione di una tonalità in 5 passaggi da una tonalità HSL
Ingresso: hsl(210, 70%, 50%) — varia luminosità 30/40/50/60/70%
Produzione: #1A4D7F, #2E6BA3, #4389C7, #6FA8DC, #9EC5E8: una tavolozza blu coerente
Problemi comuni
- Miscelazione di 3 cifre e 6 cifre HEX: #F00 e #FF0000 sono dello stesso colore, ma alcuni parser accettano solo un formato. Normalizza il codice a 6 cifre per evitare sorprese.
- Dimenticando che HSL la luminosità al 50% non è "mezza luminosità": con una saturazione del 100%, la luminosità al 50% è la tonalità pura; sopra il 50% vira verso il bianco, sotto il 50% vira verso il nero. '50% grigio' è hsl(0, 0%, 50%).
- Confusione del canale alfa: #RRGGBBAA (HEX8) è supportato nei browser moderni ma non in quelli più vecchi; rgba()/hsla() ha un supporto più ampio. Testare sempre l'ambiente di destinazione.
- Mancata corrispondenza dello spazio colore: HEX, RGB e HSL descrivono tutti sRGB. Se converti in/da P3 o Lab/OKLCH (utilizzato dai display moderni), una copia ingenua del canale produce colori errati: utilizza una libreria di colori adeguata.
Suggerimenti
- Utilizza HSL quando progetti una tavolozza: scegli una tonalità, quindi varia la luminosità (ad esempio 30/50/70%) e la saturazione (ad esempio 60/80/100%) per generare sfumature e tinte coerenti.
- Per l'accessibilità, controlla il rapporto di contrasto rispetto allo sfondo: le WCAG AA richiedono 4,5:1 per il testo normale, AAA 7:1. Utilizza il nostro convertitore di colori per calcolare la luminanza e il contrasto relativi.
- Preferisci il moderno CSS color-mix() o oklch() per un'interpolazione percettivamente uniforme —RGB l'interpolazione può passare attraverso i grigi fangosi quando si mescolano colori complementari.
- Quando generi gradienti, converti prima i punti finali nello stesso formato: mescolando HEX e HSL in un'unica dichiarazione di gradiente puoi produrre punti medi imprevisti.