Siirry sisältöön
Kela Design System KDS

16.0.0

Värit ja tyylit

Valmiit väripaletit ja yhteiset tyylit tiedon visualisointiin Kelan ja Kannan käyttöliittymissä.

Tällä sivulle kootut väripaletit ja valmiiksi määritetyt tyylit on tarkoitettu esimerkiksi interaktiivisiin visualisointeihin ja erilaisiin datasovelluksiin.

Visualisoinnin ulkoasu rakentuu aina tiedon ehdoilla.

Värit visualisoinneissa

Visualisoinneissa käytettävät perusvärit perustuvat Kela Design Systemin väripaletteihin. Tapauskohtaisesti visualisoinneissa voi hyödyntää myös muita Kelan ja Kannan verkkoilmeen mukaisia värejä.

kanta-gray
10
20
30
40
50
60
70
80
90
100
kanta-blue
10
20
30
40
50
60
70
80
90
100
kanta-green
10
20
30
40
50
60
70
80
90
100
kanta-lilac
10
20
30
40
50
60
70
80
90
100
kanta-magenta
10
20
30
40
50
60
70
80
90
100
kela-gray
10
20
30
40
50
60
70
80
90
100
kela-blue
10
20
30
40
50
60
70
80
90
100
kela-green
10
20
30
40
50
60
70
80
90
100
kela-purple
10
20
30
40
50
60
70
80
90
100
kela-red
10
20
30
40
50
60
70
80
90
100

Valmiit väripaletit

Paletteihin koottuja sävyjä voi käyttää tilanne- ja aihekohtaisesti.

Valmiiksi koottuja sävypaletteja on suositeltavaa soveltaa siten, että paletista poimitut sävyt tukevat

  • tiedon luonnetta (esim. punainen – negatiivinen, sininen – positiivinen)
  • visualisoinnin sisältämää tietoa (tumma sävy – paljon, vaalea sävy – vähän) ja
  • valittua kuviotyyppiä.

Kategoriapaletit

Kategoriapaletit vaaleassa teemassa

Kategoriapaletti 1 (kanta-light)
50
70
90
50
70
90
60
80
50
black
Kategoriapaletti 2 (kanta-light)
50
70
90
50
70
90
60
80
50
black
Kategoriapaletti 1 (kela-light)
50
70
90
50
70
90
60
80
50
black
Kategoriapaletti 2 (kela-light)
50
70
90
50
70
90
60
80
50
black

Kategoriapaletteihin on koottu KDS-värikarttaan perustuvia sävyjä, jotka soveltuvat esimerkiksi kategorioiden tai muun laadullisen tiedon luokitteluun.

Jos kuvion sarjoja on enemmän kuin paletin sävyjä, asian esittämiseen kannattaa yleensä

  • käyttää eri kuviotyyppiä tai
  • esittää sarjat yksittäin (esim. toistokuviossa).

Interaktiivisissa toteutuksissa sarjojen näyttäminen voi perustua väreillä erottelun sijaan myös esimerkiksi valikkoon, suodatustyökaluun tai välilehtimäiseen rakenteeseen.

Hajaantuvat paletit

Hajaantuvat sävypaletit soveltuvat parhaiten visualisointeihin, joissa tietoa vertaillaan portaittain etenevällä kaksisuuntaisella asteikolla.

Huomaa, että skaalan kaikki sävyt (esim. blue-30, jos taustaväri on valkoinen) eivät välttämättä muodosta kontrastiltaan saavutettavaa lopputulosta.

Yleensä skaaloja voi kuitenkin soveltaa saavutettavasti esim.

  • välttämällä skaalan vaaleimpien sävyjen (esim. blue-30) käyttöä, jos taustaväri on valkoinen tai
  • käyttämällä tarvittaessa esim. samasta väristä johdettua hieman tummempaa reunaviivaa.

Vastakohtaiset muuttujat

Vastakohtaisten muuttujien paletti vaaleassa teemassa

Paletti vastakohtaisille muuttujille (kanta-light)
90
70
50
30
white
30
50
70
90
Paletti vastakohtaisille muuttujille (kela-light)
90
70
50
30
white
30
50
70
90

Palettiin koottuja sävyjä voi käyttää visualisoinneissa, joissa esitetään portaittain eteneviä vastakohtaisia arvoja.

Sinisen ja punaisen värin eri tummuusasteista koostuva skaala soveltuu etenkin vastakohtaisten muuttujien määrälliseen luokitteluun:

  • positiivinen – negatiivinen
  • tyytyväinen – tyytymätön
  • kylmä – lämmin

Vastakkaisia sävyskaaloja erottava neutraali sävy kuvaa yleensä 0-kohtaa tai keskiarvoa.

Neutraalit muuttujat

Neutraalien muuttujien paletti vaaleassa teemassa

Paletti neutraaleille muuttujille (kanta-light)
90
70
50
30
white
30
50
70
90
Paletti neutraaleille muuttujille (kela-light)
90
70
50
30
white
30
50
70
90

Palettia voi käyttää visualisoinneissa, jossa vastakkaisilla skaaloilla vertaillaan ”neutraaleihin” ja ei-vastakohtaisiin muuttujiin perustuvia arvoja.

Sävyt soveltuvat määrälliseen luokitteluun etenkin silloin, kun muuttujat eivät ole sinällään positiivisia tai negatiivisia, esim.

  • miesten osuus – naisten osuus tai
  • työssäkäyvien määrä – eläkkeellä olevien määrä
  • suomenkieliset – ruotsinkieliset

Skaaloja erottava valkoinen sävy kuvaa tällöin tasatilannetta, jossa molempien muuttujien osuus on sama.

Likert-asteikko

Paletti Likert-asteikolle vaaleassa teemassa

Likert-paletti (kanta-light)
70
50
50
50
70
Likert-paletti (kela-light)
70
50
50
50
70

Likert-asteikkoa käytetään tyypillisesti kyselytulosten laadulliseen luokitteluun.

Asteikossa sinisen sävyt kuvaavat positiivisia luokkia ja punaiset negatiivisia. Harmaalla kuvataan tyypillisesti ”En osaa sanoa”-vaihtoehtoa.

Huomaa, että Likert-asteikon sävyjen järjestys ja logiikka on sama väriteemasta riippumatta. Esimerkiksi ”Täysin samaa mieltä” -vastauksia kuvaava tumma sininen (vaaleassa teemassa blue-70) ei siten korvaudu tummassa teemassa ns. käänteisellä vaalealla sävyllä.

Sarjallinen paletti

Paletti sarjalliselle asteikolle vaaleassa teemassa

Sarjallinen paletti (kanta-light)
30
50
70
90
Sarjallinen paletti (kela-light)
30
50
70
90

Saman värin tummuusasteiden mukaisesti etenevä sarjallinen paletti soveltuu määrällisen tiedon luokitteluun.

KDS tarjoaa valmiina tyyleinä sinisestä väristä johdetun sarjallisen paletin.

Sävyjä voi käyttää esimerkiksi alueluokituskartoissa tai ryhmitellyssä pystypylväskuviossa, jossa ryhmän muodostavat pylväät on järjestetty esimerkiksi vuosilukujen mukaiseen järjestykseen.

Pienimpiä arvoja kuvaava luokka esitetään vaaleimmalla sävyllä ja suurimmista arvoista koostuva luokka tummimmalla.

Huomaa, että karttavisualisoinneissa sarjallisten sävyjen järjestys ja logiikka on sama sekä vaaleassa että tummassa teemassa.

Puuttuva tai neutraali tieto

Puuttuvaa, luokittelematonta tai samaan luokkaa yhdistettyä tietoa kuvataan yleensä harmaan skaalaan perustuvilla sävyillä.

Neutraalia tai puuttuvaa tietoa, (esim. Ahvenanmaan kunnat, jotka eivät sisälly kartassa esitettyyn dataan) voi tapauskohtaisesti kuvata myös ilman väritäyttöä. Alueen voi tällöin erottaa taustasta esim. keskiharmaalla reunaviivalla.

Typografia

Visualisointien typografia perustuu Kela Design Systemin yleisiin typografiakäytäntöihin. Typografiseen tyyliin sisältyy myös poikkeuksia:

  • Kuvion tekstielementeissä (esim. asteikkonumerot, selitteet, lähdeviite yms.) voi soveltaa normaalia leipätekstiä pienempää fonttikokoa, esim. text-small (14 px).

  • Myös Kanta-teemassa visualisointien ja yksittäisten kuvioiden otsikkoväri on tumma harmaa (kanta-gray-80).

Chart title · · NaNpx

Visualisoinnin pääotsikko

Chart ingress · · NaNpx

Alaotsikko tai leipäteksti

Legend · · NaNpx

Selite

Axis label · · NaNpx

Akselien otsikot

Data point · · NaNpx

Värialueen (esim. pylvään) sisällä näytettävät luvut

Data point invert · · NaNpx

Värialueen (esim. pylvään) sisällä näytettävät luvut

Muut visuaaliset elementit

Viivat

Kela Design System tarjoaa datavisualisointeihin seuraavat valmiiksi määritellyt viivatyylit:

Akselit ja asteikot

NimiKuvausTyyliVäriEsimerkki
BaselineKuvion akselin perusviiva1px solidcolor-kanta-gray-100color-kela-gray-100
SubtleKuvion asteikon viitteelliset apuviivat eli hilaviivat1px solidcolor-kanta-gray-20color-kela-gray-20
Strongtrendiä tai tiettyä tasoa osoittava vahvistettu viiva 1px solidcolor-kanta-gray-80color-kela-gray-80
Section dividerVärialueita (esim. donitsikuvion lohkoja) erottava reunaviiva HUOM: määräytyy taustan perusteella2px solidcolor-white
Data lineViivakuvion sarjaa kuvaava viiva. HUOM: viivan väri riippuu datasta3px solidcolor-kanta-magenta-60color-kela-success-green-60

Selite

Selite (legend) muodostuu neliömuotoisesta väritunnisteesta ja esimerkiksi luokan nimeä kuvaavasta tekstistä.

Luokkaa tai sarjaa kuvaavan värineliön koko kannattaa suhteuttaa tekstiselitteessä käytettyyn fonttikokoon (esim. tekstiselite 14px, värineliö 14px tai 16px).

Kun kuviossa esitetyt tiedot seuraavat tiettyä järjestystä tai lukusuuntaa, myös selitteet näytetään vastaavassa järjestyksessä.

Yleensä selitteet näytetään joko kuvion yläpuolella tai kuvion vieressä oikealla. Pystysuuntaisissa kartoissa selitteet voi asetella kartan vasemmalle puolelle.

Esimerkki selitteen tyyleistä Kela-teemassa