🎨
← Torna alle guide

HEX vs RGB vs HSL: Quale Formato di Colore Dovresti Usare?

· Tag: hex-vs-rgb-vs-hsl, color-formats, css, web-development, color-converter

HEX vs RGB vs HSL: Quale Formato di Colore Dovresti Usare?

CSS offre molti modi per definire i colori, ma i tre formati più comuni sono HEX, RGB e HSL. Ogni formato ha punti di forza distinti, e sapere quando usare ciascuno può migliorare drammaticamente la manutenibilità dei tuoi fogli di stile e la tua capacità di creare sistemi di colori dinamici. Questa guida analizza ogni formato così puoi scegliere quello giusto per ogni situazione.

Formato di Colore HEX: Lo Standard del Settore

I colori HEX (esadecimali) sono il formato più usato nel web design. Un colore hex è scritto come un # seguito da sei cifre esadecimali che rappresentano i valori rosso, verde e blu in quest'ordine.

#FF5733
  • #FF — Rosso (255 in decimale)
  • #57 — Verde (87 in decimale)
  • #33 — Blu (51 in decimale)

Variazioni di HEX

HEX supporta diverse notazioni per esigenze diverse:

/* Hex standard a sei cifre */
color: #FF5733;

/* Abbreviato — le coppie identiche si comprimono in tre cifre */
color: #F53; /* Si espande in #FF5533 */

/* Hex a otto cifre con canale alfa */
color: #FF573380; /* 50% di opacità */

HEX abbreviato funziona quando ogni coppia usa caratteri corrispondenti: #AABBCC diventa #ABC. È puramente una convenzione per risparmiare spazio supportata da tutti i browser.

HEX a otto cifre (#RRGGBBAA) ha aggiunto la trasparenza alfa. Il valore alfa varia da 00 (completamente trasparente) a FF (completamente opaco). Il supporto browser per l'hex a 8 cifre è eccellente in tutti i browser moderni.

Abbreviato a quattro cifre (#RGBA) esiste anch'esso: #F538 si espande in #FF553388.

Quando Usare HEX

  • Copia-incolla dagli strumenti di design — Figma, Sketch e Adobe XD generano tutti hex per impostazione predefinita
  • Colori del brand hardcoded — L'hex è inequivocabile e compatto per valori che non cambiano mai
  • Documentazione e mockup — L'hex è il formato più riconoscibile tra designer e sviluppatori
  • Proprietà personalizzate CSS — Memorizzare i token del brand in hex è una pratica comune

Quando Evitare HEX

  • Manipolazione programmatica dei colori — Regolare i singoli canali richiede l'analisi delle stringhe
  • Creare sistemi di colori — Generare varianti più chiare o più scure comporta matematica non banale
  • Comunicare l'intento del colore — L'hex non dà alcuna informazione semantica sul colore

Formato di Colore RGB: Controllo dei Canali

RGB sta per Rosso, Verde, Blu. In CSS, è scritto come una funzione con valori da 0 a 255 o percentuali (da 0% a 100%).

/* Sintassi legacy separata da virgole */
color: rgb(255, 87, 51);
color: rgba(255, 87, 51, 0.5);

/* Sintassi moderna separata da spazi */
color: rgb(255 87 51);
color: rgb(255 87 51 / 0.5);

/* Valori percentuali */
color: rgb(100% 34% 20%);

Miglioramenti della Sintassi RGB Moderna

La specifica CSS Color Level 4 ha modernizzato la funzione rgb() in due modi importanti:

  1. Valori separati da spazi — Le virgole non sono più richieste, rendendo la sintassi più pulita
  2. Alfa separato da barra — L'alias rgba() non è più necessario; rgb() ora accetta un canale alfa opzionale

Sia la sintassi legacy che quella moderna sono pienamente supportate, ma la sintassi moderna è raccomandata per il nuovo codice.

Quando Usare RGB

  • Canvas e WebGL — Le API dei dati immagine restituiscono i valori dei pixel in RGB
  • Regolazioni numeriche del colore — Quando hai valori rosso, verde e blu memorizzati come variabili separate
  • Traduzione dalle specifiche di design — Alcuni sistemi di design specificano i colori come triplette RGB
  • Lavorare con i selettori di colore — Molte UI di selettori colore usano slider 0-255

Quando Evitare RGB

  • Creare tavolozze di colori coese — Regolare tutti e tre i canali indipendentemente rende difficili le regolazioni coerenti
  • Leggibilità umana — rgb(123, 45, 67) non dà alcun senso immediato del colore che rappresenta

Formato di Colore HSL: Colori Adatti agli Esseri Umani

HSL sta per Tonalità, Saturazione e Luminosità. Questo formato è più intuitivo per gli esseri umani perché separa il colore stesso (tonalità) dalla sua intensità (saturazione) e dalla sua luminosità.

/* Sintassi legacy */
color: hsl(12, 100%, 60%);
color: hsla(12, 100%, 60%, 0.5);

/* Sintassi moderna */
color: hsl(12 100% 60%);
color: hsl(12 100% 60% / 0.5);

Comprendere i Canali HSL

Tonalità (0-360) — L'angolo del colore sulla ruota dei colori. È il componente "che colore è":

| Valore di Tonalità | Colore | |-----------|---------| | 0 o 360 | Rosso | | 30 | Arancione | | 60 | Giallo | | 120 | Verde | | 180 | Ciano | | 240 | Blu | | 300 | Magenta |

Saturazione (0-100%) — Quanto intenso o vivido è il colore. Lo 0% produce una sfumatura di grigio; il 100% è la versione più pura della tonalità.

Luminosità (0-100%) — Quanto chiaro o scuro è il colore. Lo 0% è sempre nero, il 50% è la versione "normale" della tonalità e il 100% è sempre bianco.

Perché HSL è Superiore per i Sistemi di Colori

HSL rende banali i compiti che sono difficili in HEX o RGB:

/* Colore principale del brand */
--brand: hsl(220, 80%, 50%);

/* Stato hover — leggermente più chiaro */
--brand-hover: hsl(220, 80%, 60%);

/* Stato attivo — leggermente più scuro */
--brand-active: hsl(220, 80%, 40%);

/* Stato disabilitato — desaturato */
--brand-disabled: hsl(220, 30%, 70%);

/* Tinta di sfondo — molto chiara */
--brand-bg: hsl(220, 40%, 95%);

Con HSL, ogni variante è un cambiamento di una singola variabile. Questo è impossibile con HEX e macchinoso con RGB.

Quando Usare HSL

  • Creare tavolozze di colori — HSL è lo standard de facto per la generazione di token di design
  • Temi e modalità scura — Scambia i valori di luminosità per creare varianti in modalità scura
  • Stati hover e focus — Regola la luminosità di una percentuale fissa
  • Regolazioni per l'accessibilità — Aumenta il contrasto di luminosità senza cambiare il colore
  • Selettori di colore interattivi — Gli slider HSL sono più intuitivi degli slider RGB

Tabella di Confronto Rapida

| Caratteristica | HEX | RGB | HSL | |---------|-----|-----|-----| | Leggibilità a livello di pixel | Scarsa | Moderata | Buona | | Semantica dei canali | Opaca | Numerica | Percettiva | | Regolazione programmatica | Difficile | Moderata | Facile | | Trasparenza alfa | Hex a 8 cifre | rgb(R G B / A) | hsl(H S% L% / A) | | Supporto browser | Eccellente | Eccellente | Eccellente | | Sintassi moderna | No | Sì | Sì | | Predefinito negli strumenti di design | Sì | Comune | Raro | | Idoneità ai sistemi di colore | Scarsa | Discreta | Eccellente |

Supporto Browser: Tutti e Tre Sono Sicuri

HEX, RGB e HSL godono di un supporto browser identico. Tutti e tre funzionano in ogni browser rilasciato da Internet Explorer 9. La sintassi moderna separata da spazi (rgb(255 0 0 / 0.5)) è supportata in tutti i browser rilasciati dal 2020. Non c'è alcuna ragione di compatibilità per scegliere uno piuttosto che un altro.

Quadro Decisionale Pratico

Scegli il tuo formato in base a ciò che stai facendo:

  1. Stai copiando da un mockup di design? Usa HEX — è ciò che gli strumenti di design generano.
  2. Stai costruendo un sistema di token di design? Usa HSL — rende banale la generazione di tavolozze.
  3. Stai lavorando con canvas o dati immagine? Usa RGB — le API dei pixel usano RGB nativamente.
  4. Stai scrivendo una regola di stile una tantum? Usa HEX — è il più compatto.
  5. Stai creando transizioni di colore dinamiche? Usa HSL — interpolare la tonalità crea effetti arcobaleno; interpolare RGB crea intermedi fangosi.

Converti Tra Qualsiasi Formato

Usa il nostro convertitore di colori online gratuito per convertire istantaneamente tra HEX, RGB, HSL e altri formati di colore CSS. Niente più matematica manuale o esplorazione nei DevTools del browser.