Convertitore Codici Colore

La conversione dei codici colore consiste nell'esprimere lo stesso colore in diversi sistemi di notazione come HEX, RGB e HSL. Lo schermo crea il colore mescolando i colori primari della luce — rosso, verde e blu — quindi ogni colore si riduce, in definitiva, all'intensità di tre canali RGB. HEX comprime questi valori RGB in una stringa esadecimale di sei cifre (#RRGGBB), mentre HSL li riorganizza nel modo in cui le persone percepiscono il colore, usando un angolo di tonalità, la saturazione e la luminosità.

Perché la conversione è importante

• Scrivere CSS — Prendi il codice HEX da un mockup e convertilo in RGB, che rende più facile regolare l'opacità.
• Regolazione del colore — Quando vuoi solo scurire leggermente un colore, convertirlo in HSL ti permette di regolare solo il valore L.
• Collaborazione — Mantieni allineati l'HEX di Figma del designer, le variabili RGB dello sviluppatore e i riferimenti colore del team di stampa.

Qualunque sia il formato che inserisci, questo convertitore calcola tutti gli altri formati in una volta e mostra il colore reale in un'anteprima.

HEX → RGB divide il numero esadecimale in coppie di due cifre e legge ciascuna come un numero decimale.

R = parseInt(hex[0:2], 16); G e B si calcolano allo stesso modo. Esempio: #FF5733 → FF=255, 57=87, 33=51 → RGB(255, 87, 51).

RGB → HSL normalizza prima ogni canale nell'intervallo 0-1, poi ricava la luminosità.

L = (max + min) / 2
S = delta / (2 − max − min) (quando L > 0,5)
dove delta = max − min. Nell'esempio sopra, max=1 e min=0,2 danno L = 0,6 (60%), S = 0,8/0,8 = 100% e un angolo di tonalità H ≈ 11°, che si converte in HSL(11°, 100%, 60%).