# Mørke fargepaletter: stemningsfulle og lesbare farger

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

Mørke paletter virker eksklusive når de består av nesten svarte nyanser med et hint av farge, og billige når de bruker rent svart med neon. Her er seks som fungerer, med alle kodene.

## The short version

- En god mørk fargepalett bygger på en nesten svart farge med en svak fargetone fremfor rent #000000.
- Tekst i en mørk palett er lettest å lese i mykt, brukket hvitt, som gir sterk kontrast uten å blende som rent hvitt.
- Aksentfarger på mørke bakgrunner bør være lysere og mindre mettede enn på hvitt, fordi sterke farger vibrerer mot svart.
- Mørke grensesnitt viser dybde ved å gjøre hevede flater litt lysere, fremfor å legge til skygger.
- Alle tekstfarger i en mørk palett må fortsatt bestå en kontrastsjekk mot flaten de faktisk ligger på.

**Mørke fargepaletter** som er lesbare, har tre deler: en nesten svart bakgrunn med et hint av farge, mykt, brukket hvitt til tekst og én eller to aksenter som er lysere og roligere enn du ville brukt på hvitt. Rent svart med mettet neon virker hardt og sliter på øynene. Tonede mørke farger med milde høylys virker gjennomtenkte og eksklusive. De seks palettene nedenfor følger denne oppskriften, med hekskoder du kan kopiere og kontrastforhold som allerede er kontrollert.

## Seks mørke fargepaletter med hekskoder

Hver palett har de samme fem rollene, fra venstre mot høyre: **bakgrunn** (siden), **flate** (kort og paneler, ett trinn lysere), **dyp** (en fyldig mellomfarge til former og store områder), **aksent** (lenker, knapper og fremhevinger) og **tekst**.

### Midnattsblekk

- Bakgrunn #0b0f1a: #0b0f1a
- Flate #151b2c: #151b2c
- Dyp marineblå #2b3a67: #2b3a67
- Gravmyrtblå #8fa3d9: #8fa3d9
- Tekst #e8e6f0: #e8e6f0

Kjølig, rolig og teknisk. Tekst mot bakgrunnen gir 15,5:1; den gravmyrtblå aksenten gir 7,7:1, nok til lenker og små etiketter.

### Skognatt

- Bakgrunn #0c1410: #0c1410
- Flate #15231c: #15231c
- Dyp furugrønn #2f5d46: #2f5d46
- Salvie #9cc5a1: #9cc5a1
- Tekst #ece7da: #ece7da

Naturlig og stille, godt egnet for velvære, friluftsliv og matmerker. Tekst 15,1:1, salvie 9,7:1.

### Okseblod og kobber

- Bakgrunn #140a0b: #140a0b
- Flate #241214: #241214
- Okseblod #6b1e26: #6b1e26
- Kobber #c9855b: #c9855b
- Tekst #f1e6dc: #f1e6dc

Varmt og fyldig, naturlig på vinkart, til teater og kveldsarrangementer. Tekst 15,9:1, kobber 6,5:1.

### Aubergine

- Bakgrunn #120b17: #120b17
- Flate #1e1326: #1e1326
- Plomme #4a2a63: #4a2a63
- Orkidé #c79ad8: #c79ad8
- Tekst #f3ecf6: #f3ecf6

Kreativt og nattlig, et mykere alternativ til neonlilla. Tekst 16,7:1, orkidé 8,3:1.

### Kull og glør

- Bakgrunn #121212: #121212
- Flate #1e1e1e: #1e1e1e
- Grafitt #3a3a3a: #3a3a3a
- Glør #ff8a3d: #ff8a3d
- Tekst #ededed: #ededed

Nøytrale gråtoner med én varm aksent, en klassiker for apper og dashbord. Tekst 16:1, glør 8:1.

### Dyp blågrønn

- Bakgrunn #071a1c: #071a1c
- Flate #0f2a2d: #0f2a2d
- Dyp blågrønn #1f5c5f: #1f5c5f
- Aqua #66c2b8: #66c2b8
- Tekst #e6f2ef: #e6f2ef

Havpreget og behersket, godt egnet for finans og helse. Tekst 15,6:1, aqua 8,5:1.

De dype fargene i hver palett er til flater, ikke ord: marineblått på midnattsbakgrunnen gir for eksempel bare rundt 1,7:1. Bruk dem til former, illustrasjoner og bakgrunner bak tekst i de lysere fargene.

## De samme palettene som mørke gradienter

Mørke paletter får liv når den dype fargen gløder frem fra bakgrunnen som lys i et dunkelt rom. Disse bruker bare kodene over, så de passer nøyaktig til de ensfargede palettene. Flere teknikker finnes i [mørke gradientbakgrunner](https://gradiently.design/nb/guide/dark-gradient-backgrounds) og [stemningsfulle gradienter](https://gradiently.design/nb/guide/moody-gradients).

- Midnattsblekk: `radial-gradient(circle at 75% 25%, #2b3a67 0%, #151b2c 40%, #0b0f1a 80%)`
- Skognatt: `radial-gradient(circle at 25% 75%, #2f5d46 0%, #15231c 45%, #0c1410 85%)`
- Okseblod: `radial-gradient(circle at 70% 70%, #6b1e26 0%, #241214 45%, #140a0b 85%)`
- Aubergine: `radial-gradient(circle at 30% 20%, #4a2a63 0%, #1e1326 45%, #120b17 85%)`
- Kull og glør: `radial-gradient(circle at 80% 80%, #ff8a3d 0%, #3a3a3a 25%, #121212 70%)`
- Dyp blågrønn: `radial-gradient(circle at 50% 0%, #1f5c5f 0%, #0f2a2d 45%, #071a1c 85%)`

Mørke gradienter får synlige fargebånd lettere enn andre. Legg til litt korn og unngå hard JPEG-komprimering ved eksport.

## Regler for lesbare mørke paletter

### Unngå

- Rent #000000 som bakgrunn
- Rent #ffffff til lange tekstpartier
- Fullt mettede aksenter som ser ut til å vibrere
- Slagskygger for å vise hvilket kort som ligger øverst
- Tynn, lett skrift i små størrelser

### Gjør heller

- Nesten svart tonet mot merkevarens fargetone
- Brukket hvitt tonet på samme måte
- Lysere, mykere varianter av aksentfargene
- Lysere flater til hevede elementer
- Normal eller middels skriftvekt og litt luftigere avstand

**Hvorfor ikke rent svart?** Svart med helt hvit tekst er den største kontrasten en skjerm kan vise, 21:1. På lyssterke skjermer kan det virke blendende, særlig i lange tekstpartier. Tonet, nesten svart med rundt 15:1 er fortsatt langt over alle tilgjengelighetsterskler og langt mer behagelig ved langvarig lesing. Det gir også paletten en temperatur, noe rent svart aldri har.

**Hvorfor roligere aksenter?** En mettet blå eller rød som ser fin ut på hvitt, virker glødende og ustø langs kantene på svart. Øk lysheten og demp metningen litt, som med gravmyrtblått og salvie over, så roer den seg. Kontroller hver aksent du bruker til tekst med en [kontrastsjekk](https://gradiently.design/nb/guide/color-contrast-accessibility).

## Slik lager du en mørk palett fra merkevarens farge

Du trenger ikke låne en av palettene over. Enhver merkevarefarge kan gjøres til en mørk palett ved å beholde fargetonen og bare endre lyshet og metning. Det fungerer best i et format som skiller disse, som [HSL](https://gradiently.design/nb/guide/hsl-colors). Her blir en korallfarge, `#e0525d`, til et komplett mørkt sett.

1. **Bakgrunn: samme fargetone, nesten ikke noe lys** Behold fargetonen, senk metningen til omtrent 30% og lysheten til omtrent 7%: `#170c0d`. Den oppfattes som svart, men føles varm.
2. **Flate: ett trinn opp** Øk lysheten til rundt 12% og senk metningen litt: `#261718`. Her ligger kort og paneler.
3. **Dyp: en fyldig mellomtone til flater** Lyshet rundt 28% gir `#68272d`, en dempet vinfarge til former og illustrasjoner, aldri til tekst.
4. **Aksent: lysere og mykere enn merkevarefargen** Løft korallfargen til omtrent 72% lyshet: `#ea868e` oppnår 7,6:1 mot bakgrunnen, mens den opprinnelige korallfargen klarer 5,1:1 og virker hardere.
5. **Tekst: brukket hvitt med et hint av fargetonen** `#f2e9e9` gir 16:1 mot bakgrunnen og passer diskret sammen med resten.

- Bakgrunn #170c0d: #170c0d
- Flate #261718: #261718
- Dyp vinrød #68272d: #68272d
- Myk korall #ea868e: #ea868e
- Tekst #f2e9e9: #f2e9e9

En mørk palett avledet fra én korallfarge. Alle fargene deler fargetone, derfor føles settet som én merkevare om natten.

## Bruke en mørk palett i CSS

Gi fargene navn etter rolle, så samme komponenter fungerer i lyse og mørke temaer. Eksemplet nedenfor definerer Midnattsblekk som mørkt tema og lar systeminnstillingen velge. [Design for mørk modus](https://gradiently.design/nb/guide/dark-mode-design) dekker de større valgene, som bilder, kantlinjer og diagrammer.

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

Aksenten endres mellom temaene: dyp marineblå på lyst, gravmyrtblå på mørkt. Én farge fungerer sjelden på begge.

## Mørke paletter til innlegg i sosiale medier

I en feed skiller et mørkt innlegg seg ut blant lyse bilder, men bare hvis ordene er lesbare på mobil. Hold skriften stor, plasser bakgrunnens lyseste del unna overskriften, og gi ordene den roligste delen av bildet.

Et mørkt, stående Instagram-innlegg om kveldsåpent galleri, med lys skrift på en dyp bakgrunn

Et mørkt, stemningsfullt innlegg der skriften ligger på bakgrunnens roligste del og lysningen holder seg unna ordene.

Her hjelper en Mark fra Gradiently: den flytter sitt roligste område med best kontrast bak teksten, og Auto-tekstfarge velger lys eller mørk skrift for hver linje fra Markens egen palett. Dermed sluker en stemningsfull bakgrunn aldri overskriften. For mørke uttrykk med et rikere, eksklusivt preg, se [luksuriøse fargepaletter](https://gradiently.design/nb/guide/luxury-color-palettes) og [dark academia](https://gradiently.design/nb/guide/dark-academia-aesthetic).

## FAQ

### Hvilke farger inngår i en mørk fargepalett?

Tonet, nesten svart til bakgrunnen, en litt lysere flatefarge, én dyp mellomfarge til store områder, en lysere aksent og mykt, brukket hvitt til tekst.

### Bør jeg bruke rent svart i mørk modus?

Vanligvis ikke. Nesten svart som #121212 eller en tonet mørk farge som #0b0f1a demper blending fra hvit tekst og gir fortsatt svært høy kontrast.

### Hvilken tekstfarge fungerer best på mørk bakgrunn?

Mykt, brukket hvitt som #e8e6f0 eller #ededed. Det holder kontrasten rundt 15:1 eller mer uten hardheten i rent hvitt.

### Hvorfor ser sterke farger feil ut på mørk bakgrunn?

Mettede farger ser ut til å vibrere mot svart. Bruk lysere, litt mindre mettede varianter som aksenter på mørke bakgrunner.