# Mørke farvepaletter: stemningsfulde koder, der stadig kan læses

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

Mørke paletter ser dyre ud, når de er lavet af næsten sort med et spor af farve, og billige ud, når de er ren sort med neon. Her er seks, der gør det rigtigt, med hver kode.

## The short version

- En god mørk farvepalet er bygget på et næsten sort med et let strejf af farve frem for ren #000000.
- Tekst på en mørk palet læses bedst i et blødt råhvidt, som bevarer stærk kontrast uden blændingen fra ren hvid.
- Accentfarver på mørke bunde skal være lysere og mindre mættede, end de ville være på hvid, fordi stærke farver vibrerer mod sort.
- Mørke grænseflader viser dybde ved at gøre hævede flader lidt lysere, ikke ved at tilføje skygger.
- Hver tekstfarve i en mørk palet skal stadig bestå et kontrasttjek mod den flade, den faktisk sidder på.

En **mørk farvepalet**, der stadig kan læses, har tre dele: en næsten sort bund med et strejf af farve i, et blødt råhvidt til tekst og en eller to accenter, der er lysere og roligere, end du ville bruge på hvid. Ren sort med mættet neon ser hårdt ud og trætter øjnene. Tonede mørke farver med blide højlys ser bevidste og dyre ud. De seks paletter herunder følger den opskrift, med hex-koder, du kan kopiere, og kontrastforhold, der allerede er tjekket.

## Seks mørke farvepaletter med hex-koder

Hver palet har de samme fem roller, fra venstre mod højre: **bund** (siden), **flade** (kort og paneler, et trin lysere), **dyb** (en rig mellemfarve til former og store områder), **accent** (til links, knapper og fremhævninger) og **tekst**.

### Midnatsblæk

- Bund #0b0f1a: #0b0f1a
- Flade #151b2c: #151b2c
- Dyb marine #2b3a67: #2b3a67
- Perlemorsblå #8fa3d9: #8fa3d9
- Tekst #e8e6f0: #e8e6f0

Kølig, rolig og teknisk. Tekst på bunden er 15,5:1; den perlemorsblå accent er 7,7:1, nok til links og små mærkater.

### Skovnat

- Bund #0c1410: #0c1410
- Flade #15231c: #15231c
- Dyb fyr #2f5d46: #2f5d46
- Salvie #9cc5a1: #9cc5a1
- Tekst #ece7da: #ece7da

Naturlig og stille, god til wellness-, outdoor- og fødevarebrands. Tekst 15,1:1, salvie 9,7:1.

### Oksehjerteblod og kobber

- Bund #140a0b: #140a0b
- Flade #241214: #241214
- Oksehjerteblod #6b1e26: #6b1e26
- Kobber #c9855b: #c9855b
- Tekst #f1e6dc: #f1e6dc

Varm og rig, hjemme på vinkort, teater og aftenarrangementer. Tekst 15,9:1, kobber 6,5:1.

### Aubergine

- Bund #120b17: #120b17
- Flade #1e1326: #1e1326
- Blomme #4a2a63: #4a2a63
- Orkidé #c79ad8: #c79ad8
- Tekst #f3ecf6: #f3ecf6

Kreativ og natlig, et blødere alternativ til neonlilla. Tekst 16,7:1, orkidé 8,3:1.

### Trækul og gløder

- Bund #121212: #121212
- Flade #1e1e1e: #1e1e1e
- Grafit #3a3a3a: #3a3a3a
- Gløder #ff8a3d: #ff8a3d
- Tekst #ededed: #ededed

Neutrale grå med én varm accent, klassikeren til apps og dashboards. Tekst 16:1, gløder 8:1.

### Dyb blågrøn

- Bund #071a1c: #071a1c
- Flade #0f2a2d: #0f2a2d
- Dyb blågrøn #1f5c5f: #1f5c5f
- Aqua #66c2b8: #66c2b8
- Tekst #e6f2ef: #e6f2ef

Havagtig og samlet, velegnet til finans og sundhed. Tekst 15,6:1, aqua 8,5:1.

De dybe farver i hver palet er til flader, ikke til ord: marineblå på midnatsbunden er for eksempel kun omkring 1,7:1. Brug dem til former, illustrationer og baggrunde bag tekst i de lysere farver.

## De samme paletter som mørke gradienter

Mørke paletter vågner til live, når den dybe farve gløder ud af bunden som lys i et dunkelt rum. Disse bruger kun koderne ovenfor, så de matcher de flade paletter præcist. Flere teknikker findes i [mørke gradientbaggrunde](https://gradiently.design/da/guide/dark-gradient-backgrounds) og [stemningsfulde gradienter](https://gradiently.design/da/guide/moody-gradients).

- Midnatsblæk: `radial-gradient(circle at 75% 25%, #2b3a67 0%, #151b2c 40%, #0b0f1a 80%)`
- Skovnat: `radial-gradient(circle at 25% 75%, #2f5d46 0%, #15231c 45%, #0c1410 85%)`
- Oksehjerteblod: `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%)`
- Trækul og gløder: `radial-gradient(circle at 80% 80%, #ff8a3d 0%, #3a3a3a 25%, #121212 70%)`
- Dyb blågrøn: `radial-gradient(circle at 50% 0%, #1f5c5f 0%, #0f2a2d 45%, #071a1c 85%)`

Mørke gradienter får flere striber end nogen anden slags. Tilføj lidt korn og undgå kraftig JPEG-komprimering, når du eksporterer.

## Regler for mørke paletter, der kan læses

### Undgå

- Ren #000000 som bund
- Ren #ffffff til lange tekststykker
- Fuldt mættede accenter, som ser ud til at vibrere
- Slagskygger for at vise, hvilket kort der ligger øverst
- Tynd, let skrift i små størrelser

### Gør

- Et næsten sort, tonet mod dit brands farvetone
- Et råhvidt, tonet på samme måde
- Lysere, blødere versioner af accentfarver
- Lysere flader til hævede elementer
- Normal eller medium vægt, lidt løsere afstand

**Hvorfor ikke ren sort?** Sort med ren hvid tekst er den maksimale kontrast, en skærm kan vise, 21:1, og på klare skærme kan det føles blændende, især hen over lange tekststykker. Et tonet næsten sort ved omkring 15:1 ligger stadig langt over alle tilgængelighedstærskler og er meget lettere at læse længe ad gangen. Det giver også paletten en temperatur, hvilket ren sort aldrig har.

**Hvorfor roligere accenter?** En mættet blå eller rød, der ser fin ud på hvid, ser ud til at gløde og vibrere i kanterne på sort. Løft dens lyshed og sænk mætningen en smule, som med den perlemorsblå og salvien ovenfor, så ligger den stille. Tjek hver accent, du bruger til tekst, med en [kontrastkontrol](https://gradiently.design/da/guide/color-contrast-accessibility).

## Sådan laver du en mørk palet ud fra din brandfarve

Du behøver ikke låne en af paletterne ovenfor. Enhver brandfarve kan laves om til en mørk palet ved at beholde dens farvetone og kun ændre lyshed og mætning. Det virker bedst i et format, der adskiller de to, som [HSL](https://gradiently.design/da/guide/hsl-colors). Her bliver en koralfarvet brandfarve, `#e0525d`, til et helt mørkt sæt.

1. **Bund: samme farvetone, næsten intet lys** Behold farvetonen, sæt mætningen ned til omkring 30 % og lysheden til omkring 7 %: `#170c0d`. Den læses som sort, men føles varm.
2. **Flade: ét trin op** Hæv lysheden til omkring 12 % og sænk mætningen en anelse: `#261718`. Kort og paneler sidder her.
3. **Dyb: en rig mellemtone til flader** En lyshed omkring 28 % giver `#68272d`, en dæmpet vin til former og illustration, aldrig til tekst.
4. **Accent: lysere og blødere end brandet** Løft koralen til omkring 72 % lyshed: `#ea868e` når 7,6:1 på bunden, mens den oprindelige koral klarer 5,1:1 og ser hårdere ud.
5. **Tekst: et råhvidt med et spor af farvetonen** `#f2e9e9` giver 16:1 på bunden og passer stille til alt andet.

- Bund #170c0d: #170c0d
- Flade #261718: #261718
- Dyb vin #68272d: #68272d
- Blød koral #ea868e: #ea868e
- Tekst #f2e9e9: #f2e9e9

En mørk palet udledt af én koral. Hver farve deler farvetonen, og derfor føles sættet som ét brand om natten.

## Sådan bruger du en mørk palet i CSS

Navngiv farver efter rolle, så de samme komponenter virker i lyse og mørke temaer. Mønstret herunder definerer Midnatsblæk som det mørke tema og lader systemindstillingen vælge. [Mørk tilstand i design](https://gradiently.design/da/guide/dark-mode-design) dækker de bredere beslutninger, som billeder, kanter 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); }
```

Accenten skifter mellem temaerne: dyb marine på lys, perlemorsblå på mørk. Én farve virker sjældent på begge.

## Mørke paletter til opslag på sociale medier

I et feed skiller et mørkt opslag sig ud blandt lyse fotos, men kun hvis ordene kan læses i telefonstørrelse. Hold skriften stor, hold baggrundens lyseste del væk fra overskriften, og giv ordene billedets roligste område.

Et mørkt Instagram-opslag i højformat, der annoncerer en sen åbning på et galleri, med lys skrift på en dyb baggrund

Et mørkt, stemningsfuldt opslag, hvor skriften sidder på baggrundens roligste del, og gløden holder sig fra ordene.

Det er her, en Gradiently-Mark hjælper: den flytter sit roligste, mest kontrastrige område bag teksten, og Automatisk farve vælger lys eller mørk skrift til hver linje ud fra Markens egen palet, så en stemningsfuld baggrund aldrig sluger overskriften. For mørke udtryk med en rigere, mere premium karakter, se [luksus-farvepaletter](https://gradiently.design/da/guide/luxury-color-palettes) og [dark academia-æstetikken](https://gradiently.design/da/guide/dark-academia-aesthetic).

## FAQ

### Hvilke farver hører med i en mørk farvepalet?

Et tonet næsten sort til bunden, en lidt lysere fladefarve, én dyb mellemfarve til store områder, en lysere accent og et blødt råhvidt til tekst.

### Skal jeg bruge ren sort til dark mode?

Som regel ikke. Et næsten sort som #121212 eller et tonet mørkt som #0b0f1a reducerer blænding med hvid tekst og giver stadig meget høj kontrast.

### Hvilken tekstfarve virker bedst på en mørk baggrund?

Et blødt råhvidt som #e8e6f0 eller #ededed. Det holder kontrasten på omkring 15:1 eller mere uden den hårdhed, ren hvid har.

### Hvorfor ser klare farver forkerte ud på en mørk baggrund?

Mættede farver ser ud til at vibrere mod sort. Brug lysere, lidt mindre mættede versioner til accenter på mørke bunde.