Siirry pääsisältöönSiirry sivunavigaatioon

Värit

Suomi.fi-väriteeman pääväreihin kuuluu sininen (brandBase ja highlightBase), valkoinen (whiteBase) ja harmaa (depthBase). Tekstien päävärinä käytetään mustaa (blackBase). Korosteväreinä käytetään oranssia (accentBase) ja harmaan eri sävyjä. Yleisilme on vaalean neutraali, ja väriä käytetään harkiten korostamaan keskeisiä toimintoja ja sisältöjä.

Saavutettavuus ja käytettävyys

  • Kun käytät komponenttien tarjoamaa valmista Suomi.fi-väriteemaa käyttöohjeistuksien mukaisesti, täyttyvät saavutettavuuskriteeristön (WCAG) kontrastivaatimukset ja väriyhdistelmät ovat saavutettavuudeltaan riittäviä.
  • Jos haluat muokata värejä sopimaan erilaiseen visuaaliseen ilmeeseen, muista varmistaa, että valitsemasi väriyhdistelmien kontrastit täyttävät saavutettavuuskriteeristön (WCAG) asettamat vaatimukset.
  • Huomioi, että saavutettavuuskriteeristön (WCAG) kontrastivaatimukset eivät koske komponentteja, joiden käyttö on estetty. On kuitenkin tärkeää varmistaa, että estetty sävy eroaa kontrastiltaan tarpeeksi aktiivisen tilan väristä.
  • Tutustu näihin kohtiin tarkemmin saavutettavuuskriteeristön ohjeistuksessa: WCAG 2.1., onnistumiskriteeri 1.4.3 Kontrasti (minimi).

Brändiväri

Brändiväriä (brandBase) käytetään Suomi.fi-palveluiden logossa, alatunnisteessa sekä palveluiden yläreunan värillisessä palkissa.

hsl(214, 100%, 24%)
#003479
brandBase

Tekstit

Tekstien pääväri on musta (blackBase). Mustaa käytetään myös joidenkin komponenttien yhteydessä olevissa ohjeteksteissä. Estetyissä (disabled) teksteissä käytetään vaalean harmaata (depthBase). Paikanvaraajanteksteissä käytetään tummanharmaata (depthDark2).

hsl(0, 0%, 13%)
#212121
blackBase
hsl(202, 7%, 67%)
#a5acb1
depthBase
hsl(201, 7%, 46%)
#6d787e
depthDark2

Linkit, painikkeet ja valinnat

Sinistä (highlightBase) sekä siitä johdettuja vaalempia sävyä (highlightLight) käytetään interaktiivisissa elementeissä ja valittujen elementtien korostamisessa. Violettia (accentTertiaryDark1) käytetään linkkien vierailun jälkeisessä tilassa (visited state). Estetyissä tiloissa käytetään harmaata (depthBase). Sinisestä johdettua tummempaa sävyä (highlightDark1) käytetään esimerkiksi painikkeiden hovertilassa (hover state). Sinistä korostusväriä (accentSecondary) käytetään kaikkien komponenttien fokustilassa (focus state).

hsl(212, 63%, 45%)
#2a6ebb
highlightBase
hsl(212, 63%, 49%)
#2e78cc
highlightLight1
hsl(212, 63%, 90%)
#d5e4f6
highlightLight2
hsl(212, 63%, 95%)
#eaf2fa
highlightLight3
hsl(212, 63%, 37%)
#235a9a
highlightDark1
hsl(202, 7%, 67%)
#a5acb1
depthBase
hsl(196, 77%, 44%)
#1a99c7
accentSecondary
hsl(284, 36%, 45%)
#86499c
accentTertiaryDark1

Ikonit

Kuvitusikoneissa käytetään harmaata (depthBase) sekä oranssia (accentBase) korostevärinä. Toiminnallisissa ikoneissa käytetään toiminnallisten elementtien sinistä (highlightBase) väriä sekä tummaa harmaata (depthDark1).

hsl(202, 7%, 67%)
#a5acb1
depthBase
hsl(23, 82%, 50%)
#e86717
accentBase
hsl(212, 63%, 45%)
#2a6ebb
highlightBase
hsl(202, 7%, 40%)
#5f686d
depthDark1

Taustat ja reunukset

Sivun taustaväri on vaalean harmaa (depthLight3) ja sisältöalueen tausta on valkea (whiteBase). Reunuksien väri on harmaa (depthLight1). Lisäksi käytössä on sinisestä (highlightBase) väristä johdettuja sävyjä (highlightLight4, highlightLight3 ja highlightLight2) sekä haalea vaaleansininen (depthSecondary).

hsl(0, 0%, 100%)
#fff
whiteBase
hsl(202, 7%, 97%)
#f7f7f8
depthLight3
hsl(202, 7%, 80%)
#c8cdd0
depthLight1
hsl(212, 63%, 90%)
#d5e4f6
highlightLight2
hsl(212, 63%, 95%)
#eaf2fa
highlightLight3
hsl(212, 63%, 98%)
#f7fafd
highlightLight4
hsl(215, 100%, 97%)
#f0f6ff
depthSecondary

Liikennevalovärit

Liikennevalovärit kuvaavat komponenttien, elementtien tai toimintojen tilatietoa. Vihreä (successBase) kuvaa onnistumista tai positiivista toimintoa. Keltainen (warningBase) kuvaa esim. tehtävää tai muuta asiaa, johon käyttäjän tulee reagoida. Punainen (alertBase) kuvaa virhetilaa tai häiriötä. Pelkkä väri ei riitä tiedon tai toiminnallisuuksien esittämiseen vaan tieto pitää esittää myös sanallisesti.

hsl(166, 90%, 34%)
#09a580
successBase
hsl(166, 54%, 80%)
#b0e8db
successSecondary
hsl(42, 93%, 50%)
#f6af09
warningBase
hsl(3, 59%, 43%)
#ae332d
alertBase
hsl(0, 59%, 96%)
#fbefef
alertLight1

Korostevärit

Korostevärejä käytetään tilanteissa, joissa väriä tarvitaan luomaan eroavaisuutta muista elementeistä.

hsl(23, 82%, 50%)
#e86717
accentBase
hsl(196, 77%, 44%)
#1a99c7
accentSecondary
hsl(196, 77%, 97%)
#f1fafd
accentSecondaryLight1
hsl(284, 36%, 53%)
#9b5cb2
accentTertiary