Värin vaalentaminen ja tummentaminen: rakenna väriasteikko

Värin vaalentaminen ja tummentaminen sekä harmaalla sekoittaminen ovat kolme tapaa muuttaa väriä vaihtamatta sen varsinaista värisävyä. Vaalennus, englanniksi tint, syntyy valkoisesta ja tekee väristä vaaleamman ja pehmeämmän. Tummennus, shade, syntyy mustasta ja syventää väriä. Harmaasekoitus, tone, syntyy harmaasta ja tekee väristä rauhallisemman ja hillitymmän. Ajattele siis valkoisen, harmaan ja mustan lisäämistä yhteen värisävyyn. Kun asetat vaalennukset ja tummennukset järjestykseen, saat väriasteikon: työkalun, joka tekee yhdestä brändiväristä käyttökelpoisen suunnitteluun.

Vaalennus, harmaasekoitus ja tummennus rinnakkain

Eron näkee helpoimmin aloittamalla yhdestä väristä ja muuttamalla sitä kolmeen suuntaan. Tässä pohjana on violetti #7c3aed, jota sekoitetaan 20 prosentin askelin.

Miten värimuunnokset vaikuttavat suunnitelmaan

Jokainen suunta muuttaa tunnelmaa yhtä paljon kuin väriä. Vaalennukset tuntuvat lempeiltä, nuorekkailta ja avoimilta, minkä vuoksi pastelliväripaletit ovat enimmäkseen vaalennuksia. Tummennukset tuntuvat täyteläisiltä, vakavilta ja arvokkailta: ne ovat tummien väripalettien aluetta. Harmaasekoitukset tuntuvat kypsiltä ja luonnollisilta ja ovat lähes jokaisen hillityn väripaletin perusta.

Väriasteikon rakentaminen yhdestä hex-arvosta

Useimmat designjärjestelmät numeroivat asteikon 50:stä tai 100:sta eli vaaleimmasta 900:aan eli tummimpaan. Brändiväri on yleensä lähellä 500:aa. Johdonmukaisuus on numeroita tärkeämpää: järjestelmän kaikilla väreillä pitäisi olla samat askeleet, jotta 200 tarkoittaa aina vaaleaa taustaa ja 700 tekstiä. Viisi hyvin valittua askelta on parempi kuin yksitoista, joita kukaan ei erota toisistaan. Lisää väliaskeleita, kun oikeat suunnitelmat näyttävät niiden tarpeen.

1. 1

   Sijoita brändivärisi

   Päätä, mille askeleelle se kuuluu. Keskisävy, kuten #7c3aed, asettuu 500:aan; hyvin tumma brändin laivastonsininen voi olla 800:ssa.

2. 2

   Tee vaalea pää

   Sekoita valkoiseen askeleesta 400 alaspäin 50:een. Vaaleimmassa askeleessa pitäisi olla tuskin väriä, jotta se sopii sivun taustaksi.

3. 3

   Tee tumma pää

   Sekoita mustaan askeleesta 600 ylöspäin 900:aan. Tummimman askeleen pitää olla riittävän tumma leipätekstiksi vaaleimman päällä.

4. 4

   Tasaa askelten erot

   Katso riviä kauempaa. Jos kaksi vierekkäistä väriä ovat lähes samoja ja toinen väli näyttää hypyltä, säädä niitä silmämääräisesti.

5. 5

   Siirrä värisävyä hieman päissä

   Puhdas musta voi tehdä tummennuksista likaisia. Monet suunnittelijat siirtävät tummia askelia muutaman asteen siniseen tai violettiin ja vaaleita lämpimään suuntaan.

6. 6

   Tarkista kohtaavat parit

   Testaa tekstiaskeleiden kontrasti tausta-askeleilla värikontrastin ja saavutettavuuden ohjeen avulla.

Tee vaalennukset ja tummennukset CSS:llä

Jokaista askelta ei enää tarvitse laskea käsin. CSS:n color-mix() sekoittaa kaksi väriä valitussa väriavaruudessa, joten koko asteikko voi seurata yhtä muuttujaa. OKLCH-sekoitus pitää askeleet silmälle tasaisempina kuin tavallinen sRGB, kuten OKLCH-opas kertoo. Selaintuki on laaja; tarkista yksityiskohdat MDN:n color-mix()-ohjeesta.

:root {
  --brand: #7c3aed;

  /* Tints: mix with white */
  --brand-100: color-mix(in oklch, var(--brand) 20%, white);
  --brand-300: color-mix(in oklch, var(--brand) 60%, white);

  /* Shades: mix with black */
  --brand-700: color-mix(in oklch, var(--brand) 60%, black);
  --brand-900: color-mix(in oklch, var(--brand) 25%, black);

  /* Tone: mix with grey */
  --brand-muted: color-mix(in oklch, var(--brand) 50%, grey);
}

Vaalennukset ja tummennukset liukuväreissä

Puhtaimmat liukuvärit ovat usein vain yksi värisävy, joka etenee vaalennuksesta tummennukseen. Koska väri ei kulje väriympyrän poikki, keskelle ei synny harmaata kaistaa. Tulos näyttää yhdelle materiaalille lankeavalta valolta. Yksiväriset värijärjestelmät soveltavat samaa ajatusta kokonaisiin paletteihin.

Gradientlyn Mark toimii samalla tavoin: toisiinsa liittyvien värien reseptinä, jonka läpi valo kulkee. Kun suunnittelet sillä, värit sanojen lähellä tummenevat tai vaalenevat, jotta teksti pysyy luettavana ilman laatikkoa takanaan.