# Kirkkaat väripaletit, joiden teksti pysyy luettavana

[Canonical HTML page](https://gradiently.design/fi/guide/bright-color-palettes)

Kirkkaita värejä on helppo rakastaa ja käyttää niin, ettei tekstiä enää erota. Opi, mitkä sävyt tarvitsevat mustaa, mitkä valkoista ja missä paletti saa levätä.

## The short version

- Kirkas väripaletti käyttää kylläisiä sävyjä, kuten pinkkiä, mandariininoranssia, sitruunankeltaista, sähkönsinistä ja kirkkaanvihreää.
- Kirkkaat keltaiset, vihreät, syaanit, turkoosit ja oranssit ovat vaaleita, joten ne tarvitsevat tummaa tekstiä valkoisen sijaan.
- Kirkkaiden punaisten ja pinkkien kontrasti valkoiseen on noin 3,5:1, mikä ei täytä leipätekstin WCAG AA -vaatimusta. Käytä pientä tekstiä mustana ja säästä valkoinen suuriin otsikoihin.
- Kaksi yhtä vaaleaa kirkasta väriä näyttää vierekkäin värisevän. Erota ne neutraalilla värillä tai selkeällä vaaleuserolla.
- Jokainen kirkas paletti tarvitsee rauhallisen tukivärin, yleensä lähes mustan tai lämpimän luonnonvalkoisen, tekstille ja värien hengähdystilaksi.

**Kirkas väripaletti** pysyy luettavana, kun arvioit jokaisen värin vaaleutta sen näyttävyyden sijaan. Sitruunankeltainen `#FFD60A`, kirkkaanvihreä `#34C759`, vedensininen `#00C2FF` ja mandariininoranssi `#FF7A00` ovat niin vaaleita, että ne tarvitsevat lähes mustaa tekstiä. Pinkki `#FF2D87` ja unikonpunainen `#FF3B30` jäävät hankalaan väliin: musta teksti täyttää vaatimukset, mutta valkoinen toimii vain suurissa otsikoissa. Lisää rauhallinen tukiväri ja anna jokaiselle kirkkaalle sävylle oma tilansa. Näin karkkikaupalta näyttävästä paletista tulee myös tekstille sopiva.

## Mitkä kirkkaat värit tarvitsevat mustaa tekstiä

Kylläisyys tekee väristä voimakkaan, mutta luettavuus riippuu vaaleudesta. Monet kirkkaat värit ovat vaaleampia kuin luulet. Siksi valkoinen teksti kirkkaanvihreällä tai keltaisella näyttää räikeältä ja on silti vaikeaa lukea. Taulukossa verrataan yhdentoista kirkkaan sävyn kontrastia valkoiseen ja lähes mustaan `#111111`.

| Väri | Heksakoodi | Valkoinen teksti | Musta teksti |
| --- | --- | --- | --- |
| Sitruuna | `#FFD60A` | 1,41:1 | 13,38:1, käytä mustaa |
| Vedensininen | `#00C2FF` | 2,07:1 | 9,14:1, käytä mustaa |
| Mintunturkoosi | `#00D1B2` | 1,95:1 | 9,68:1, käytä mustaa |
| Kirkkaanvihreä | `#34C759` | 2,22:1 | 8,51:1, käytä mustaa |
| Mandariini | `#FF7A00` | 2,61:1 | 7,23:1, käytä mustaa |
| Unikonpunainen | `#FF3B30` | 3,55:1 | 5,32:1, käytä mustaa |
| Pinkki | `#FF2D87` | 3,51:1 | 5,37:1, käytä mustaa |
| Vadelma | `#E0115F` | 4,76:1, käytä valkoista | 3,97:1 |
| Sähkövioletti | `#8B3DFF` | 4,99:1, käytä valkoista | 3,78:1 |
| Koboltti | `#1D4ED8` | 6,70:1, käytä valkoista | 2,82:1 |
| Signaalinpunainen | `#C81D11` | 5,77:1, käytä valkoista | 3,27:1 |

WCAG AA edellyttää leipätekstiltä kontrastia 4,5:1 ja suurelta tekstiltä 3:1. Vadelma ja sähkövioletti ovat rajatapauksia: valkoinen läpäisee vaatimuksen juuri ja juuri.

Hyvä nyrkkisääntö: väriympyrän vaalea puoli oranssista keltaisen ja vihreän kautta syaaniin tarvitsee mustaa, samoin kirkkaimmat pinkit ja punaiset. Syvä puoli sinisestä violetin kautta karmiiniin tarvitsee valkoista. Jos suunnittelet laajalle yleisölle, lue myös [värinäön poikkeamat huomioivat paletit](https://gradiently.design/fi/guide/color-blindness-design). Pelkältä sävyltään eroavat kirkkaat värit voivat näyttää joillekin samoilta.

## Kuusi kirkasta väripalettia heksakoodeineen

- Lämmin valkoinen: #fff8ec
- Pinkki: #ff2d87
- Mandariini: #ff7a00
- Sitruuna: #ffd60a
- Musteenmusta: #111111

Hedelmäkoju. Kolme lämmintä kirkasta väriä lämpimän valkoisen ja musteenmustan välissä. Musteenmusta kantaa tekstin, kirkkaat sävyt muodot ja suuret sanat.

- Yövioletti: #1a1033
- Mintunturkoosi: #00d1b2
- Sitruuna: #ffd60a
- Pinkki: #ff2d87
- Lilanvalkoinen: #f4f1ff

Pelihalli. Tumma pohja saa kirkkaat värit hohtamaan. Kaikki kolme täyttävät AA-vaatimuksen sitä vasten: sitruuna 12,76:1, mintunturkoosi 9,23:1 ja pinkki 5,13:1.

- **Allasjuhlat:** vedensininen `#00C2FF`, kirkkaanvihreä `#34C759`, sitruuna `#FFD60A`, valkoinen `#FFFFFF` ja tekstille syvä laivastonsininen `#0B1F3A`.
- **Alakoulu:** koboltti `#1D4ED8`, signaalinpunainen `#C81D11`, sitruuna `#FFD60A`, paperi `#FAF7F0` ja musteenmusta `#111111`.
- **Riso-painatus:** fluoresoiva pinkki `#FF48B0`, sininen `#0078BF`, keltainen `#FFE800`, sanomalehtipaperi `#F2EFE6` ja musta `#1A1A1A`.
- **Tropiikki:** vadelma `#E0115F`, mango `#FFA51F`, palmu `#00A86B`, hiekka `#F6EBD9` ja kaakao `#2B1B14`.

## Näin pidät kirkkaan paletin luettavana

1. **Valitse tukiväri ensin** Valitse lähes musta tai lämmin luonnonvalkoinen ja anna sen täyttää suurin osa pinnasta. Lämpimän valkoisen `#FFF8EC` ja musteenmustan `#111111` kontrasti on 17,89:1, joten jokainen musteenmusta sana erottuu.
2. **Käytä tekstissä tukiväriä** Leipäteksti kuuluu tukiväriin. Kirkkaat sävyt sopivat otsikkoon tai yhteen suureen numeroon, jolloin suuren tekstin kontrastiraja 3:1 pätee.
3. **Erota yhtä vaaleat kirkkaat sävyt** Pinkin ja sähkönsinisen, kuten `#2F6BFF`, kontrasti on 1,28:1, ja niiden yhteinen reuna näyttää väreilevän. Jätä väliin valkoista, mustaa tai tilaa tai yhdistä vaalea kirkas sävy syvään.
4. **Rajoita tekstin lähellä olevia värejä** Kolme kirkasta sävyä paletissa riittää, ja yhden tekstialueen takana tulisi olla vain yksi. [60 30 10 -sääntö](https://gradiently.design/fi/guide/60-30-10-rule) auttaa: tukiväriä 60, pääväriä 30 ja korostuksia 10.
5. **Tarkista puhelimella ulkona** Kirkkaat värit haalistuvat auringonvalossa ja himmeillä näytöillä. Jos sanat erottuvat himmennetyllä puhelimella, paletti toimii.

Kirkas kesäalejulkaisu, jonka pieni lisäteksti katoaa voimakkaaseen taustaan

Voimakas tausta ja sanat suoraan sen päällä: otsikko erottuu, tarkentava rivi katoaa.

Sama kirkas kesäalejulkaisu, jossa jokainen tekstirivi erottuu rauhallisemmalta tausta-alueelta

Samat värit, mutta tausta rauhoittuu tekstin takana. Yhä kirkas, ja jokainen rivi erottuu.

Oikeanpuoleinen versio näyttää, mitä Gradiently tekee oletuksena. Mark tietää sanojesi sijainnin, siirtää vilkkaimman värialueensa pois niiden alta ja valitsee vaalean tai tumman tekstin riveittäin. Paletti saa pysyä voimakkaana ilman tekstilaatikkoa tai varjoa.

## Kirkkaat liukuvärit ilman harmaata keskikohtaa

Kun sekoitat väriympyrän vastakkaisia kirkkaita sävyjä tavallisessa sRGB:ssä, keskikohta muuttuu harmaaksi tai ruskeaksi. Valitse vierekkäisiä sävyjä tai pyydä selainta interpoloimaan oklch-avaruudessa, jolloin keskikohta pysyy kylläisenä. [Liukuvärin interpolointi](https://gradiently.design/fi/guide/gradient-interpolation) selittää eron.

- Pinkistä sitruunaan: `linear-gradient(135deg, #ff2d87 0%, #ff7a00 55%, #ffd60a 100%)`
- Vedensinisestä vihreään: `linear-gradient(135deg, #00c2ff 0%, #00d1b2 50%, #34c759 100%)`
- Pinkistä vedensiniseen oklch:ssa: `linear-gradient(in oklch 135deg, #ff2d87 0%, #00c2ff 100%)`
- Pinkki hohde yössä: `radial-gradient(circle at 30% 30%, #ff2d87 0%, #8b3dff 45%, #1a1033 90%)`

Vierekkäiset kirkkaat värit sekoittuvat siististi. Vastavärit pysyvät elävinä oklch-interpoloinnilla.

Katso lisää yhdistelmiä artikkeleista [voimakkaat liukuvärit](https://gradiently.design/fi/guide/vibrant-gradients) ja [neonliukuvärit](https://gradiently.design/fi/guide/neon-gradients). Kattavat kontrastiohjeet saat artikkelista [värikontrasti](https://gradiently.design/fi/guide/color-contrast-accessibility).

Jos paletti painetaan, muista yksi asia: sähköisimmät näyttövärit, etenkin vedensininen, pinkki ja kirkkaanvihreä, jäävät tavallisten CMYK-musteiden toistoalueen ulkopuolelle. Painosta ne palaavat selvästi himmeämpinä. Pyydä vedos tai käytä spotti- tai fluoresoivia musteita. [RGB ja CMYK](https://gradiently.design/fi/guide/rgb-vs-cmyk) kertoo, mitä voit odottaa.

## FAQ

### Mikä on kirkas väripaletti?

Se on joukko kylläisiä värejä, kuten pinkki, mandariini, sitruuna, vedensininen ja kirkkaanvihreä. Ne tasapainotetaan yleensä neutraalilla tukivärillä, joka kantaa tekstin.

### Käytänkö kirkkailla väreillä valkoista vai mustaa tekstiä?

Käytä mustaa vaaleilla kirkkailla sävyillä, kuten keltaisella, oranssilla, vihreällä, vedensinisellä ja turkoosilla, sekä pinkillä ja unikonpunaisella. Käytä valkoista syvillä kirkkailla sävyillä, kuten koboltilla, violetilla, vadelmalla ja signaalinpunaisella.

### Miksi jotkin kirkkaat värit näyttävät värisevän?

Kaksi yhtä vaaleaa kylläistä väriä vierekkäin, kuten pinkki ja sähkönsininen, saavat yhteisen reunansa väreilemään. Erota ne neutraalilla värillä tai muuta toisen vaaleutta.

### Kuinka monta kirkasta väriä paletissa pitäisi olla?

Kaksi tai kolme kirkasta väriä sekä yksi tai kaksi neutraalia riittää. Yhden tekstialueen takana tulisi olla vain yksi kirkas väri.

### Ovatko kirkkaat värit haitaksi saavutettavuudelle?

Eivät itsessään. Ongelma syntyy, kun kirkkaan taustan ja tekstin kontrasti jää liian pieneksi. Tarkista jokainen tekstipari WCAG-vaatimuksia vasten ja pidä leipäteksti tummana tai vaaleana tukivärinä.