Come usare
- Inserisci i dati
Inserisci i valori richiesti nei campi di input.
- Regola le impostazioni
Seleziona le opzioni e impostazioni appropriate.
- Visualizza risultati
Clicca Calcola per ottenere i risultati istantaneamente.
Cos'è la conversione dei 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.
Formula di conversione
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) / 2S = 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%).