Convertitore di colori
Converti qualsiasi colore tra HEX, RGB, HSL e HSV. Usa il selettore o scrivi in qualsiasi campo — gli altri si aggiornano in tempo reale. Con verifica del contrasto WCAG per coppie accessibili.
Utile per portare i colori di un design system, scegliere coppie testo/sfondo accessibili e allineare i valori tra strumenti.
Verifica del contrasto WCAG
Pick a foreground and background color to check whether they meet the accessibility minimums from WCAG 2.1.
Normal text at 16 px — the quick brown fox jumps over the lazy dog.
Large text at 24 px — quick brown fox.
Soglie WCAG
- AA — normal text: contrast ratio ≥
4.5:1. - AA — large text (18 pt or 14 pt bold): ≥
3:1. - AAA — normal text: ≥
7:1. - AAA — large text: ≥
4.5:1. - UI components and graphical objects: ≥
3:1against adjacent colors.
Il rapporto è calcolato dalla luminanza relativa secondo WCAG 2.1, usando i canali sRGB linearizzati e i pesi 0.2126·R + 0.7152·G + 0.0722·B.
Note sui formati
- HEX accepts
#rgb,#rgba,#rrggbband#rrggbbaaforms. The leading#is optional in the input. - RGB input accepts
rgb(r, g, b),rgba(r, g, b, a)and bare comma- or space-separated triplets like59, 130, 246. - HSL: hue is 0–360°, saturation and lightness are percentages.
hsl(217 91% 60%)(CSS Color 4) is accepted alongside the legacy comma form. - HSV (also called HSB) is not in CSS — it's shown here because it's useful in design tools. The display form is
hsv(h, s%, v%).
FAQ
Perché HSL e HSV non coincidono esattamente con i valori di Photoshop / Figma?
Arrotondamento. Hue, saturation e lightness sono continui; gli strumenti li arrotondano in modo diverso. Una differenza di 1° in hue o 1% in saturation è attesa e visivamente identica.
Il verificatore di contrasto considera l'alfa (trasparenza)?
No. I rapporti WCAG presuppongono colori completamente opachi. Se hai un primo piano semitrasparente, mescolalo prima con lo sfondo e verifica il colore opaco risultante.
E APCA, il nuovo algoritmo di contrasto?
APCA è candidato a sostituire il rapporto WCAG 2.x in WCAG 3.0 (ancora in bozza). Per il lavoro in produzione oggi, il rapporto WCAG 2.1 è ciò che controllano auditor e Lighthouse.
Viene inviato qualcosa a un server?
No. Tutta la conversione e la matematica del contrasto girano nel tuo browser.