Utilore

Convertitore di colori

Scrivi un colore in una qualsiasi notazione consueta — #1f5fd6, 1f5fd6, #1f5, rgb(31, 95, 214) — e tutte le altre forme compaiono insieme, con i valori di contrasto che servono per un testo leggibile.

  • #1f5fd6 HEX
  • rgb(31, 95, 214) RGB
  • hsl(219, 75%, 48%) HSL

Contrasto:

Come si usa

  1. Scrivi o incolla il colore, oppure sceglilo con il selettore.
  2. Leggi HEX, RGB e HSL uno accanto all’altro.
  3. Copia la notazione che serve al tuo file.

Da sapere

Tre notazioni per lo stesso colore

L’HEX è compatto e universale nei CSS. L’RGB nomina i canali in chiaro, cosa che conta quando un valore è calcolato invece che scritto a mano. L’HSL descrive tonalità, saturazione e luminosità: è la forma da usare quando vuoi lo stesso colore una sfumatura più chiara, perché cambi un numero invece di indovinarne tre.

Il contrasto non è decorazione

Secondo le WCAG il testo corrente ha bisogno di un rapporto di almeno 4,5:1 rispetto allo sfondo, e il testo grande di almeno 3:1. Le due cifre mostrate qui dicono subito se questo colore può reggere testo bianco, testo nero o nessuno dei due, prima che il progetto arrivi a uno sviluppatore.

Fonti

Domande frequenti

Quali formati vengono accettati?

HEX a tre, quattro, sei e otto cifre, con o senza cancelletto, più rgb() e rgba() con virgole o spazi. L’alfa viene conservato e mostrato nel valore HEX.

Perché a volte l’HSL mostra un colore leggermente diverso?

I valori HSL sono arrotondati a numeri interi per leggibilità, quindi il giro completo può spostarsi di un’unità in un canale. I valori HEX e RGB sono esatti.

Viene inviato qualcosa a un server?

No. Tutto è calcolato nella pagina: i colori di un marchio non ancora presentato restano sulla tua macchina.

Strumenti correlati