Muuttujat, luokat ja värit
Tähän osioon on koottu kehittäjille Kelan ja Kannan verkkoväreille määritellyt muuttujat, CSS-luokat sekä värisävyjen hex-arvot. Muuttujia on saatavilla useassa eri muodossa.
Värimuuttujat
Kela Design Systemin koko väripaletti on tarjolla muuttujina, joita voi käyttää projekteissa tai komponenteissa Kannan visuaalisen ilmeen toteutukseen.
Värimuuttujat ovat tarjolla SASS- ja JavaScript-muuttujina. Pyri viittaamaan väreihin muuttujien kautta aina, kun se on mahdollista. Vältä kovakoodaamasta värien tarkkoja arvoja omaan sovellukseesi.
Muuttujat on tuotettu Style Dictionary -kirjastolla(avautuu uuteen välilehteen) ja uusia formaatteja voi pyytää KDS-tiimiltä.
CSS-luokat
Väreille on lisäksi tarjolla utility-luokat, joiden avulla voi asettaa ja yliajaa tausta-, teksti- ja reunavärejä.
Taustaväri: .kds-bg-[väri], esim. .kds-bg-primary tai .kds-bg-warning.
Tekstiväri: .kds-text-[väri], esim. .kds-text-dark tai .kds-text-danger.
Reunaväri: .kds-border-[väri], esim. .kds-border-primary tai .kds-border-success.
| Tekstiväri | Taustaväri | Reunaväri | Värisävy | Väri |
|---|---|---|---|---|
.kds-text-primary | .kds-bg-primary | .kds-border-primary | kanta-blue-60 | |
.kds-text-brand-primary | .kds-bg-brand-primary | .kds-border-brand-primary | kanta-blue-80 | |
.kds-text-success | .kds-bg-success | .kds-border-success | kanta-success-green-60 | |
.kds-text-warning | .kds-bg-warning | .kds-border-warning | kanta-warning-yellow-30 | |
.kds-text-danger | .kds-bg-danger | .kds-border-danger | kanta-warning-red-60 | |
.kds-text-dark | .kds-bg-dark | .kds-border-dark | kanta-gray-90 | |
.kds-text-light | .kds-bg-light | .kds-border-light | kanta-gray-10 | |
.kds-text-muted | - | - | kanta-gray-60 | |
.kds-text-body | - | - | kanta-gray-100 | |
.kds-text-white | .kds-bg-white | - | kanta-white |
Päävärit
| Värisävy | neutral-10 | neutral-100 | HSLuv | Hex |
|---|---|---|---|---|
| Fail 1.00:1 | AAA 16.45:1 | hsluv(205.0, 40.5, 96.6) | #edf7f9 | |
| Fail 1.20:1 | AAA 13.69:1 | hsluv(212.6, 63.0, 89.6) | #bee8f4 | |
| Fail 1.66:1 | AAA 9.91:1 | hsluv(212.1, 71.6, 78) | #6fcee2 | |
| Fail 2.40:1 | AA 6.86:1 | hsluv(216.4, 90.7, 66) | #35aec8 | |
| AA Large 3.57:1 | AA 4.61:1 | hsluv(221.9, 100.0, 54.1) | #008dab | |
| AA 4.89:1 | AA Large 3.36:1 | hsluv(229.2, 100.0, 45.1) | #007496 | |
| AA 6.84:1 | Fail 2.40:1 | hsluv(232.0, 100.0, 36.1) | #005c7b | |
| AAA 10.60:1 | Fail 1.55:1 | hsluv(230.6, 100.0, 24.1) | #003e54 | |
| AAA 13.45:1 | Fail 1.22:1 | hsluv(234.9, 100.0, 16.4) | #002c3f | |
| AAA 16.54:1 | Fail 1.01:1 | hsluv(231.1, 100.0, 7.5) | #001924 |
| Värisävy | neutral-10 | neutral-100 | HSLuv | Hex |
|---|---|---|---|---|
| Fail 1.00:1 | AAA 16.41:1 | hsluv(106.6, 39.1, 96.4) | #edf9df | |
| Fail 1.25:1 | AAA 13.20:1 | hsluv(107.2, 54.8, 88.1) | #c5e994 | |
| Fail 1.65:1 | AAA 9.97:1 | hsluv(110.1, 73.4, 78.1) | #9fd063 | |
| Fail 2.39:1 | AA 6.87:1 | hsluv(111.8, 91.9, 65.9) | #78b02b | |
| AA Large 3.56:1 | AA 4.61:1 | hsluv(113.9, 100, 54) | #589000 | |
| AA 4.91:1 | AA Large 3.35:1 | hsluv(116.1, 100, 45.2) | #437800 | |
| AA 6.88:1 | Fail 2.39:1 | hsluv(118, 100, 36) | #306000 | |
| AAA 10.55:1 | Fail 1.56:1 | hsluv(120.1, 100, 24.1) | #1b4200 | |
| AAA 13.36:1 | Fail 1.23:1 | hsluv(122.1, 100, 16.5) | #0e3000 | |
| AAA 16.56:1 | Fail 1.01:1 | hsluv(122.5, 100, 7.4) | #051b00 |
| Värisävy | neutral-10 | neutral-100 | HSLuv | Hex |
|---|---|---|---|---|
| Fail 1.00:1 | AAA 16.44:1 | hsluv(0, 0, 96.5) | #f5f5f5 | |
| Fail 1.20:1 | AAA 13.71:1 | hsluv(0, 0, 89.5) | #e1e1e1 | |
| Fail 1.65:1 | AAA 9.96:1 | hsluv(0, 0, 78.1) | #c1c1c1 | |
| Fail 2.40:1 | AA 6.86:1 | hsluv(0, 0, 65.9) | #a0a0a0 | |
| AA Large 3.57:1 | AA 4.60:1 | hsluv(0, 0, 54.0) | #818181 | |
| AA 4.89:1 | AA Large 3.36:1 | hsluv(0, 0, 45.2) | #6b6b6b | |
| AA 6.84:1 | Fail 2.40:1 | hsluv(0, 0, 36.1) | #555555 | |
| AAA 10.59:1 | Fail 1.55:1 | hsluv(0, 0, 24) | #393939 | |
| AAA 13.34:1 | Fail 1.23:1 | hsluv(0, 0, 16.6) | #292929 | |
| AAA 16.44:1 | Fail 1.00:1 | hsluv(0, 0, 7.7) | #171717 |
Tilavärit
| Värisävy | neutral-10 | neutral-100 | HSLuv | Hex |
|---|---|---|---|---|
| Fail 1.00:1 | AAA 16.45:1 | hsluv(205.0, 40.5, 96.6) | #edf7f9 | |
| Fail 1.20:1 | AAA 13.69:1 | hsluv(212.6, 63.0, 89.6) | #bee8f4 | |
| Fail 1.66:1 | AAA 9.91:1 | hsluv(212.1, 71.6, 78) | #6fcee2 | |
| Fail 2.40:1 | AA 6.86:1 | hsluv(216.4, 90.7, 66) | #35aec8 | |
| AA Large 3.57:1 | AA 4.61:1 | hsluv(221.9, 100.0, 54.1) | #008dab | |
| AA 4.89:1 | AA Large 3.36:1 | hsluv(229.2, 100.0, 45.1) | #007496 | |
| AA 6.84:1 | Fail 2.40:1 | hsluv(232.0, 100.0, 36.1) | #005c7b | |
| AAA 10.60:1 | Fail 1.55:1 | hsluv(230.6, 100.0, 24.1) | #003e54 | |
| AAA 13.45:1 | Fail 1.22:1 | hsluv(234.9, 100.0, 16.4) | #002c3f | |
| AAA 16.54:1 | Fail 1.01:1 | hsluv(231.1, 100.0, 7.5) | #001924 |
| Värisävy | neutral-10 | neutral-100 | HSLuv | Hex |
|---|---|---|---|---|
| Fail 1.00:1 | AAA 16.41:1 | hsluv(106.6, 39.1, 96.4) | #edf9df | |
| Fail 1.25:1 | AAA 13.20:1 | hsluv(107.2, 54.8, 88.1) | #c5e994 | |
| Fail 1.65:1 | AAA 9.97:1 | hsluv(110.1, 73.4, 78.1) | #9fd063 | |
| Fail 2.39:1 | AA 6.87:1 | hsluv(111.8, 91.9, 65.9) | #78b02b | |
| AA Large 3.56:1 | AA 4.61:1 | hsluv(113.9, 100, 54) | #589000 | |
| AA 4.91:1 | AA Large 3.35:1 | hsluv(116.1, 100, 45.2) | #437800 | |
| AA 6.88:1 | Fail 2.39:1 | hsluv(118, 100, 36) | #306000 | |
| AAA 10.55:1 | Fail 1.56:1 | hsluv(120.1, 100, 24.1) | #1b4200 | |
| AAA 13.36:1 | Fail 1.23:1 | hsluv(122.1, 100, 16.5) | #0e3000 | |
| AAA 16.56:1 | Fail 1.01:1 | hsluv(122.5, 100, 7.4) | #051b00 |
| Värisävy | neutral-10 | neutral-100 | HSLuv | Hex |
|---|---|---|---|---|
| Fail 1.00:1 | AAA 16.47:1 | hsluv(76.6, 100.0, 96.6) | #fff6cb | |
| Fail 1.20:1 | AAA 13.67:1 | hsluv(69.9, 100, 89.4) | #ffdf69 | |
| Fail 1.65:1 | AAA 9.95:1 | hsluv(61.4, 100, 78) | #eeba00 | |
| Fail 2.39:1 | AA 6.87:1 | hsluv(60.7, 100, 65.9) | #c79a00 | |
| AA Large 3.57:1 | AA 4.61:1 | hsluv(60.7, 100, 54) | #a17c00 | |
| AA 4.87:1 | AA Large 3.38:1 | hsluv(61, 100, 45.3) | #866700 | |
| AA 6.90:1 | Fail 2.38:1 | hsluv(61.1, 100, 35.9) | #6a5100 | |
| AAA 10.53:1 | Fail 1.56:1 | hsluv(61.3, 100, 24.2) | #493700 | |
| AAA 13.36:1 | Fail 1.23:1 | hsluv(61, 100, 16.5) | #352700 | |
| AAA 16.53:1 | Fail 1.01:1 | hsluv(59.3, 100, 7.5) | #1f1500 |
| Värisävy | neutral-10 | neutral-100 | HSLuv | Hex |
|---|---|---|---|---|
| Fail 1.00:1 | AAA 16.40:1 | hsluv(22.5, 100, 96.4) | #fff2f0 | |
| Fail 1.20:1 | AAA 13.72:1 | hsluv(23.6, 96.3, 89.6) | #fed9d2 | |
| Fail 1.65:1 | AAA 9.97:1 | hsluv(22, 98, 78.1) | #fead9d | |
| Fail 2.39:1 | AA 6.87:1 | hsluv(16.8, 98.5, 65.9) | #fe7766 | |
| AA Large 3.59:1 | AA 4.59:1 | hsluv(11, 97.5, 53.9) | #fd1b2d | |
| AA 4.90:1 | AA Large 3.36:1 | hsluv(10, 98, 45.2) | #d60929 | |
| AA 6.86:1 | Fail 2.40:1 | hsluv(10, 98.9, 36.1) | #ad031e | |
| AAA 10.55:1 | Fail 1.56:1 | hsluv(9.9, 99.2, 24.1) | #790112 | |
| AAA 13.34:1 | Fail 1.23:1 | hsluv(10.2, 98.5, 16.6) | #5a010a | |
| AAA 16.55:1 | Fail 1.01:1 | hsluv(9.8, 100, 7.4) | #370004 |