Mitä brändin väripalettiin kuuluu?

Brändin väripaletti antaa jokaiselle värille oman tehtävän. Pääväri jää mieleen, ja sitä käytetään logossa ja tärkeimmissä painikkeissa. Toissijainen väri tukee sitä, korostusväri saa toimintakehotteet erottumaan, ja tausta- sekä tekstiväri sitovat sivun yhteen.

Kontrasti on yhtä tärkeä kuin väritaju. Verkkosisällön saavutettavuusohjeet (WCAG) edellyttävät normaalikokoisen tekstin ja sen taustan välille vähintään suhdetta 4.5:1 tai tiukimmalla AAA-tasolla 7:1.

Työkalun kuvaus

Kuvaile brändiäsi kohdassa Tietoja brändistäsi: mitä se tekee, kenelle se on tarkoitettu ja millaisen vaikutelman sen tulisi antaa. Valitse brändin persoonallisuus (Ammattimainen, Leikkisä, Ylellinen, Minimalistinen, Rohkea tai Luonnonläheinen) tai jätä valinnaksi Vastaa kuvausta, jolloin tekoäly päättelee persoonallisuuden tekstistäsi.

Saat viisi nimettyä väriä: Pääväri, Toissijainen väri, Korostusväri, Taustaväri ja Tekstiväri. Tulostusmuodon valinta vaihtaa niiden arvot HEX-, RGB-, HSL-, CMYK- ja muihin muotoihin, ja jokaisella värillä on oma kopiointipainike. Käyttöopas kertoo, miten kutakin väriä käytetään, ja CSS-muuttujat-osio antaa tyylitiedostoon liitettävän koodilohkon. Tekoälyä pyydetään varmistamaan, että tekstin ja taustan välinen kontrastisuhde on vähintään 7:1 ja pää- sekä korostusvärien kontrastisuhde vähintään 3:1.

Esimerkki

Kuvauksesta ”Portlandilainen lähikahvipaahtimo. Lämmin, kutsuva ja vastuullinen” voisi syntyä paahdetun ruskea pääväri, kermanvärinen tausta ja terrakotanvärinen korostusväri sekä esimerkiksi tällaiset CSS-muuttujat:

:root {
  --brand-primary: #5b3a29;
  --brand-secondary: #a47551;
  --brand-accent: #d9643a;
  --brand-background: #faf6f0;
  --brand-text: #2b211c;
}

Ominaisuudet

  • Viisi väriä, joista jokaisella on selkeä tehtävä, nimi ja käyttöohje
  • Kuusi persoonallisuutta tai kuvauksesi perusteella valittu persoonallisuus
  • Kopioi värit tarvitsemassasi muodossa tai koko väripaletti CSS-muuttujina

Rajoitukset

Työkalu ei mittaa kontrastia itse, joten tarkista tekstin ja taustan väriyhdistelmä kontrastintarkistimella ennen julkaisua.