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

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

Skovnat

Oksehjerteblod og kobber

Aubergine

Trækul og gløder

Dyb blågrøn

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 og stemningsfulde gradienter.

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

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.

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. Her bliver en koralfarvet brandfarve, #e0525d, til et helt mørkt sæt.

1. 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. 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. 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. 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. 5

   Tekst: et råhvidt med et spor af farvetonen

   #f2e9e9 giver 16:1 på bunden og passer stille til alt andet.

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 dækker de bredere beslutninger, som billeder, kanter og diagrammer.

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

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.

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 og dark academia-æstetikken.