Scegli visivamente o incolla qualsiasi valore — HEX, RGB, HSL, OKLCH e OKLAB restano sincronizzati. Include un controllo del contrasto WCAG 2.2 e un generatore di palette basato su OKLCH. Funziona interamente nel tuo browser.
Scegli visivamente o incolla qualsiasi valore — HEX, RGB, HSL, OKLCH e OKLAB restano sincronizzati. Include un controllo del contrasto WCAG 2.2 e un generatore di palette basato su OKLCH. Funziona interamente nel tuo browser.
Incolla il tuo valore esadecimale (es. #ff5722) nel campo HEX — la riga RGB si aggiornerà all'istante. Allo stesso modo, incolla rgb(255 87 34) nel campo RGB e HEX, HSL, OKLCH e OKLAB si sincronizzeranno tutti. La conversione è bidirezionale tra ogni formato supportato.
OKLCH è uno spazio colore del CSS Color Module Level 4 che usa luminosità percettiva (L), croma (C) e tonalità (h) — come HSL, ma percettivamente uniforme. Due colori OKLCH con lo stesso valore L appaiono ugualmente luminosi, anche con tonalità diverse. Questo rende i design token, le palette generate e le rampe di colore accessibili molto più prevedibili rispetto a HSL. Tutti i browser evergreen (Chrome 111+, Safari 15.4+, Firefox 113+) lo supportano.
I valori dei colori non lasciano mai il tuo dispositivo. Apri DevTools → Network e vedrai zero richieste in uscita durante la conversione, la selezione, la generazione di palette o il controllo del contrasto.
Dai design system agli audit di accessibilità — ogni formato e controllo di cui hai bisogno, in un unico posto.
Conversione bidirezionale tra HEX (3 / 4 / 6 / 8 cifre), RGB(A), HSL(A), OKLCH, OKLAB e colori nominati CSS. Le stringhe di output rispettano la sintassi del CSS Color Module Level 4 — incollale direttamente nei tuoi fogli di stile.
Visualizza il rapporto di contrasto tra due colori qualsiasi con badge pass/fail con un clic per AA (4.5 : 1) e AAA (7 : 1), sia per testo normale che grande. Il calcolo segue il riferimento W3C: linearizzazione sRGB, luminanza relativa, poi (L1+0.05)/(L2+0.05).
Clicca sul contagocce per campionare qualsiasi colore sullo schermo — design, screenshot, foto, persino altre schede del browser. Usa l'API EyeDropper nativa nei browser Chromium.
Genera 9 livelli di tinte e sfumature più armonie complementari, triadiche e analoghe — derivate in OKLCH così che ogni passo sia distanziato in modo percettivamente uniforme (a differenza di HSL, dove la luminosità varia in modo irregolare).
Ogni conversione viene eseguita in JavaScript sul tuo dispositivo. Nulla viene caricato, registrato o inviato a terze parti — apri DevTools → Network se vuoi verificarlo da te.
JavaScript puro, senza runtime di framework. Il caricamento a freddo è inferiore a 50 KB gzippati; le conversioni e la generazione delle palette si completano in meno di un millisecondo su un laptop di cinque anni fa.
Quattro modi per iniziare, ogni formato sincronizzato.
Trascina all'interno del quadrato di saturazione/valore per scegliere la sfumatura, fai scorrere la barra della tonalità sotto per cambiare il colore di base e usa il cursore alpha per la trasparenza. Ogni formato a destra si aggiorna all'istante.
Incolla un HEX (#4f46e5), RGB (rgb(79 70 229)), HSL (hsl(244 76% 59%)), OKLCH (oklch(53% 0.22 277)) o anche un colore nominato CSS (tomato) nell'input corrispondente — il picker e gli altri formati si sincronizzano tutti.
Clicca sul pulsante del contagocce per catturare qualsiasi pixel sullo schermo — un'altra scheda, uno screenshot, una foto, un'icona. Usa l'API EyeDropper nativa su Chrome, Edge e Opera.
Clicca sull'icona di copia accanto a qualsiasi formato per metterlo negli appunti. Oppure scorri fino alla sezione di contrasto WCAG 2.2 per verificare se la combinazione primo piano / sfondo supera AA o AAA per testo normale e grande.
Uno strumento colori che si adatta a quattro flussi di lavoro comuni.
Converti i valori HEX del brand in OKLCH così che ogni sfumatura della tua rampa di token abbia lo stesso passo di luminosità percettiva. Incolla l'output OKLCH direttamente nel tuo CSS — nessun preprocessore necessario.
Inserisci coppie primo piano / sfondo e leggi il rapporto di contrasto più i badge AA / AAA. Individua combinazioni non conformi prima del rilascio — soddisfa le soglie 4.5 : 1 normale / 7 : 1 avanzata previste dal W3C.
Hai un HEX da un mockup di un designer ma ti serve un HSL per una configurazione Tailwind o un OKLCH per un foglio di stile moderno? Incolla una volta, copia in qualsiasi formato. Le stringhe di output rispettano la sintassi del CSS Color Module Level 4.
Scegli un colore di base e visualizza all'istante nove tinte e sfumature distanziate percettivamente più armonie complementari, triadiche e analoghe — generate in OKLCH così che ogni passo appaia ugualmente luminoso.
I valori dei colori non lasciano mai il tuo dispositivo. Apri DevTools → Network e vedrai zero richieste in uscita durante la conversione, la selezione, la generazione di palette o il controllo del contrasto.
Tutorial selezionati per designer, sviluppatori e team di accessibilità.
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
Incolla il tuo valore esadecimale (es. #ff5722) nel campo HEX — la riga RGB si aggiornerà all'istante. Allo stesso modo, incolla rgb(255 87 34) nel campo RGB e HEX, HSL, OKLCH e OKLAB si sincronizzeranno tutti. La conversione è bidirezionale tra ogni formato supportato.
OKLCH è uno spazio colore del CSS Color Module Level 4 che usa luminosità percettiva (L), croma (C) e tonalità (h) — come HSL, ma percettivamente uniforme. Due colori OKLCH con lo stesso valore L appaiono ugualmente luminosi, anche con tonalità diverse. Questo rende i design token, le palette generate e le rampe di colore accessibili molto più prevedibili rispetto a HSL. Tutti i browser evergreen (Chrome 111+, Safari 15.4+, Firefox 113+) lo supportano.
Sì. Usiamo l'algoritmo di WCAG 2.2 §1.4.3: linearizza ogni canale sRGB, calcola la luminanza relativa (0.2126·R + 0.7152·G + 0.0722·B), poi (L_lighter + 0.05) / (L_darker + 0.05). AA passa a 4.5 : 1 per il testo normale e 3 : 1 per il testo grande (18 pt+ o 14 pt+ in grassetto). AAA passa rispettivamente a 7 : 1 e 4.5 : 1.
Sì — clicca sul pulsante Contagocce per avviare l'API EyeDropper integrata nel browser. Puoi campionare qualsiasi pixel ovunque sullo schermo: un'altra scheda del browser, un design Figma, un fotogramma video, persino uno screenshot. Attualmente supportato su Chrome, Edge e Opera; Firefox e Safari hanno un fallback (il pulsante è disabilitato).
No. Il picker, ogni conversione, il generatore di palette e il controllo del contrasto vengono eseguiti tutti nel tuo browser. Nessun valore di colore, campione di immagine o testo viene mai trasmesso. Puoi aprire DevTools → Network e verificare che non ci siano richieste in uscita durante l'uso.