Design e immagini · Palette e contrasto

Colori del brand, leggibili ovunque.

Dai tuoi colori generiamo scale complete da 50 a 950 e verifichiamo il contrasto secondo le linee guida WCAG, con i codici pronti per sito e sviluppatori.

Tutti gli strumenti

Colori del brand Colori d’esempio

Verifica contrasto

Testo su sfondo

Titolo di esempio

Il testo deve restare leggibile anche su smartphone, al sole o per chi vede meno bene.

PulsanteTesto piccolo · note e didascalie
5,13:1 Buono · AA
Testo normale AASupera
Testo grande AASupera
Testo normale AAANon supera
Testo grande AAASupera
Icone e bordi (UI)Supera

Clicca un colore delle scale qui sotto per usarlo come sfondo; con Alt/Option+clic lo imposti come testo.

Scale generate · OKLCH

La tua palette

primariobase 600
secondariobase 300
neutroauto

Il bordo evidenzia il tuo colore originale. In ogni riquadro: il testo più leggibile (bianco o scuro) e il suo rapporto di contrasto.

Per sviluppatori

Esporta i token

:root {
  --primario-50: #EFF9F6;
  --primario-100: #DAF1EA;
  --primario-200: #B8E2D5;
  --primario-300: #8CCDBA;
  --primario-400: #60B49D;
  --primario-500: #399982;
  --primario-600: #0E7C66;
  --primario-700: #00614F;
  --primario-800: #00493A;
  --primario-900: #003127;
  --primario-950: #001E17;

  --secondario-50: #FFF5EB;
  --secondario-100: #FDE7CF;
  --secondario-200: #F7D0A4;
  --secondario-300: #F2A541;
  --secondario-400: #D69136;
  --secondario-500: #B97500;
  --secondario-600: #965D00;
  --secondario-700: #744700;
  --secondario-800: #573400;
  --secondario-900: #3C2200;
  --secondario-950: #261300;

  --neutro-50: #EFFAF6;
  --neutro-100: #E3EEEA;
  --neutro-200: #CBDCD6;
  --neutro-300: #B1C2BD;
  --neutro-400: #95A6A0;
  --neutro-500: #7A8A85;
  --neutro-600: #60706B;
  --neutro-700: #485652;
  --neutro-800: #32413C;
  --neutro-900: #1F2C28;
  --neutro-950: #0E1B18;
}

Tutto resta nel tuo browser: i dati che inserisci non vengono inviati a nessun server.