Kirkkaat väripaletit, joiden teksti pysyy luettavana

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.

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. Pelkältä sävyltään eroavat kirkkaat värit voivat näyttää joillekin samoilta.

Kuusi kirkasta väripalettia heksakoodeineen

• 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. 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. 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. 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. 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ö auttaa: tukiväriä 60, pääväriä 30 ja korostuksia 10.

5. 5

   Tarkista puhelimella ulkona

   Kirkkaat värit haalistuvat auringonvalossa ja himmeillä näytöillä. Jos sanat erottuvat himmennetyllä puhelimella, paletti toimii.

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 selittää eron.

Katso lisää yhdistelmiä artikkeleista voimakkaat liukuvärit ja neonliukuvärit. Kattavat kontrastiohjeet saat artikkelista värikontrasti.

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 kertoo, mitä voit odottaa.