Tummat väripaletit: tunnelmalliset ja luettavat värit

Luettavat tummat väripaletit sisältävät kolme osaa: lähes mustan, hieman värillisen pohjan, pehmeän luonnonvalkoisen tekstille ja yhden tai kaksi valkoisella käytettäviä vaaleampaa ja rauhallisempaa korostusta. Puhdas musta kylläisellä neonilla näyttää kovalta ja väsyttää silmiä. Sävytetyt tummat ja lempeät valot näyttävät harkituilta ja arvokkailta. Alla olevat kuusi palettia seuraavat tätä reseptiä. Heksakoodit voi kopioida, ja kontrastisuhteet on jo tarkistettu.

Kuusi tummaa väripalettia heksakoodeilla

Jokaisessa paletissa on samat viisi roolia vasemmalta oikealle: pohja eli sivu, pinta eli hieman vaaleammat kortit ja paneelit, syvä eli täyteläinen keskiväri muodoille ja suurille alueille, korostus linkeille, painikkeille ja huomioille sekä teksti.

Keskiyön muste

Metsäyö

Häränveri ja kupari

Munakoiso

Hiili ja hiillos

Syvä petrooli

Palettien syvät värit ovat alueille, eivät sanoille. Esimerkiksi laivastonsininen keskiyön pohjalla on vain noin 1,7:1. Käytä niitä muotoihin, kuvituksiin ja taustoihin vaaleampien tekstivärien takana.

Samat paletit tummina liukuväreinä

Tummat paletit heräävät eloon, kun syvä väri hohtaa pohjasta kuin valo hämärässä huoneessa. Näissä käytetään vain yllä olevia koodeja, joten ne vastaavat tasaisia paletteja täsmälleen. Lisää tapoja löytyy tummista liukuväritaustoista ja tunnelmallisista liukuväreistä.

Luettavan tumman paletin säännöt

Miksi ei puhdasta mustaa? Musta ja puhdas valkoinen teksti tuottavat näytön enimmäiskontrastin 21:1. Kirkkailla näytöillä se voi tuntua häikäisevältä varsinkin pitkissä teksteissä. Sävytetty lähes musta noin suhteella 15:1 ylittää silti kaikki saavutettavuusrajat ja on miellyttävämpi pitkässä lukemisessa. Se antaa paletille myös lämpötilan, jota puhtaalla mustalla ei ole.

Miksi rauhallisemmat korostukset? Valkoisella hyvältä näyttävä kylläinen sininen tai punainen näyttää mustalla hohtavan ja huojuvan reunoistaan. Nosta valoisuutta ja vähennä kylläisyyttä hieman, kuten yllä talviossa ja salviassa, niin väri asettuu paikalleen. Tarkista kaikki tekstikorostuksesi kontrastintarkistimella.

Tumma paletti brändiväristäsi

Sinun ei tarvitse lainata yllä olevaa palettia. Minkä tahansa brändivärin voi muuttaa tummaksi paletiksi säilyttämällä sävyn ja muuttamalla vain valoisuutta ja kylläisyyttä. Se toimii parhaiten nämä erottavassa muodossa, kuten HSL:ssä. Tässä korallinen brändiväri #e0525d muuttuu kokonaiseksi tummaksi sarjaksi.

1. 1

   Pohja: sama sävy, lähes ei valoa

   Säilytä sävy, laske kylläisyys noin 30 prosenttiin ja valoisuus noin 7 prosenttiin: #170c0d. Se näyttää mustalta mutta tuntuu lämpimältä.

2. 2

   Pinta: askel vaaleammaksi

   Nosta valoisuus noin 12 prosenttiin ja laske kylläisyyttä hieman: #261718. Kortit ja paneelit tulevat tähän.

3. 3

   Syvä: täyteläinen keskisävy alueille

   Noin 28 prosentin valoisuus antaa värin #68272d, hillityn viinisävyn muodoille ja kuvitukselle, ei tekstille.

4. 4

   Korostus: brändiväriä vaaleampi ja pehmeämpi

   Nosta koralli noin 72 prosentin valoisuuteen: #ea868e saavuttaa pohjalla 7,6:1, kun alkuperäinen koralli yltää suhteeseen 5,1:1 ja näyttää kovemmalta.

5. 5

   Teksti: luonnonvalkoinen sävyn häivähdyksellä

   #f2e9e9 antaa pohjalla 16:1 ja sopii hiljaisesti kaikkeen muuhun.

Tumman paletin käyttö CSS:ssä

Nimeä värit roolin mukaan, niin samat komponentit toimivat vaaleissa ja tummissa teemoissa. Alla oleva malli määrittää Keskiyön musteen tummaksi teemaksi ja antaa järjestelmäasetuksen valita. Tumman tilan suunnittelu käsittelee laajempia päätöksiä, kuten kuvia, reunuksia ja kaavioita.

:root {
  color-scheme: light dark;
  --ground:  #f7f7fb;
  --surface: #ffffff;
  --text:    #151b2c;
  --accent:  #2b3a67;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:  #0b0f1a;
    --surface: #151b2c;
    --text:    #e8e6f0;
    --accent:  #8fa3d9;
  }
}

body { background: var(--ground); color: var(--text); }
.card { background: var(--surface); }
a { color: var(--accent); }

Tummat paletit somejulkaisuissa

Tumma julkaisu erottuu kirkkaista syötekuvista vain, jos sanat näkyvät puhelinkoossa. Pidä teksti suurena, kirkkaimmat tausta-alueet poissa otsikosta ja anna sanoille kuvan rauhallisin osa.

Tässä Gradientlyn Mark auttaa: se siirtää rauhallisimman, parhaiten kontrastoivan alueensa tekstin taakse. Automaattinen muste valitsee jokaiselle riville vaalean tai tumman värin Markin omasta paletista, joten tunnelmallinen tausta ei nielaise otsikkoa. Täyteläisemmistä arvokkaista tummista ilmeistä kertovat luksusväripaletit ja dark academia -estetiikka.