HEX, RGB e HSL sempre sincronizzati, con controllo del contrasto secondo le regole WCAG.
Scrivi un valore in qualsiasi notazione: gli altri si aggiornano da soli.
Le WCAG 2.1 fissano un rapporto minimo perché il testo sia leggibile.
| Sfondo | Contrasto | Esito |
|---|---|---|
| Testo bianco | — | — |
| Testo nero | — | — |
Da chiaro a scuro, per trovare la variante giusta. Clicca per adottarla.
Sono tre modi di scrivere lo stesso colore e servono a scopi diversi. Il HEX è una notazione in esadecimale tipo #6C63FF: è quella usata dal CSS e dai programmi di grafica, perché è compatta e standardizzata. L'RGB indica i tre canali di luce da 0 a 255 ed è il modello fisico con cui funziona uno schermo. L'HSL indica invece tonalità, saturazione e luminosità: hsl(243, 100%, 69%). HSL è molto più comodo di RGB per chi progetta, perché per ottenere una versione più scura o più chiara si cambia un solo numero invece di tre, e le sfumature risultano visivamente regolari. Quando aggiungi opacità usi il canale alpha in ciascuna notazione: #6C63FFCC, rgba(108,99,255,.8), hsl(243,100%,69%/.8).
Il contrasto è la differenza di luminosità tra testo e sfondo, e decide se il testo è leggibile. Le WCAG (le linee guida di accessibilità del web) fissano due soglie: 4,5:1 per il testo normale e 3:1 per i caratteri grandi da 18px in su, entrambe di livello AA. Il livello AAA ne richiede 7:1. Un contrasto insufficiente non è solo un problema per chi ha difficoltà di vista: riduce la comprensione anche per le persone vedenti, soprattutto su display portatili e in piena luce. Questo strumento calcola il rapporto esatto del colore che hai scelto, dice se supera le soglie e ti indica quale colore di testo usare.
In quasi ogni situazione in cui devi creare una palette. Se il colore di base è hsl(243, 100%, 69%), le varianti si ottengono muovendo un solo valore: al 40% di luminosità hai la versione scura per gli hover, al 90% quella chiara per gli sfondi, e al 30% di saturazione la versione disattivata. Con RGB, ottenere la stessa chiarezza richiederebbe riportare i tre canali in proporzione, un'operazione che nessuno fa a mano. Per questo i moderni sistemi di design lavorano quasi esclusivamente in HSL.
Sì: gratuito, senza registrazione, tutto nel browser. Nessun dato viene inviato a un server. Il tool genera automaticamente una palette di 9 tonalità e un colore casuale, utile per esplorare alternative o costruire l'identità di una landing page.