Hillityt väripaletit: pölyiset koodit rauhallisille brändeille

Hillitty väripaletti on värejä, joiden kylläisyyttä on vähennetty. Ne näyttävät pölyisiltä, pehmeiltä ja hieman harmailta puhtaiden sijaan. Tavallisia ovat salvia #9CAF88, pölyinen roosa #C9A9A6, liuskekivensininen #6B7F99, malva #B48A9B ja savi #B5826B. Ne sopivat rauhallisuutta ja harkintaa tavoitteleville brändeille: keramiikkaan, hyvinvointiin, paperituotteisiin, arkkitehtuuriin ja hitaaseen muotiin. Hillityt värit kuitenkin ajautuvat samaan vaaleuteen. Siksi hyvä paletti sisältää yhden jämäkän tumman värin pitämään sen koossa.

Mikä tekee väristä hillityn

Värillä on kolme asetusta: sävy, kylläisyys ja vaaleus. Katso sävy, kylläisyys ja kirkkaus. Hillitseminen vähentää kylläisyyttä mutta säilyttää tunnistettavan sävyn. Klassisia keinoja on kaksi: harmaan sekoittaminen, jota suunnittelijat kutsuvat harmaannukseksi, tai pieni määrä vastaväriä, kuten maalarit ovat aina tehneet. Molemmat vievät väriä kohti neutraalia.

Hillitty ei ole sama kuin pastelli. Pastelliin lisätään valkoista, joten se pysyy puhtaana ja vaaleana. Hillittyyn väriin lisätään harmaata, joten se voi olla vaalea, keskivaalea tai tumma ja tuntuu aina hieman pölyiseltä. Pastelliväripaletit ja vaalennukset, harmaannukset ja tummennukset avaavat eroa tarkemmin.

Seitsemän hillittyä väripalettia heksakoodeineen

• Satama: sumu #E6E9EA, liuskekivensininen #6B7F99, merenharmaa #93A3A6, köysi #C2AD8E, syvä laivastonsininen #22303C.
• Keramiikka: posliini #F1E8DD, savi #B5826B, tuhkalasite #A7A39A, rauta #5B4A42, uuninmusta #231D1A.
• Laventelipöly: usva #F1EBE6, malva #B48A9B, kanerva #8E8AA6, salvia #9CAF88, munakoiso #4A3F4F.
• Oliivilehto: kerma #F2EDE1, oliivi #8A8A5C, kuivattu yrtti #B1A87F, terrakotta #A9674E, kaarna #3A3328.
• Pohjola: lumi #F2F3F1, koivu #D8D1C4, jäkälä #A3AE9D, vuono #5F7A80, mänty #24302E.
• Pölyinen hämärä: pergamentti #EFE6DA, persikkapöly #D9A88F, ruusunruskea #A06F6B, luumunharmaa #6E5866, yö #2A2329.

Jokainen päättyy tummaan väriin. Se ei ole koriste. Ilman sitä ei ole tekstiväriä tai reunaa piirtävää sävyä, ja paletti näyttää aurinkoon jätetyltä valokuvalta.

Miksi hillityt paletit muuttuvat sumuksi

Hillitseminen poistaa värien vahvimmat erot, joten vain vaaleus jää erottamaan niitä. Salvia #9CAF88 ja pölyinen roosa #C9A9A6 näyttävät kauniilta vihreän ja vaaleanpunaisen kontrastilta, mutta kontrastisuhde on 1,09:1. Ne ovat lähes yhtä vaaleita. Toisen värinen teksti toisen päällä on lukukelvotonta. Jopa salvia puhtaalla valkoisella yltää vain suhteeseen 2,36:1.

Tarkista omat parisi värikontrastin ohjeilla. Hyvä tapa on muuttaa paletti hetkeksi harmaasävyiseksi: jos kahdesta väristä tulee sama harmaa, älä koskaan aseta toista toisen päälle.

Minkä tahansa värin hillitseminen CSS:llä

Jos sinulla on kirkas brändiväri ja haluat rauhallisemman kumppanin, sekoita siihen harmaata uuden värin silmämääräisen valinnan sijaan. color-mix() oklch-väriavaruudessa pitää sävyn vakaana kylläisyyden laskiessa. Kaikki nykyiset suuret selaimet tukevat sitä.

:root {
  --brand: #2f6bff;

  /* the same hue, progressively muted */
  --brand-muted-1: color-mix(in oklch, var(--brand) 70%, #8c8c8c);
  --brand-muted-2: color-mix(in oklch, var(--brand) 45%, #8c8c8c);
  --brand-muted-3: color-mix(in oklch, var(--brand) 25%, #8c8c8c);

  /* or set chroma directly in oklch: low chroma reads as muted */
  --slate: oklch(0.58 0.05 255);
  --sage: oklch(0.72 0.06 130);
}

OKLCH selitettynä kertoo, miksi tämä avaruus käyttäytyy HSL:ää tasaisemmin. Kylläisyys suunnittelussa kertoo, milloin sitä kannattaa taas lisätä.

Hillityt liukuvärit ja taustat

Hillityistä väreistä syntyy pehmeitä, rauhallisia liukuvärejä etenkin lähekkäisillä sävyillä ja yhdeltä puolelta tulevalla valolla. Lisää hieman rakeisuutta: vähäkontrastiset häivytykset raidoittuvat helposti, ja tekstuuri saa ne näyttämään pinnalta näyttöasetuksen sijaan.

Hillittyyn värimaailmaan voi lisätä yhden hieman vahvemman korostuksen, kuten terrakotan salvioiden joukkoon tai syvemmän petroolin harmaiden keskelle. Käytä sitä vain yhdessä osassa: hinnassa, painikkeessa tai päivämäärässä. Katse saa kiintopisteen rikkomatta rauhaa. Näin toimivat yleensä maanläheiset väripaletit, joista hillityt värimaailmat lainaavat.

Jos brändisi elää hillityissä väreissä, omalla rakeisuudella ja valolla varustettu tausta tekee paljon työtä. Gradientlyn Mark antaa pehmeän, erottuvan pinnan, joka pitää tekstin itse luettavana. Hillityssä värimaailmassa se merkitsee enemmän kuin missään muussa.