# Korostusväri: näin valitset toimivan sävyn

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

Korostus on paletin pienin osa ja ensimmäinen, jonka huomaat. Valitse pohjasta erottuva sävy, käytä sitä tarpeeksi harvoin ja määritä se CSS:ssä.

## The short version

- Korostusväri on erottuva sävy, jota käytetään pieninä määrinä ohjaamaan huomio tärkeimpään elementtiin, kuten painikkeeseen, hintaan tai otsikon sanaan.
- 60 30 10 -säännössä korostus on kymmenen prosenttia. Sen harvinaisuus tekee siitä tehokkaan.
- Hyvä korostus eroaa pohjaväreistä selvästi ainakin sävyltään, vaaleudeltaan tai kylläisyydeltään.
- Moniin eri tehtäviin käytetty korostus menettää merkityksensä, joten anna sille yksi päärooli.
- CSS:n accent-color-ominaisuus värjää selaimen omat valintaruudut, valintanapit, liukusäätimet ja edistymispalkit.

**Korostusväri** on paletin pieni, erottuva sävy, joka osoittaa tärkeän asian: painettavan painikkeen, hinnan tai yhden sanan otsikossa. Aloita pohjaväreistä ja valitse niistä selvästi sävyltään, vaaleudeltaan tai kylläisyydeltään eroava väri. Käytä sitä säästeliäästi. Tutussa 60 30 10 -jaossa se on kymmenen prosenttia. Mitä harvemmin väri näkyy, sitä enemmän jokainen esiintyminen merkitsee.

## Mihin korostusväriä tarvitaan

Suurin osa suunnitelmasta on pohja- ja tukivärejä: taustoja, paneeleja ja tekstiä. Korostus on poikkeus, joka kertoo katseelle suunnan. Siksi se on palettisi toiminnallisin väri. Verkkosivulla se merkitsee ensisijaisen toiminnon, julisteessa päivämäärän. Brändissä siitä tulee muistettava yksityiskohta, kuten värillinen piste tai yksi kirkas raita.

[60 30 10 -sääntö](https://gradiently.design/fi/guide/60-30-10-rule) antaa mittasuhteet: noin kuusikymmentä prosenttia hallitsevaa väriä, kolmekymmentä toissijaista ja kymmenen korostusta. Pidä kymmentä ylärajana, älä tavoitteena. Monet parhaista asetteluista käyttävät paljon vähemmän.

Pystyjulkaisu perjantain myöhäisestä aukiolosta, otsikon yläpuolella pieni merkintä

Tällaisessa julkaisussa korostus kuuluu yhteen paikkaan, kuten otsikon pieneen ylämerkintään, eikä muualle.

Työpajan pystyjulkaisu otsikolla Kolme mukaan otettavaa asiaa

Sama periaate listajulkaisussa: jos korostusta käytetään, se merkitsee vain otsikon.

## Korostusvärin valinta

Kontrasti on koko tehtävä. Katso pohja- ja tukivärejäsi. Selvitä, mikä niitä yhdistää, ja tee korostuksesta selvästi erilainen ainakin yhdellä tavalla.

1. **Sävykontrasti** Valitse [väriympyrän](https://gradiently.design/fi/guide/color-wheel) vastakkaiselta puolelta. Laivastonsininen ja sinivihreä paletti kaipaavat lämpimiä korostuksia, kuten korallia tai meripihkaa. Lämmin paletti kaipaa sinistä tai vihreää. [Vastavärit](https://gradiently.design/fi/guide/complementary-colors) ovat klassinen valinta.
2. **Vaaleuskontrasti** Tummalle pohjalle vaalea korostus, vaalealle syvä. Hillitty harmaapaletti voi käyttää korostuksena mustaa yhtä hyvin kuin kirkasta väriä.
3. **Kylläisyyskontrasti** Pehmeiden, pölyisten värien joukossa yksi kylläinen väri toimii korostuksena, vaikka sen sävy olisi sama. Hyvä esimerkki on savipaletti ja puhdas vermilionkorostus.
4. **Testaa oikeassa koossa** Korostus on yleensä pieni. Tarkista se painikkeen tekstinä tai ohuena alleviivausviivana, älä suurena värilaatikkona. Pienet värialueet näyttävät tummemmilta ja himmeämmiltä.

- Laivastonsininen ja koralli: `linear-gradient(90deg, #12233d 0%, #12233d 70%, #2e4a6b 70%, #2e4a6b 90%, #ff7a59 90%, #ff7a59 100%)`
- Hiekanvärinen ja syvänsininen: `linear-gradient(90deg, #f3ece2 0%, #f3ece2 70%, #c9b49a 70%, #c9b49a 90%, #1f3a5f 90%, #1f3a5f 100%)`
- Metsänvihreä ja sahrami: `linear-gradient(90deg, #1b2a24 0%, #1b2a24 70%, #3f5a4c 70%, #3f5a4c 90%, #f2c14e 90%, #f2c14e 100%)`
- Lilanharmaa ja punainen: `linear-gradient(90deg, #e9e4ea 0%, #e9e4ea 70%, #b9aebf 70%, #b9aebf 90%, #d42a35 90%, #d42a35 100%)`
- Musta ja lime: `linear-gradient(90deg, #111111 0%, #111111 70%, #3a3a3a 70%, #3a3a3a 90%, #c6f432 90%, #c6f432 100%)`
- Puuteripinkki ja hiilenharmaa: `linear-gradient(90deg, #f7f1ea 0%, #f7f1ea 70%, #e7c9bd 70%, #e7c9bd 90%, #2b2b2b 90%, #2b2b2b 100%)`

Kuusi palettia suunnilleen suhteessa 70, 20 ja 10 prosenttia. Jokainen korostus eroaa pohjastaan sävyltään, vaaleudeltaan tai molemmilta.

## Missä korostusta kannattaa käyttää ja missä välttää

| Käytä tähän | Jätä pois täältä |
| --- | --- |
| Ensisijainen painike tai toimintakehote | Toissijaiset ja peruutuspainikkeet |
| Yksi avainsana, hinta tai päivämäärä | Kokonaiset leipätekstikappaleet |
| Aktiiviset tilat: nykyinen välilehti tai valittu kohde | Jokainen työkalupalkin kuvake |
| Pienet brändiyksityiskohdat: viiva, piste tai tarra | Suuret taustat pitkän tekstin alla |
| Kaavion tärkeimmän sarjan korostus | Kaikki kaavion sarjat yhtä aikaa |

Yhden päätehtävän korostus säilyttää merkityksensä. Kun sitä on kaikkialla, mikään ei erotu.

> **Korostus ei ole virheväri** Jos korostuksesi on punainen, mieti sen suhdetta virheilmoituksiin. Käyttäjä voi tulkita punaisen painikkeen tuhoavaksi. Osa punaista käyttävistä brändeistä valitsee virheille toisen punaisen sävyn tai näyttää virheen värin lisäksi kuvakkeella ja tekstillä.

Kirkkaat korostukset, kuten lime, keltainen ja minttu, eivät usein toimi tekstinä valkoisella. Käytä niitä täyttöväreinä tumman tekstin alla. Tarkista parit [värikontrastin](https://gradiently.design/fi/guide/color-contrast-accessibility) ohjeista: vähintään 4,5:1 leipätekstille ja 3:1 suurelle tekstille sekä käyttöliittymän osille.

Pikainen tarkistus auttaa, jos korostus on levinnyt kaikkialle. Ota kuvakaappaus etusivusta tai viikon julkaisuista, sumenna sitä hieman ja katso, missä korostus näkyy. Jos katse osuu kolmeen tai neljään paikkaan yhtä aikaa, vaihda kaikki tärkeintä lukuun ottamatta tukiväriksi. Jos katse ei osu mihinkään, korostus on todennäköisesti liian lähellä pohjaa ja tarvitsee lisää sävy- tai vaaleuskontrastia.

## CSS:n accent-color-ominaisuus

Verkossa `accent-color` värjää selaimen omat lomakesäätimet yhdellä rivillä: valintaruudut, valintanapit, liukusäätimet ja edistymispalkit. Suurten selainten nykyversiot tukevat sitä. [MDN:n viite](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) kertoo yksityiskohdat.

```css
:root {
  --accent: #d42a35;
}

/* Native checkboxes, radios, sliders and progress bars */
body {
  accent-color: var(--accent);
}

/* The same accent on your own components */
.button-primary {
  background: var(--accent);
  color: #ffffff;
}

a {
  color: #b3202a; /* a deeper shade for text links on white */
}
```

Yksi korostustoken lomakesäätimille ja ensisijaiselle painikkeelle. Tekstilinkeissä käytetään syvempää sävyä, jotta kontrasti riittää valkoisella.

Selain voi muuttaa säätimen sisäisen rastin tai kahvan väriä, jotta se erottuu korostuksestasi. Testaa siksi sekä vaaleita että tummia korostuksia. Sivuston muista väreistä kertoo [verkkosivun värimaailma](https://gradiently.design/fi/guide/website-color-scheme).

## Korostukset liukuväreissä ja valokuvissa

Runsaalla taustalla korostus kilpailee useamman asian kanssa. Valitse se taustan väriperheen ulkopuolelta: lämmin korostus viileälle liukuvärille tai lähes valkoinen värikkäälle. Gradientlyn Automaattinen muste valitsee jokaiselle riville vaalean tai tumman tekstin Markin omasta paletista. Sanat pysyvät luettavina taustan liikkuessa, ja korostus voi keskittyä yhteen tehtäväänsä. Yhden vahvan värin ympärille rakennetuista paleteista kertoo [teknologiabrändien väripaletit](https://gradiently.design/fi/guide/tech-color-palettes).

## FAQ

### Mitä korostusväri tarkoittaa suunnittelussa?

Pieninä määrinä käytettyä erottuvaa väriä, joka ohjaa huomion tärkeimpään elementtiin, kuten painikkeeseen, avainsanaan tai hintaan.

### Kuinka suuren osan suunnitelmasta pitää olla korostusväriä?

60 30 10 -säännön mukaan enintään noin kymmenen prosenttia. Monet vahvat suunnitelmat käyttävät paljon vähemmän.

### Miten valitsen korostusvärin palettiini?

Valitse selvästi pohjaväreistä sävyltään, vaaleudeltaan tai kylläisyydeltään eroava väri. Testaa se sitten pienessä koossa, jossa se oikeasti esiintyy.

### Mitä accent-color tekee CSS:ssä?

Se määrää selaimen omien valintaruutujen, valintanappien, liukusäätimien ja edistymispalkkien sävyn. Lomakesäätimet sopivat brändiin ilman omaa tyylittelyä.

### Voiko brändillä olla useampi korostusväri?

Voi, mutta jokaisella pitää olla oma tehtävänsä, esimerkiksi yksi toiminnoille ja toinen nostoille. Samaa tehtävää hoitavat kaksi korostusta kumoavat toisensa.