Siirry sisältöön
Kela Design System KDS

16.1.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.

Valmiit muuttujat tiedon visualisointiin

Visualisointien ulkoasumäärittelyt ovat saatavilla valmiina muuttujina useissa eri formaateissa.

Tiedon visualisoinnin design-muuttujat

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

Kategoriapaletti 1 (color-chart-palette-categorical-1)
1
2
3
4
5
6
7
8
9
10
Kategoriapaletti 2 (color-chart-palette-categorical-2)
1
2
3
4
5
6
7
8
9
10
Kategoriapaletti 1 (color-chart-palette-categorical-1)
1
2
3
4
5
6
7
8
9
10
Kategoriapaletti 2 (color-chart-palette-categorical-2)
1
2
3
4
5
6
7
8
9
10

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, esimerkiksi

  • 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.

Hajaantuvat paletit tummassa teemassa

Hajaantuvien palettien sävyjen järjestys ja logiikka on pääsääntöisesti sama molemmissa väriteemoissa.

Myös tummassa teemassa pienimmästä arvoista koostuvia luokkaa kuvataan aina skaalan vaaleimmalla sävyllä.

Vastakohtaiset muuttujat

Paletti vastakohtaisille muuttujille (color-chart-palette-divergent-opposite)
1
2
3
4
5
6
7
8
9
Paletti vastakohtaisille muuttujille (color-chart-palette-divergent-opposite)
1
2
3
4
5
6
7
8
9

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

Paletti neutraaleille muuttujille (color-chart-palette-divergent-neutral)
1
2
3
4
5
6
7
8
9
Paletti neutraaleille muuttujille (color-chart-palette-divergent-neutral)
1
2
3
4
5
6
7
8
9

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

Likert-paletti (color-chart-palette-likert)
1
2
3
4
5
Likert-paletti (color-chart-palette-likert)
1
2
3
4
5

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

Sarjallinen paletti (color-chart-palette-sequential)
1
2
3
4
Sarjallinen paletti (color-chart-palette-sequential)
1
2
3
4

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 inverted · · 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-chart-axis-baseline
Grid lineKuvion asteikon viitteelliset apuviivat, eli hilaviivat1px solidcolor-chart-grid-line
StrongTrendiä tai tiettyä tasoa osoittava vahvistettu viiva.1px solidcolor-chart-axis-strong
Section dividerVärialueita (esim. donitsikuvion lohkoja) erottava reunaviiva, joka määräytyy sivun taustavärin perusteella.2px solidcolor-chart-section-divider
Data lineViivakuvion sarjaa kuvaava viiva, jonka väri riippuu datasta.3px solid-

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