# Tummat väripaletit: tunnelmalliset ja luettavat värit

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

Tummat paletit näyttävät arvokkailta, kun lähes mustassa on häivähdys väriä, ja halvoilta puhtaalla mustalla ja neonilla. Tässä kuusi toimivaa vaihtoehtoa koodeineen.

## The short version

- Hyvä tumma väripaletti rakentuu hieman sävytetylle lähes mustalle puhtaan #000000-värin sijaan.
- Tumman paletin teksti erottuu parhaiten pehmeänä luonnonvalkoisena, joka säilyttää vahvan kontrastin ilman puhtaan valkoisen häikäisyä.
- Tummalla pohjalla korostusvärien pitää olla vaaleampia ja vähemmän kylläisiä kuin valkoisella, koska kirkkaat värit värisevät mustaa vasten.
- Tumma käyttöliittymä näyttää syvyyden vaalentamalla kohotettuja pintoja hieman, ei lisäämällä varjoja.
- Tummankin paletin jokaisen tekstivärin täytyy läpäistä kontrastintarkistus sitä todellista pintaa vasten, jolla teksti sijaitsee.

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

- Pohja #0b0f1a: #0b0f1a
- Pinta #151b2c: #151b2c
- Syvä laivastonsininen #2b3a67: #2b3a67
- Talvio #8fa3d9: #8fa3d9
- Teksti #e8e6f0: #e8e6f0

Viileä, rauhallinen ja tekninen. Teksti pohjalla on 15,5:1 ja talviokorostus 7,7:1, mikä riittää linkkeihin ja pieniin tunnisteisiin.

### Metsäyö

- Pohja #0c1410: #0c1410
- Pinta #15231c: #15231c
- Syvä mänty #2f5d46: #2f5d46
- Salvia #9cc5a1: #9cc5a1
- Teksti #ece7da: #ece7da

Luonnollinen ja hiljainen, sopii hyvinvointi-, ulkoilu- ja ruokabrändeille. Teksti 15,1:1, salvia 9,7:1.

### Häränveri ja kupari

- Pohja #140a0b: #140a0b
- Pinta #241214: #241214
- Häränveri #6b1e26: #6b1e26
- Kupari #c9855b: #c9855b
- Teksti #f1e6dc: #f1e6dc

Lämmin ja täyteläinen, sopii viinilistoihin, teatteriin ja iltatapahtumiin. Teksti 15,9:1, kupari 6,5:1.

### Munakoiso

- Pohja #120b17: #120b17
- Pinta #1e1326: #1e1326
- Luumu #4a2a63: #4a2a63
- Orkidea #c79ad8: #c79ad8
- Teksti #f3ecf6: #f3ecf6

Luova ja yöllinen, neonvioletin pehmeämpi vaihtoehto. Teksti 16,7:1, orkidea 8,3:1.

### Hiili ja hiillos

- Pohja #121212: #121212
- Pinta #1e1e1e: #1e1e1e
- Grafiitti #3a3a3a: #3a3a3a
- Hiillos #ff8a3d: #ff8a3d
- Teksti #ededed: #ededed

Neutraalit harmaat ja yksi kuuma korostus, klassikko sovelluksiin ja hallintapaneeleihin. Teksti 16:1, hiillos 8:1.

### Syvä petrooli

- Pohja #071a1c: #071a1c
- Pinta #0f2a2d: #0f2a2d
- Syvä petrooli #1f5c5f: #1f5c5f
- Aqua #66c2b8: #66c2b8
- Teksti #e6f2ef: #e6f2ef

Merellinen ja vakaa, sopii talouteen ja terveyteen. Teksti 15,6:1, aqua 8,5:1.

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](https://gradiently.design/fi/guide/dark-gradient-backgrounds) ja [tunnelmallisista liukuväreistä](https://gradiently.design/fi/guide/moody-gradients).

- Keskiyön muste: `radial-gradient(circle at 75% 25%, #2b3a67 0%, #151b2c 40%, #0b0f1a 80%)`
- Metsäyö: `radial-gradient(circle at 25% 75%, #2f5d46 0%, #15231c 45%, #0c1410 85%)`
- Häränveri: `radial-gradient(circle at 70% 70%, #6b1e26 0%, #241214 45%, #140a0b 85%)`
- Munakoiso: `radial-gradient(circle at 30% 20%, #4a2a63 0%, #1e1326 45%, #120b17 85%)`
- Hiili ja hiillos: `radial-gradient(circle at 80% 80%, #ff8a3d 0%, #3a3a3a 25%, #121212 70%)`
- Syvä petrooli: `radial-gradient(circle at 50% 0%, #1f5c5f 0%, #0f2a2d 45%, #071a1c 85%)`

Tummat liukuvärit raidoittuvat muita helpommin. Lisää hieman rakeisuutta ja vältä voimakasta JPEG-pakkausta viennissä.

## Luettavan tumman paletin säännöt

### Vältä

- Puhdas #000000 pohjana
- Puhdas #ffffff pitkiin tekstijaksoihin
- Täysin kylläiset, värisevät korostukset
- Heittovarjot näyttämässä korttien järjestystä
- Ohuet, kevyet fontit pienessä koossa

### Tee näin

- Lähes musta sävytettynä brändisi väriin
- Samalla tavalla sävytetty luonnonvalkoinen
- Vaaleammat, pehmeämmät korostusvärien versiot
- Vaaleammat pinnat kohotetuille elementeille
- Normaali tai medium-leikkaus ja hieman väljempi välistys

**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](https://gradiently.design/fi/guide/color-contrast-accessibility).

## 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ä](https://gradiently.design/fi/guide/hsl-colors). Tässä korallinen brändiväri `#e0525d` muuttuu kokonaiseksi tummaksi sarjaksi.

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. **Pinta: askel vaaleammaksi** Nosta valoisuus noin 12 prosenttiin ja laske kylläisyyttä hieman: `#261718`. Kortit ja paneelit tulevat tähän.
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. **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. **Teksti: luonnonvalkoinen sävyn häivähdyksellä** `#f2e9e9` antaa pohjalla 16:1 ja sopii hiljaisesti kaikkeen muuhun.

- Pohja #170c0d: #170c0d
- Pinta #261718: #261718
- Syvä viini #68272d: #68272d
- Pehmeä koralli #ea868e: #ea868e
- Teksti #f2e9e9: #f2e9e9

Yhdestä korallista johdettu tumma paletti. Kaikki jakavat saman sävyn, joten kokonaisuus tuntuu yhden brändin yöversiolta.

## 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](https://gradiently.design/fi/guide/dark-mode-design) käsittelee laajempia päätöksiä, kuten kuvia, reunuksia ja kaavioita.

```css
: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); }
```

Korostus vaihtuu teemojen välillä: syvä laivastonsininen vaalealla, talvio tummalla. Yksi väri toimii harvoin molemmissa.

## 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.

Tumma Instagramin pystyjulkaisu gallerian myöhäisestä aukiolosta, vaalea teksti syvällä taustalla

Tumma tunnelmallinen julkaisu, jossa teksti on taustan rauhallisimmassa osassa ja hohde poissa sanojen läheltä.

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](https://gradiently.design/fi/guide/luxury-color-palettes) ja [dark academia -estetiikka](https://gradiently.design/fi/guide/dark-academia-aesthetic).

## FAQ

### Mitä värejä tummaan väripalettiin kuuluu?

Sävytetty lähes musta pohjalle, hieman vaaleampi pintaväri, yksi syvä keskiväri suurille alueille, vaaleampi korostus ja pehmeä luonnonvalkoinen tekstille.

### Kannattaako tummassa tilassa käyttää puhdasta mustaa?

Yleensä ei. Lähes musta kuten #121212 tai sävytetty tumma kuten #0b0f1a vähentää valkoisen tekstin häikäisyä ja säilyttää hyvin korkean kontrastin.

### Mikä tekstiväri toimii parhaiten tummalla pohjalla?

Pehmeä luonnonvalkoinen, kuten #e8e6f0 tai #ededed. Se pitää kontrastin noin suhteessa 15:1 tai korkeammalla ilman puhtaan valkoisen kovuutta.

### Miksi kirkkaat värit näyttävät vääriltä tummalla pohjalla?

Kylläiset värit tuntuvat värisevän mustaa vasten. Käytä tummalla korostuksina vaaleampia, hieman vähemmän kylläisiä versioita.