Mørke fargepaletter: stemningsfulle og lesbare farger

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

Skognatt

Okseblod og kobber

Aubergine

Kull og glør

Dyp blågrønn

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

Regler for lesbare mørke paletter

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.

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. Her blir en korallfarge, #e0525d, til et komplett mørkt sett.

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

   Flate: ett trinn opp

   Øk lysheten til rundt 12% og senk metningen litt: #261718. Her ligger kort og paneler.

3. 3

   Dyp: en fyldig mellomtone til flater

   Lyshet rundt 28% gir #68272d, en dempet vinfarge til former og illustrasjoner, aldri til tekst.

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

   Tekst: brukket hvitt med et hint av fargetonen

   #f2e9e9 gir 16:1 mot bakgrunnen og passer diskret sammen med resten.

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 dekker de større valgene, som bilder, kantlinjer 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 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.

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