Verkkosivuilla jokaisella värillä on tehtävä: tausta, teksti, painikkeet, linkit ja ilmoitukset. Nämä 12 palettia on rakennettu sitä varten. Niissä on vaalea tai tumma tausta, luettava tekstiväri ja korostusväri painikkeille. Kopioi HEX-koodit suoraan CSS:ään tai sivustotyökaluusi.
Puhdas SaaS-sininen
Lähes valkoinen tausta, hyvin tummansininen teksti ja kirkkaansiniset painikkeet.
Hillitty yritys
Asianajotoimistoille, konsulttiyrityksille tai teollisuusyrityksille.
Lämmin verkkokauppa
Oranssi saa ostopainikkeet loistamaan lämpimällä taustalla.
Tumma tila ja vihreä
Kerroksellisia tummia taustoja, vaalea teksti ja vihreä korostus toiminnoille.
Luonnollinen ja ekologinen
Luontaistuotekaupoille, tiloille tai hyvinvointibrändeille.
Ystävällinen pastelli
Helposti lähestyttävä; tumma siniharmaa pitää tekstin luettavana.
Toimituksellinen punainen
Blogeille, lehdille ja medialle; punainen korostaa linkit ja otsikot.
Teknologian violetti
Yleinen digitaalisissa tuotteissa, verkkokursseissa ja tekoälytyökaluissa.
Turkoosi ja koralli
Kaksi vastaväriä: toinen painikkeille, toinen ilmoituksille.
Tumma ylellisyys
Hotelleille, ravintoloille tai premium-brändeille, joissa kuvat ovat pääosassa.
Terveys ja hyvinvointi
Puhdas ja rauhallinen; hyvä klinikoille ja terapiavastaanotoille.
Hiekka ja sinivihreä
Lämmin mutta asiallinen; matkailuun, kiinteistöihin tai kahviloille.
Napauta väriä, niin HEX-koodi kopioituu. Kynäkuvake avaa paletin editorissa, jossa voit muokata sitä.
Käytä 60-30-10-sääntöä
Käytä hallitsevaa väriä (yleensä taustaa) noin 60 %:ssa sivusta, toissijaista väriä 30 %:ssa (osiot, kortit, ylätunniste) ja korostusväriä loput 10 %. Säästä korostusväri painikkeisiin ja linkkeihin, jotta kävijät tietävät, mihin klikata.
Tarkista tekstin kontrasti
Saavutettavuusohjeet WCAG edellyttävät tavalliselle tekstille vähintään kontrastia 4,5:1. Vaaleanharmaa valkoisella näyttää tyylikkäältä, mutta sitä on vaikea lukea, etenkin puhelimella auringossa. Tee kontrastitarkistus ennen julkaisua.
Päätä tilojen ja ilmoitusten värit
Brändin paletin lisäksi verkkosivut tarvitsevat värit virheille (punainen), onnistumisille (vihreä) ja varoituksille (keltainen tai oranssi). Valitse palettiisi sopivat versiot ja käytä niitä johdonmukaisesti lomakkeissa ja viesteissä.