Convertitore di colori

Scegli un colore o scrivilo in qualsiasi formato (HEX, RGB, HSL, OKLCH, un nome come «tomato»…) e ottieni subito il suo valore in tutti gli altri, pronto da incollare nel tuo CSS. Regola la trasparenza e verifica se si legge bene su bianco e su nero.

Formati di colore

HEX (#RRGGBB) è il formato più diffuso sul web: tre coppie di cifre esadecimali con la quantità di rosso, verde e blu, da 00 a FF. RGB esprime lo stesso in decimale, da 0 a 255. HSL descrive il colore con la tonalità (0-360°), la saturazione e la luminosità in percentuale, il che rende facile creare varianti più chiare o più scure dello stesso colore.

CMYK (ciano, magenta, giallo e nero) è il modello della stampa. La conversione da RGB è approssimativa: per stampare con precisione serve il profilo colore della tipografia.

Trasparenza, HWB e OKLCH

La trasparenza si indica con un quarto valore, il canale alfa: #FF880080 (HEX a 8 cifre), rgba(255, 136, 0, 0.5) oppure, con la sintassi moderna, rgb(255 136 0 / 50%). 0 è completamente trasparente e 1 (o 100%) completamente opaco.

HWB (tonalità, bianco e nero) e OKLCH (luminosità, croma e tonalità) sono formati di CSS Color 4 supportati da tutti i browser attuali. OKLCH è percettivamente uniforme: due colori con la stessa luminosità appaiono ugualmente chiari, per questo è ideale per creare palette e varianti. HSV/HSB non esiste in CSS, ma è il modello usato da Photoshop, Figma e altri programmi di grafica.

Il CSS definisce anche 148 nomi di colore (tomato, rebeccapurple, steelblue…). Se il tuo colore non ha un nome, ti mostriamo il nome CSS più simile.

Contrasto e accessibilità

Le linee guida di accessibilità WCAG richiedono un contrasto minimo tra testo e sfondo perché possano leggerlo anche le persone ipovedenti: 4,5:1 per il testo normale al livello AA e 7:1 al livello AAA (3:1 e 4,5:1 per il testo grande). Il contrasto va da 1:1 (stesso colore) a 21:1 (nero su bianco).