WebToolsWebTools

Scegli il colore

Tutti i formati, il contrasto secondo le linee guida di accessibilità e una palette coerente. Con l'indicazione di quando serve ciascun formato.

54.6%
0.215
263°

Formati

HEX

Tre coppie esadecimali per rosso, verde e blu.

È la notazione più diffusa: compatta, universale, copiabile ovunque.

Quando serve

  • Fogli di stile e file di configurazione
  • Scambio di valori con i tool di design
  • Colori di brand nei documenti

Non dice nulla di leggibile a occhio: da #7a3b9f non si capisce se schiarendo si ottiene ciò che serve.

Contrasto

Su bianco5.17:1

Testo di prova e più grande

  • AA testo
  • AA grande
  • AAA testo
  • Componenti
Su nero4.06:1

Testo di prova e più grande

  • AA testo
  • AA grande
  • AAA testo
  • Componenti
Con il colore scelto5.17:1

Testo di prova e più grande

  • AA testo
  • AA grande
  • AAA testo
  • Componenti

Palette

Scala di chiarezza

Stessa tinta, chiarezza che scende a passi uguali in OKLCH. Il passo con il bordo è quello più vicino al colore scelto.

Complementare

Tinta opposta: massimo stacco, adatta agli accenti e alle chiamate all'azione.

  • #2563eb
  • #906900

Analoghi

Tinte vicine: risultato quieto e coerente, buono per gli sfondi.

  • #007aa7
  • #2563eb
  • #7a49df

Triade

Tre tinte equidistanti: vivace ma equilibrata, con un colore dominante.

  • #2563eb
  • #d10e2e
  • #008908

Complementari divisi

Contrasto del complementare, ma più morbido e meno rischioso.

  • #2563eb
  • #ad5400
  • #727700

Le armonie sono un punto di partenza, non una regola: verifica sempre il contrasto delle combinazioni che userai per il testo.