Donkere kleurenpaletten: stemmige codes die leesbaar blijven

Een donker kleurenpalet dat leesbaar blijft heeft drie delen: een bijna-zwarte ondergrond met een vleugje kleur, een zacht gebroken wit voor tekst, en een of twee accenten die lichter en rustiger zijn dan je op wit zou gebruiken. Puur zwart met verzadigd neon ziet er hard uit en vermoeit de ogen. Getinte donkere tinten met zachte lichtpunten ogen doordacht en duur. De zes paletten hieronder volgen dat recept, met hexcodes die je kunt kopiëren en contrastverhoudingen die al zijn gecontroleerd.

Zes donkere kleurenpaletten met hexcodes

Elk palet heeft dezelfde vijf rollen, van links naar rechts: ondergrond (de pagina), vlak (kaarten en panelen, een stap lichter), diep (een rijke middentoon voor vormen en grote vlakken), accent (voor links, knoppen en highlights) en tekst.

Middernachtinkt

Bos bij nacht

Ossenbloed en koper

Aubergine

Antraciet en gloed

Diep petrol

De diepe kleuren in elk palet zijn voor vlakken, niet voor woorden: marineblauw op de middernachtondergrond haalt bijvoorbeeld maar ongeveer 1,7:1. Gebruik ze voor vormen, illustraties en achtergronden achter tekst in de lichtere kleuren.

Dezelfde paletten als donkere verlopen

Donkere paletten komen tot leven als de diepe kleur uit de ondergrond gloeit als licht in een schemerige kamer. Deze verlopen gebruiken alleen de codes hierboven, dus ze sluiten precies aan op de vlakke paletten. Meer technieken staan in donkere verloopachtergronden en stemmige verlopen.

Regels voor donkere paletten die leesbaar blijven

Waarom niet puur zwart? Zwart met puur witte tekst is het maximale contrast dat een scherm kan tonen, 21:1, en op felle schermen kan dat verblindend aanvoelen, vooral bij lange stukken tekst. Een getint bijna-zwart rond 15:1 ligt nog ver boven elke toegankelijkheidsdrempel en leest veel prettiger bij langere teksten. Het geeft het palet ook een temperatuur, die puur zwart nooit heeft.

Waarom rustigere accenten? Een verzadigd blauw of rood dat er op wit prima uitziet, lijkt op zwart te gloeien en aan de randen te wiebelen. Maak het lichter en iets minder verzadigd, zoals bij de maagdenpalm en salie hierboven, en het blijft rustig staan. Controleer elk accent dat je voor tekst gebruikt met een contrastchecker.

Zo maak je een donker palet van je merkkleur

Je hoeft niet een van de paletten hierboven te lenen. Elke merkkleur kan een donker palet worden door de tint te behouden en alleen helderheid en verzadiging aan te passen. Dat werkt het best in een formaat dat die twee scheidt, zoals HSL. Hier wordt een koraalrode merkkleur, #e0525d, een volledige donkere set.

1. 1

   Ondergrond: dezelfde tint, bijna geen licht

   Behoud de tint, verlaag de verzadiging naar ongeveer 30% en de helderheid naar ongeveer 7%: #170c0d. Het leest als zwart maar voelt warm.

2. 2

   Vlak: één stap hoger

   Verhoog de helderheid naar ongeveer 12% en verlaag de verzadiging een tikje: #261718. Kaarten en panelen staan hier.

3. 3

   Diep: een rijke middentoon voor vlakken

   Een helderheid rond 28% geeft #68272d, een gedempte wijnrood voor vormen en illustraties, nooit voor tekst.

4. 4

   Accent: lichter en zachter dan het merk

   Til het koraal op naar ongeveer 72% helderheid: #ea868e haalt 7,6:1 op de ondergrond, terwijl het originele koraal 5,1:1 haalt en harder oogt.

5. 5

   Tekst: een gebroken wit met een spoor van de tint

   #f2e9e9 geeft 16:1 op de ondergrond en past stilletjes bij al het andere.

Een donker palet gebruiken in CSS

Benoem kleuren naar rol, zodat dezelfde componenten werken in lichte en donkere thema’s. Het patroon hieronder definieert Middernachtinkt als het donkere thema en laat de systeeminstelling kiezen. Dark mode design behandelt de bredere keuzes, zoals afbeeldingen, randen en grafieken.

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

Donkere paletten voor socialmediaposts

In een feed valt een donkere post op tussen felle foto’s, maar alleen als de woorden op telefoonformaat leesbaar zijn. Houd de letters groot, houd het helderste deel van de achtergrond weg van de kop en geef de woorden het rustigste deel van het beeld.

Hier helpt een Gradiently Mark: hij verplaatst zijn rustigste, best contrasterende gebied achter de tekst en auto-inkt kiest voor elke regel lichte of donkere letters uit het eigen palet van de Mark, zodat een stemmige achtergrond de kop nooit opslokt. Voor donkere looks met een rijker, premium karakter, zie luxe kleurenpaletten en de dark academia-esthetiek.