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 Kelan 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 | kela-blue-60 | |
.kds-text-brand-primary | .kds-bg-brand-primary | .kds-border-brand-primary | kela-blue-80 | |
.kds-text-success | .kds-bg-success | .kds-border-success | success-green-60 | |
.kds-text-warning | .kds-bg-warning | .kds-border-warning | kela-yellow-30 | |
.kds-text-danger | .kds-bg-danger | .kds-border-danger | warning-red-60 | |
.kds-text-dark | .kds-bg-dark | .kds-border-dark | kela-gray-90 | |
.kds-text-light | .kds-bg-light | .kds-border-light | kela-gray-10 | |
.kds-text-muted | - | - | kela-gray-60 | |
.kds-text-body | - | - | kela-gray-100 | |
.kds-text-white | .kds-bg-white | - | kela-white |
Päävärit
| Värisävy | neutral-10 | neutral-100 | HSLuv | Hex |
|---|---|---|---|---|
| Fail 1.00:1 | AAA 16.44:1 | hsluv(238.8, 100.0, 96.5) | #eef6ff | |
| Fail 1.20:1 | AAA 13.73:1 | hsluv(244.5, 100, 89.6) | #cfe3ff | |
| Fail 1.66:1 | AAA 9.92:1 | hsluv(245.8, 95, 77.9) | #97c4fc | |
| Fail 2.38:1 | AA 6.90:1 | hsluv(251.4, 90, 66) | #68a2f6 | |
| AA Large 3.58:1 | AA 4.59:1 | hsluv(253.0, 85, 54) | #3b81de | |
| AA 4.91:1 | AA Large 3.35:1 | hsluv(255.0, 89, 45.2) | #2a69c5 | |
| AA 6.90:1 | Fail 2.38:1 | hsluv(256.0, 94, 36) | #1652a6 | |
| AAA 10.58:1 | Fail 1.55:1 | hsluv(258.2, 100, 24) | #003580 | |
| AAA 13.35:1 | Fail 1.23:1 | hsluv(258.2, 100, 16.5) | #00265f | |
| AAA 16.56:1 | Fail 1.01:1 | hsluv(258.2, 100, 7.5) | #00143b |
| Värisävy | neutral-10 | neutral-100 | HSLuv | Hex |
|---|---|---|---|---|
| Fail 1.01:1 | AAA 16.35:1 | hsluv(71.2, 100, 96.3) | #fff4d5 | |
| Fail 1.20:1 | AAA 13.71:1 | hsluv(69.1, 100, 89.52) | #ffdf74 | |
| Fail 1.66:1 | AAA 9.91:1 | hsluv(54.6, 98.3, 78) | #f8b516 | |
| Fail 2.38:1 | AA 6.90:1 | hsluv(54.6, 98.3, 66) | #cf9710 | |
| AA Large 3.58:1 | AA 4.60:1 | hsluv(54.6, 98.3, 54) | #a7790b | |
| AA 4.91:1 | AA Large 3.35:1 | hsluv(54.6, 98.3, 45.2) | #8b6407 | |
| AA 6.89:1 | Fail 2.39:1 | hsluv(54.6, 98.3, 36) | #6f4f04 | |
| AAA 10.60:1 | Fail 1.55:1 | hsluv(54.6, 98.3, 24) | #4c3502 | |
| AAA 13.38:1 | Fail 1.23:1 | hsluv(54.6, 98.3, 16.5) | #372601 | |
| AAA 16.58:1 | Fail 1.01:1 | hsluv(54.6, 98.3, 7.5) | #201400 |
| 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) | #c1c1c1 | |
| Fail 2.40:1 | AA 6.86:1 | hsluv(0, 0, 66) | #a0a0a0 | |
| AA Large 3.57:1 | AA 4.60:1 | hsluv(0, 0, 54) | #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) | #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.5) | #292929 | |
| AAA 16.44:1 | Fail 1.00:1 | hsluv(0, 0, 7.5) | #171717 |
Tilavärit
| Värisävy | neutral-10 | neutral-100 | HSLuv | Hex |
|---|---|---|---|---|
| Fail 1.00:1 | AAA 16.48:1 | hsluv(144.3, 47.4, 96.6) | #e7faee | |
| Fail 1.20:1 | AAA 13.75:1 | hsluv(142.5, 35.2, 89.6) | #bbedcd | |
| Fail 1.66:1 | AAA 9.92:1 | hsluv(141.1, 57.3, 77.9) | #7fd29e | |
| Fail 2.39:1 | AA 6.89:1 | hsluv(137.5, 81.7, 66) | #44b56c | |
| AA Large 3.58:1 | AA 4.59:1 | hsluv(133.1, 98.6, 54) | #09953b | |
| AA 4.90:1 | AA Large 3.36:1 | hsluv(133.1, 98.6, 45.2) | #067c30 | |
| AA 6.84:1 | Fail 2.40:1 | hsluv(133.1, 98.6, 36) | #046324 | |
| AAA 10.60:1 | Fail 1.55:1 | hsluv(133.1, 98.6, 24) | #024316 | |
| AAA 13.31:1 | Fail 1.24:1 | hsluv(133.1, 98.6, 16.5) | #01310e | |
| AAA 16.49:1 | Fail 1.00:1 | hsluv(133.1, 98.6, 7.5) | #001c05 |
| Värisävy | neutral-10 | neutral-100 | HSLuv | Hex |
|---|---|---|---|---|
| Fail 1.00:1 | AAA 16.41:1 | hsluv(68.4, 100.0, 96.5) | #fff4dc | |
| Fail 1.20:1 | AAA 13.71:1 | hsluv(62.0, 96.2, 89.5) | #fedd9f | |
| Fail 1.66:1 | AAA 9.91:1 | hsluv(54.6, 98.3, 78) | #f8b516 | |
| Fail 2.38:1 | AA 6.90:1 | hsluv(54.6, 98.3, 66) | #cf9710 | |
| AA Large 3.58:1 | AA 4.60:1 | hsluv(54.6, 98.3, 54) | #a7790b | |
| AA 4.91:1 | AA Large 3.35:1 | hsluv(54.6, 98.3, 45.2) | #8b6407 | |
| AA 6.89:1 | Fail 2.39:1 | hsluv(54.6, 98.3, 36) | #6f4f04 | |
| AAA 10.60:1 | Fail 1.55:1 | hsluv(54.6, 98.3, 24) | #4c3502 | |
| AAA 13.38:1 | Fail 1.23:1 | hsluv(54.6, 98.3, 16.5) | #372601 | |
| AAA 16.58:1 | Fail 1.01:1 | hsluv(54.6, 98.3, 7.5) | #201400 |
| Värisävy | neutral-10 | neutral-100 | HSLuv | Hex |
|---|---|---|---|---|
| Fail 1.00:1 | AAA 16.43:1 | hsluv(349.1, 90.1, 96.5) | #fef2f6 | |
| Fail 1.20:1 | AAA 13.72:1 | hsluv(349.1, 90.1, 89.5) | #fcd8e3 | |
| Fail 1.66:1 | AAA 9.90:1 | hsluv(349.1, 89.6, 78) | #f9aac6 | |
| Fail 2.39:1 | AA 6.89:1 | hsluv(353.8, 88.1, 66) | #f677a1 | |
| AA Large 3.57:1 | AA 4.61:1 | hsluv(1, 85.9, 54) | #f1316d | |
| AA 4.90:1 | AA Large 3.36:1 | hsluv(2, 92.8, 45.2) | #cf1a55 | |
| AA 6.85:1 | Fail 2.40:1 | hsluv(8.1, 96.3, 36) | #ab0a2c | |
| AAA 10.57:1 | Fail 1.56:1 | hsluv(8.1, 96.3, 24) | #77051b | |
| AAA 13.32:1 | Fail 1.23:1 | hsluv(8.1, 96.3, 16.5) | #590312 | |
| AAA 16.49:1 | Fail 1.00:1 | hsluv(11.1, 96.3, 7.5) | #370103 |
Lisävärit
| Värisävy | neutral-10 | neutral-100 | HSLuv | Hex |
|---|---|---|---|---|
| Fail 1.00:1 | AAA 16.38:1 | hsluv(28.7, 64, 96.5) | #fbf3f1 | |
| Fail 1.20:1 | AAA 13.73:1 | hsluv(28.7, 64, 89.5) | #f5dcd5 | |
| Fail 1.65:1 | AAA 9.97:1 | hsluv(28.7, 67.5, 78) | #eeb4a1 | |
| Fail 2.38:1 | AA 6.90:1 | hsluv(26.1, 67.5, 66) | #e88763 | |
| AA Large 3.57:1 | AA 4.61:1 | hsluv(24.6, 69.9, 54) | #c56745 | |
| AA 4.92:1 | AA Large 3.34:1 | hsluv(21.2, 80, 45.2) | #b04c2d | |
| AA 6.87:1 | Fail 2.39:1 | hsluv(18.2, 95.7, 36) | #9b2f0b | |
| AAA 10.55:1 | Fail 1.56:1 | hsluv(18.2, 95.7, 24) | #6c1e05 | |
| AAA 13.35:1 | Fail 1.23:1 | hsluv(18.2, 95.7, 16.5) | #501403 | |
| AAA 16.53:1 | Fail 1.01:1 | hsluv(18.2, 95.7, 7.5) | #300901 |
| Värisävy | neutral-10 | neutral-100 | HSLuv | Hex |
|---|---|---|---|---|
| Fail 1.00:1 | AAA 16.39:1 | hsluv(355.7, 51.3, 96.5) | #faf3f5 | |
| Fail 1.20:1 | AAA 13.71:1 | hsluv(355.7, 52.5, 89.5) | #f1dce1 | |
| Fail 1.65:1 | AAA 9.96:1 | hsluv(355.7, 52.5, 78) | #e4b5c0 | |
| Fail 2.63:1 | AA 6.26:1 | hsluv(357.8, 45.6, 63) | #cf8395 | |
| AA Large 3.56:1 | AA 4.62:1 | hsluv(0.6, 48.2, 54) | #ca5f77 | |
| AA 4.91:1 | AA Large 3.35:1 | hsluv(2.6, 64.1, 45.2) | #b8405b | |
| AA 6.86:1 | Fail 2.40:1 | hsluv(8.1, 98.3, 36) | #ac052a | |
| AAA 10.57:1 | Fail 1.56:1 | hsluv(8.1, 98.3, 24) | #78021b | |
| AAA 13.40:1 | Fail 1.23:1 | hsluv(8.1, 98.3, 16.5) | #590111 | |
| AAA 16.56:1 | Fail 1.01:1 | hsluv(11.1, 98.3, 7.5) | #370002 |
| Värisävy | neutral-10 | neutral-100 | HSLuv | Hex |
|---|---|---|---|---|
| Fail 1.00:1 | AAA 16.43:1 | hsluv(295.2, 35.3, 96.5) | #f7f4f8 | |
| Fail 1.20:1 | AAA 13.71:1 | hsluv(295.2, 35.3, 89.5) | #e7deec | |
| Fail 1.65:1 | AAA 9.96:1 | hsluv(295.2, 35.3, 78) | #cfbad8 | |
| Fail 2.39:1 | AA 6.88:1 | hsluv(293.9, 36.2, 66) | #b595c4 | |
| AA Large 3.57:1 | AA 4.61:1 | hsluv(292.9, 37.6, 54) | #9c71b0 | |
| AA 4.88:1 | AA Large 3.37:1 | hsluv(291.8, 44.3, 45.2) | #87599d | |
| AA 6.87:1 | Fail 2.39:1 | hsluv(290.1, 68.3, 36) | #783896 | |
| AAA 10.61:1 | Fail 1.55:1 | hsluv(289.2, 78.4, 24) | #561e70 | |
| AAA 13.41:1 | Fail 1.23:1 | hsluv(289.2, 78.4, 16.5) | #3f1453 | |
| AAA 16.47:1 | Fail 1.00:1 | hsluv(289.2, 78.4, 7.5) | #260933 |
| Värisävy | neutral-10 | neutral-100 | HSLuv | Hex |
|---|---|---|---|---|
| Fail 1.00:1 | AAA 16.42:1 | hsluv(205.1, 23.6, 96.5) | #f0f6f7 | |
| Fail 1.20:1 | AAA 13.73:1 | hsluv(205.6, 23.6, 89.5) | #d1e5e8 | |
| Fail 1.65:1 | AAA 9.94:1 | hsluv(208.0, 41.5, 78) | #99c9d2 | |
| Fail 2.63:1 | AA 6.26:1 | hsluv(210.0, 60.2, 63) | #65a2ae | |
| AA Large 3.56:1 | AA 4.62:1 | hsluv(212.0, 80.4, 54) | #3c8c9b | |
| AA 4.92:1 | AA Large 3.34:1 | hsluv(218.8, 100.0, 45.2) | #00758b | |
| AA 6.89:1 | Fail 2.39:1 | hsluv(218.8, 100.0, 36) | #005d6f | |
| AAA 10.61:1 | Fail 1.55:1 | hsluv(218.8, 100.0, 24) | #003f4c | |
| AAA 13.30:1 | Fail 1.24:1 | hsluv(218.8, 100.0, 16.5) | #002e38 | |
| AAA 16.48:1 | Fail 1.00:1 | hsluv(218.8, 100.0, 7.5) | #001a20 |
| Värisävy | neutral-10 | neutral-100 | HSLuv | Hex |
|---|---|---|---|---|
| Fail 1.00:1 | AAA 16.46:1 | hsluv(220, 70.4, 96.5) | #ecf7fc | |
| Fail 1.20:1 | AAA 13.71:1 | hsluv(220, 70.4, 89.5) | #c2e7f6 | |
| Fail 1.66:1 | AAA 9.93:1 | hsluv(223.6, 75.4, 78) | #6ccdf0 | |
| Fail 2.38:1 | AA 6.90:1 | hsluv(229.7, 88.6, 66) | #3cacd8 | |
| AA Large 3.56:1 | AA 4.62:1 | hsluv(238.1, 100, 54) | #008ac2 | |
| AA 4.90:1 | AA Large 3.35:1 | hsluv(238.1, 100, 45.2) | #0072a2 | |
| AA 6.83:1 | Fail 2.41:1 | hsluv(238.1, 100, 36) | #005b82 | |
| AAA 10.63:1 | Fail 1.55:1 | hsluv(238.1, 100, 24) | #003d59 | |
| AAA 13.39:1 | Fail 1.23:1 | hsluv(238.1, 100, 16.5) | #002c42 | |
| AAA 16.49:1 | Fail 1.00:1 | hsluv(238.1, 100, 7.5) | #001927 |
| Värisävy | neutral-10 | neutral-100 | HSLuv | Hex |
|---|---|---|---|---|
| Fail 1.00:1 | AAA 16.41:1 | hsluv(92.5, 28.6, 96.5) | #f3f8d7 | |
| Fail 1.20:1 | AAA 13.76:1 | hsluv(94.7, 54.9, 89.5) | #dbe997 | |
| Fail 1.65:1 | AAA 9.96:1 | hsluv(95.8, 94.2, 78) | #b6cc2d | |
| Fail 2.38:1 | AA 6.90:1 | hsluv(95.8, 96.6, 66) | #97aa1a | |
| AA Large 3.57:1 | AA 4.61:1 | hsluv(95.8, 97.2, 54) | #798910 | |
| AA 4.87:1 | AA Large 3.37:1 | hsluv(95.8, 98.1, 45.2) | #647208 | |
| AA 6.89:1 | Fail 2.39:1 | hsluv(95.8, 98.5, 36) | #4f5a04 | |
| AAA 10.59:1 | Fail 1.55:1 | hsluv(95.8, 99.0, 24) | #353d01 | |
| AAA 13.35:1 | Fail 1.23:1 | hsluv(95.8, 99.5, 16.5) | #262c00 | |
| AAA 16.48:1 | Fail 1.00:1 | hsluv(95.8, 100.0, 7.5) | #141900 |