# Mörka färgpaletter: dämpade koder som ändå går att läsa

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

Mörka paletter ser dyra ut när de görs av nästan svarta toner med en antydan av färg, och billiga när de är rent svarta med neon. Här är sex som gör rätt, med varje kod.

## The short version

- En bra mörk färgpalett byggs på ett nästan svart med en svag färgton snarare än rent #000000.
- Text på en mörk palett läses bäst i en mjuk off-white, som behåller stark kontrast utan bländningen från rent vitt.
- Accentfärger på mörka bottnar bör vara ljusare och mindre mättade än de skulle vara på vitt, eftersom levande färger vibrerar mot svart.
- Mörka gränssnitt visar djup genom att göra upphöjda ytor något ljusare, inte genom att lägga till skuggor.
- Varje textfärg i en mörk palett måste fortfarande klara en kontrastkontroll mot ytan den faktiskt ligger på.

En **mörk färgpalett** som ändå går att läsa har tre delar: en nästan svart botten med en antydan av färg i, en mjuk off-white för text, och en eller två accenter som är ljusare och lugnare än du skulle använda på vitt. Rent svart med mättad neon ser hårt ut och tröttar ögonen. Färgade mörka toner med milda högdagrar ser avsiktliga och dyra ut. De sex paletterna nedan följer det receptet, med hexkoder du kan kopiera och kontrastkvoter som redan är kontrollerade.

## Sex mörka färgpaletter med hexkoder

Varje palett har samma fem roller, från vänster till höger: **botten** (sidan), **yta** (kort och paneler, ett steg ljusare), **djup** (en rik mellanfärg för former och stora ytor), **accent** (för länkar, knappar och högdagrar) och **text**.

### Midnattsbläck

- Botten #0b0f1a: #0b0f1a
- Yta #151b2c: #151b2c
- Djupt marinblått #2b3a67: #2b3a67
- Lavendelblått #8fa3d9: #8fa3d9
- Text #e8e6f0: #e8e6f0

Kall, lugn och teknisk. Text på botten är 15,5:1; den lavendelblå accenten är 7,7:1, nog för länkar och små etiketter.

### Skogsnatt

- Botten #0c1410: #0c1410
- Yta #15231c: #15231c
- Djup tall #2f5d46: #2f5d46
- Salvia #9cc5a1: #9cc5a1
- Text #ece7da: #ece7da

Naturlig och stilla, bra för välmående-, friluftslivs- och matvarumärken. Text 15,1:1, salvia 9,7:1.

### Oxblod och koppar

- Botten #140a0b: #140a0b
- Yta #241214: #241214
- Oxblod #6b1e26: #6b1e26
- Koppar #c9855b: #c9855b
- Text #f1e6dc: #f1e6dc

Varm och rik, hemma på vinlistor, teater och kvällsevenemang. Text 15,9:1, koppar 6,5:1.

### Aubergine

- Botten #120b17: #120b17
- Yta #1e1326: #1e1326
- Plommon #4a2a63: #4a2a63
- Orkidé #c79ad8: #c79ad8
- Text #f3ecf6: #f3ecf6

Kreativ och nattlig, ett mjukare alternativ till neonlila. Text 16,7:1, orkidé 8,3:1.

### Kol och glöd

- Botten #121212: #121212
- Yta #1e1e1e: #1e1e1e
- Grafit #3a3a3a: #3a3a3a
- Glöd #ff8a3d: #ff8a3d
- Text #ededed: #ededed

Neutrala grå toner med en het accent, klassikern för appar och instrumentpaneler. Text 16:1, glöd 8:1.

### Djup teal

- Botten #071a1c: #071a1c
- Yta #0f2a2d: #0f2a2d
- Djup teal #1f5c5f: #1f5c5f
- Aqua #66c2b8: #66c2b8
- Text #e6f2ef: #e6f2ef

Oceanisk och sansad, passar finans och hälsa. Text 15,6:1, aqua 8,5:1.

De djupa färgerna i varje palett är till för ytor, inte ord: marinblått på midnattsbotten är till exempel bara ungefär 1,7:1. Använd dem till former, illustrationer och bakgrunder bakom text i de ljusare färgerna.

## Samma paletter som mörka gradienter

Mörka paletter vaknar till liv när den djupa färgen glöder ut ur botten som ljus i ett dunkelt rum. De här använder bara koderna ovan, så de matchar de platta paletterna exakt. Fler tekniker finns i [mörka gradientbakgrunder](https://gradiently.design/sv/guide/dark-gradient-backgrounds) och [dämpade gradienter](https://gradiently.design/sv/guide/moody-gradients).

- Midnattsbläck: `radial-gradient(circle at 75% 25%, #2b3a67 0%, #151b2c 40%, #0b0f1a 80%)`
- Skogsnatt: `radial-gradient(circle at 25% 75%, #2f5d46 0%, #15231c 45%, #0c1410 85%)`
- Oxblod: `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%)`
- Kol och glöd: `radial-gradient(circle at 80% 80%, #ff8a3d 0%, #3a3a3a 25%, #121212 70%)`
- Djup teal: `radial-gradient(circle at 50% 0%, #1f5c5f 0%, #0f2a2d 45%, #071a1c 85%)`

Mörka gradienter får mer bandning än någon annan sort. Lägg till lite korn och undvik kraftig JPEG-komprimering när du exporterar.

## Regler för mörka paletter som går att läsa

### Undvik

- Rent #000000 som botten
- Rent #ffffff för långa textpartier
- Helt mättade accenter, som verkar vibrera
- Skuggor för att visa vilket kort som ligger överst
- Tunn, lätt text i små storlekar

### Gör

- Ett nästan svart som lutar mot ditt varumärkes färgton
- En off-white som är färgad på samma sätt
- Ljusare, mjukare versioner av accentfärger
- Ljusare ytor för upphöjda element
- Normal eller medium tyngd, något luftigare avstånd

**Varför inte rent svart?** Svart med rent vit text är den högsta kontrast en skärm kan visa, 21:1, och på ljusstarka skärmar kan det kännas bländande, särskilt över långa partier. Ett färgat nästan svart på runt 15:1 ligger fortfarande långt över varje tillgänglighetströskel och är mycket lättare att läsa länge. Det ger också paletten en temperatur, vilket rent svart aldrig har.

**Varför lugnare accenter?** Ett mättat blått eller rött som ser bra ut på vitt verkar glöda och vingla i kanterna på svart. Höj dess ljushet och sänk dess mättnad något, som med lavendelblått och salvia ovan, så sitter den stilla. Kontrollera varje accent du använder för text med en [kontrastkontroll](https://gradiently.design/sv/guide/color-contrast-accessibility).

## Så gör du en mörk palett av din varumärkesfärg

Du behöver inte låna en av paletterna ovan. Vilken varumärkesfärg som helst kan bli en mörk palett genom att behålla dess färgton och bara ändra ljushet och mättnad. Det fungerar bäst i ett format som skiljer de två åt, som [HSL](https://gradiently.design/sv/guide/hsl-colors). Här blir en korallfärgad varumärkesfärg, `#e0525d`, en hel mörk uppsättning.

1. **Botten: samma färgton, nästan inget ljus** Behåll färgtonen, sänk mättnaden till ungefär 30 % och ljusheten till ungefär 7 %: `#170c0d`. Den läses som svart men känns varm.
2. **Yta: ett steg upp** Höj ljusheten till ungefär 12 % och sänk mättnaden en aning: `#261718`. Kort och paneler ligger här.
3. **Djup: en rik mellanton för ytor** Ljushet kring 28 % ger `#68272d`, ett dämpat vin för former och illustrationer, aldrig för text.
4. **Accent: ljusare och mjukare än varumärket** Höj korallen till ungefär 72 % ljushet: `#ea868e` når 7,6:1 på botten, medan den ursprungliga korallen klarar 5,1:1 och ser hårdare ut.
5. **Text: en off-white med en antydan av färgtonen** `#f2e9e9` ger 16:1 på botten och matchar tyst allt annat.

- Botten #170c0d: #170c0d
- Yta #261718: #261718
- Djupt vin #68272d: #68272d
- Mjuk korall #ea868e: #ea868e
- Text #f2e9e9: #f2e9e9

En mörk palett härledd från en enda korall. Varje färg delar färgton, vilket är varför uppsättningen känns som ett enda varumärke på natten.

## Använd en mörk palett i CSS

Namnge färger efter roll så att samma komponenter fungerar i ljusa och mörka teman. Mönstret nedan definierar Midnattsbläck som det mörka temat och låter systeminställningen välja. [Design för mörkt läge](https://gradiently.design/sv/guide/dark-mode-design) går igenom de bredare besluten, som bilder, ramar och diagram.

```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 ändras mellan teman: djupt marinblått på ljust, lavendelblått på mörkt. En färg fungerar sällan på båda.

## Mörka paletter för sociala inlägg

I ett flöde sticker ett mörkt inlägg ut bland ljusa foton, men bara om orden går att läsa i telefonstorlek. Håll typen stor, håll den ljusaste delen av bakgrunden borta från rubriken och ge orden bildens lugnaste område.

Ett mörkt Instagraminlägg i stående format som tillkännager ett sent galleriöppnande, med ljus text på djup bakgrund

Ett mörkt, dämpat inlägg där typen sitter på bakgrundens lugnaste del och glöden hålls borta från orden.

Här hjälper en Gradiently-Mark: den flyttar sitt lugnaste, mest kontrastrika område bakom texten och Auto-bläck väljer ljus eller mörk text för varje rad utifrån Markens egen palett, så en dämpad bakgrund sväljer aldrig rubriken. För mörka looker med mer rik, premiumkaraktär, se [lyxiga färgpaletter](https://gradiently.design/sv/guide/luxury-color-palettes) och [dark academia-estetiken](https://gradiently.design/sv/guide/dark-academia-aesthetic).

## FAQ

### Vilka färger ingår i en mörk färgpalett?

Ett färgat nästan svart som botten, en något ljusare ytfärg, en djup mellanfärg för stora ytor, en ljusare accent och en mjuk off-white för text.

### Ska jag använda rent svart för mörkt läge?

Oftast inte. Ett nästan svart som #121212 eller en färgad mörk ton som #0b0f1a minskar bländning med vit text och ger ändå mycket hög kontrast.

### Vilken textfärg fungerar bäst på mörk bakgrund?

En mjuk off-white som #e8e6f0 eller #ededed. Den behåller kontrast kring 15:1 eller mer utan hårdheten hos rent vitt.

### Varför ser ljusa färger fel ut på mörk bakgrund?

Mättade färger verkar vibrera mot svart. Använd ljusare, något mindre mättade versioner för accenter på mörka bottnar.