Guida alla conversione HEX, RGB, HSL per i team di prodotto

Guida di Conversione tra HEX, RGB, HSL per Team di Prodotto

I designer consegnano codici HEX in Figma. Gli ingegneri scrivono RGB in codice. HSL è quello che desideri effettivamente per la manipolazione programmatica dei colori. Ecco come i tre formati si relazionano e quando utilizzare ciascuno.

I Tre Format

HEX -- #FF5733

Due cifre esadecimali per canale: #RRGGBB. Ogni coppia è 00-FF (0-255 in decimale). Lo standard web dal 1990. Compatta, supportata universalmente, ma opaca alla lettura umana.

RGB -- rgb(255, 87, 51)

Tre valori decimali, 0-255 per canale. Ciò che utilizza CSS rgb(). Leggibile leggermente più di HEX, ma ancora difficile da adattare mentalmente ("rendilo 20% più chiaro" non è ovvio in RGB).

HSL -- hsl(11, 100%, 60%)

Tono (0-360 gradi sulla ruota dei colori), Saturo (0-100%), Luminosità (0-100%). Progettato per gli esseri umani: puoi ragionare direttamente sui rapporti di colore.

Quando Utilizzare Ciascuno

Perché HSL Vincerebbe per i Sistemi di Tema

Con HSL, la manipolazione dei colori è aritmetica:

:root {
  --tono: 11;
  --primario:    hsl(var(--tono), 100%, 60%);
  --primario-chiaro: hsl(var(--tono), 100%, 80%); /* +20% luminosità */
  --primario-oscuro:  hsl(var(--tono), 100%, 40%); /* -20% luminosità */
  --primario-mute: hsl(var(--tono), 40%, 60%);  /* desaturato */
}

Cambia --tono in 210 e il tuo intero palette si sposta da arancione a blu. Prova a farlo con HEX.

Chiarire: aumenta L. 60% → 80% = più chiaro.

Oscuro: diminuisci L. 60% → 40% = più scuro.

Desaturare: diminuisci S. 100% → 40% = più mute.

Colore complementare: aggiungi 180 a H. 11 → 191.

Tabella di Conversione

HEX → RGB: Dividi in coppie, converti esadecimale in decimale.

#FF5733 → R:0xFF=255, G:0x57=87, B:0x33=51 → rgb(255, 87, 51)

RGB → HSL (semplificato):

Non memorizzare le formule. Utilizza il Scegli colore per convertire tra tutti e tre i formati istantaneamente.

CSS Moderno: oklch()

CSS Color Level 4 ha introdotto oklch() -- luminosità percepibile uniforme. A differenza di HSL, i valori L uguali appaiono effettivamente ugualmente luminosi su tutti i toni. Se stai creando un nuovo sistema di design nel 2025+, considera oklch() accanto a HSL.

Relazioni