Converti tra HEX, RGB, HSL, OKLCH, Lab in modo bidirezionale, genera palette perceptually uniform via OKLCH e verifica il contrast ratio rispetto allo standard WCAG 2.1 AA/AAA. Pensato per chi disegna interfacce e si prende cura dell'accessibilità: la combinazione OKLCH per la coerenza percettiva e WCAG per l'accessibilità reale produce palette robuste alla prima passata.
Questo paragrafo usa il colore selezionato come sfondo e il foreground scelto. Verifica che il testo sia leggibile a colpo d'occhio.
Click sul native color picker per aprire il selettore del sistema operativo, oppure incolla un valore in qualsiasi campo (HEX, RGB, HSL, OKLCH, Lab). I cinque campi sono bidirezionali: cambiando uno, gli altri quattro si aggiornano.
La sezione contrast checker mostra il ratio del colore contro fondo bianco o nero, e il PASS/FAIL per i quattro livelli WCAG 2.1: testo normale AA (4.5:1), testo normale AAA (7:1), testo grande AA (3:1), testo grande AAA (4.5:1).
La palette OKLCH genera 9 stop di luminance del colore base mantenendo C (chroma) e H (hue) costanti. Risultato: un set di shade armoniche perceptually uniform, utili per design system. Click su una swatch per impostare il colore principale a quello.
Click sul bottone copy a destra di ogni campo per portare il valore CSS-ready negli appunti. I formati emessi sono compatibili con CSS Color Module Level 4 (oklch(), lab() supportati da tutti i browser moderni dal 2023).
OKLCH first-class. OKLCH (Oklab Lightness Chroma Hue) è lo spazio colore perceptually uniform definito da Bjørn Ottosson nel 2020 e standardizzato in CSS Color Level 4. Significa che differenze numeriche di L (lightness) corrispondono a differenze di luminosità percepita uniformi dall'occhio umano. Confronto pratico: due colori HSL con stessa S e L ma H diversi possono apparire molto diversi in luminosità (un giallo HSL chiaro accanto a un blu HSL con la stessa L viene percepito come molto più chiaro). In OKLCH, due colori con stesso L appaiono ugualmente luminosi indipendentemente dal hue. Questo rende OKLCH lo strumento ideale per generare palette accessibili: bastano stesso C e H più variazioni di L per ottenere shade coerenti fra loro.
WCAG 2.1 contrast checker integrato. Le linee guida WCAG 2.1 per accessibilità richiedono ratio minimo 4.5:1 per testo normale (AA) e 7:1 per AAA. Il calcolo segue la formula ufficiale: luminanza relativa di sRGB linearizzato, ratio (L1+0.05)/(L2+0.05) con L1 più chiaro, costanti standard (0.2126/0.7152/0.0722). Test automatico contro nero (#000) e bianco (#FFF) come foreground. Per palette aziendali, gli stop OKLCH passano spesso il check al primo colpo proprio grazie alla distribuzione perceptually uniform.
Output canonical CSS Level 4. Tutte le conversioni sono formule matematiche chiuse standard (matrici sRGB-XYZ, CIE 1976, Ottosson 2020) eseguite localmente nel browser. L'output è già nel formato canonical accettato dai parser CSS moderni: oklch(50.86% 0.1545 245.8), lab(40.13 -8.86 -49.05), da incollare direttamente nei fogli di stile.
OKLCH ha tre proprietà uniche che HSL e Lab CIE non condividono.
1. Perceptually uniform per costruzione. Bjorn Ottosson ha derivato la matrice di trasformazione minimizzando l'errore di percezione contro il dataset COMBVD (Color Matching Based on Visual Demographic). Risultato: OK_lab (e quindi OKLCH) è significativamente più accurato di Lab CIE 1976 in zone problematiche (blu, magenta).
2. Hue stability sotto variazioni di L. Cambiare la lightness di un colore in OKLCH preserva il hue percepito. In HSL, abbassare L di un blu lo fa virare verso il viola. In OKLCH, lo stesso blu resta blu fino al nero. Test pratico: prendi un colore primary, riducine L a step di 10%, vedi se mantiene la sua identità cromatica. Con OKLCH, si.
3. Wide gamut compatibility. CSS Color Level 4 (già supportato da Chrome 111+, Safari 15.4+, Firefox 113+) accetta OKLCH come input nativo. Quando il browser gira su display P3 (iPhone, Mac, MacBook recenti), OKLCH può rappresentare colori fuori dal gamut sRGB tradizionale. La conversione in sRGB clipping è graceful: il browser sceglie il colore P3 più vicino se disponibile, altrimenti il più vicino sRGB.
Per design system aziendali la migrazione vale la pena: una palette OKLCH-based passa contrast checker più facilmente, ha shade armoniche, e sopravvive a future espansioni del gamut display.
Termini tecnici usati in questa pagina, spiegati in due righe.
#0065c0, 0065c0, rgb(0, 101, 192), 0 101 192, hsl(207, 100%, 38%), oklch(50.86% 0.1545 245.8), lab(40.13 -8.86 -49.05) sono tutti riconosciuti. Le virgole, le percentuali, gli spazi sono opzionali nei separatori.color_picker-gui.js di questo tool è una source-of-truth riusabile. In Python: colour-science. In Node: color-js.Maurizio Fonte, consulente IT senior con oltre 20 anni di esperienza in PHP, Laravel, infrastrutture Linux, cybersecurity e integrazione AI/LLM in azienda. Backend di produzione, modernizzazione di codice legacy, audit di sicurezza, agenti AI e MCP server custom: il lavoro che sta dietro a questi strumenti.
Conosci Maurizio Fonte