Skip to content
user@convertitive:~$convertitive

Selettore Colore

Scegli una volta, ottieni tutti i formati. Più una lettura live del contrasto WCAG rispetto al bianco e al nero.

Il selettore qui sotto mostra il colore scelto e ne calcola la rappresentazione in tre formati: hex, rgb() e hsl(). Accanto a ciascun formato, un pulsante per copiare con un solo tocco. Sotto, il rapporto di contrasto WCAG in tempo reale rispetto al bianco puro e al nero puro — utile per verificare le combinazioni di testo e sfondo. Consulta la nostra guida sui formati di colore CSS per sapere quando usare ciascun formato.

rgb(59 130 246)
hsl(217 91% 60%)

WCAG contrast vs:

White: 3.68:1

AA large only

Black: 5.71:1

AA body

How to use

  1. Scegli un colore

    Fai clic sull'anteprima del colore per usare il selettore colore di sistema, oppure digita direttamente un valore hex o RGB.

  2. Copia il formato di cui hai bisogno

    Hex per l'archiviazione e i file di design. rgb() per il codice che elabora i canali. hsl() per le rotazioni di tonalità nei design token.

  3. Controlla il contrasto

    I due badge di contrasto mostrano il rapporto WCAG rispetto al bianco puro e al nero puro. Usali per verificare le combinazioni di colori del testo.

Frequently asked questions

Perché tre formati?
Ciascuno ha un utilizzo specifico. Hex è il formato di archiviazione universale che si copia facilmente in qualsiasi strumento. rgb() è quello che il codice programmatico genera e consuma. hsl() permette a un designer di regolare luminosità o saturazione in modo indipendente — esattamente quello che serve per le varianti dei design token (stati hover, modifiche al tema).
Cosa misura il controllo del contrasto WCAG?
Il rapporto tra la luminanza relativa di due colori, su una scala da 1:1 (identici) a 21:1 (nero su bianco). WCAG 2.1 AA richiede 4,5:1 per il testo body e 3:1 per testo grande e componenti UI. La formula è indicata nel WCAG 2.1 §1.4.3.
Il selettore supporta OKLCH?
Non ancora — hex, RGB e HSL coprono il 95% dei casi d'uso pratici. Per OKLCH e la discussione più ampia sui colori percettivi, consulta la nostra guida sui formati di colore CSS. Puoi anche incollare un valore OKLCH in un preprocessore CSS; i browser moderni convertono internamente.
Perché a volte il hex ha 4 cifre invece di 6?
Il hex a tre o quattro cifre (es. #F60, #F60A) è una forma abbreviata in cui ogni cifra viene raddoppiata. #F60 = #FF6600. La forma a 4 cifre include il canale alfa. La maggior parte del codice moderno utilizza la forma completa a 6/8 cifre per chiarezza; entrambe sono CSS valido.
Il selettore salva la mia cronologia?
No. Tutto viene elaborato nel browser; nulla viene inviato a un server o memorizzato tra le pagine.

Strumenti correlati