Convertitore da hex a RGB / HSL / OKLCH

Riferimento dei formati

• Hex (#RRGGBB) — sei cifre esadecimali, due ciascuna per rosso, verde e blu. Il più comune in CSS e negli strumenti di design. La forma abbreviata opzionale a 3 cifre (#RGB) raddoppia ogni cifra.
• RGB (0–255) — tre interi da 0 a 255 che rappresentano l'intensità di rosso, verde e blu. Stesso spazio di colore di hex, solo decimale invece di esadecimale.
• HSL (Tonalità, Saturazione, Luminosità) — rappresentazione RGB cilindrica. La tonalità è un angolo da 0° a 360° intorno alla ruota dei colori; la saturazione è 0–100% (grigio a vivido); la luminosità è 0–100% (nero a bianco). Più facile di RGB per scegliere colori correlati, ma non percettivamente uniforme — valori uguali di L possono apparire molto diversi in luminosità.
• OKLCH (Luminosità, Croma, Tonalità) — spazio di colore percettivamente uniforme moderno progettato da Björn Ottosson (2020). L (0–100%) traccia la luminosità percepita, così valori uguali di L appaiono ugualmente luminosi; C è il croma (saturazione, illimitato ma tipicamente 0–0,4 per sRGB in gamut); H è la tonalità in gradi. Usato in CSS Color Module 4 e internamente da Tailwind v4 per la manipolazione del colore.

Perché OKLCH è importante

Per attività come generare una palette di colori equidistanti o costruire una scala tonale (luminosità 10, 20, 30, …), HSL fallisce in modo sottile: un giallo al 50% di luminosità appare molto più luminoso di un blu al 50% perché il modello RGB-cilindrico sottostante non tiene conto della sensibilità dell'occhio umano. OKLCH risolve questo — valori uguali di L producono colori ugualmente luminosi su tutte le tonalità, quindi palette e scale tonali si comportano come ti aspetteresti intuitivamente.