Donkere kleurverloopachtergronden: diepte zonder somberheid

Een goede donkere kleurverloopachtergrond is een getint bijna-zwart met daaruit één gloeiende kleur, alsof er in een donkere kamer één lamp brandt. De tint geeft de zwarttinten diepte, de verlichte kleur geeft het oog een plek om heen te gaan en het grote donkere vlak laat witte tekst scherp ogen. Zonder die drie dingen lijkt een donker kleurverloop gewoon op een gedimd scherm.

Begin met een getint bijna-zwart

Puur zwart #000000 is een doodlopende weg: er is niets om uit over te lopen, en elke kleur ernaast lijkt erop geplakt. Een bijna-zwart met een vleugje tint geeft het kleurverloop een familie om bij te horen. Blauwzwart voelt koel en technisch, violetzwart voelt luxe, groenzwart voelt natuurlijk en warm bruin voelt als leer en hout. Kies de tint die past bij de kleur die je wilt verlichten.

Voeg één verlichte kleur toe

De verlichte kleur maakt van duisternis een sfeer. Plaats hem uit het midden, meestal bij een rand of hoek, zodat hij als lichtbron leest. Houd hem in dezelfde familie als de tint: violet licht op violetzwart, teal op blauwzwart. Eén kleur is bijna altijd genoeg. Twee kunnen werken als het buren zijn. Meer dan dat gaat op een nachtclub lijken, en dat is prima als je voor er een ontwerpt; zie neonkleurverlopen.

Waarom sommige donkere kleurverlopen somber ogen

De meest gemaakte fout is de verlichte kleur op weg naar zwart richting grijs te mengen. Houd het chroma hoog terwijl het donkerder wordt: violet moet dieper violet worden, dan violetzwart, nooit grijs. Mengen in OKLCH helpt; modderige kleurverlopen legt uit waarom.

Banding: het grootste risico van donkere kleurverlopen

Donkere kleurverlopen bestrijken maar een klein bereik aan waarden, vaak een tiental of twee per kanaal, en mensen zijn erg gevoelig voor kleine stapjes tussen donkere tinten. Een soepele donkere overgang over een heel scherm is dus het perfecte recept voor zichtbare strepen. Drie gewoonten voorkomen het: geef de overgang genoeg bereik, voeg fijne korrel toe en exporteer zonder zware compressie. De details staan in gradient banding en korrelige kleurverlopen.

Tekst op een donker kleurverloop

Donkere achtergronden zijn gul voor tekst, maar alleen in de donkere delen. Houd woorden weg van de verlichte kleur, waar het contrast daalt. Gebruik gebroken wit in plaats van puur wit voor lange passages, want puur wit op bijna-zwart kan verblindend voelen. En meet: WCAG vraagt minstens 4,5:1 voor lopende tekst en 3:1 voor grote tekst, wat je kunt nagaan met de WebAIM contrastchecker.

Waar donkere kleurverloopachtergronden het best werken

Donkere kleurverlopen passen bij alles wat ’s nachts gebeurt, premium aanvoelt of kleur nodig heeft om te gloeien: muziek en evenementen, film en games, technologielanceringen, parfum en gedistilleerd, en portfolio’s waar het werk het helderste op de pagina moet zijn. Ze helpen ook bij productfotografie, omdat een verlicht object op een donkere ondergrond kostbaar oogt.

• Covers en posters: een donkere ondergrond maakt één heldere titel de hoofdrolspeler
• Stories en Reels: schermvullende donkere beelden voelen filmisch op een telefoon
• Dia’s: lichte tekst op donker is rustiger in een schemerige ruimte dan donkere tekst op wit
• Website-heroes: een donkere hero laat het eerste scherm weloverwogen voelen; zie hero-achtergronden voor websites

Ze passen minder goed waar mensen lang op papier lezen, of waar een merk is gebouwd op daglicht, frisheid of spel. Daar doet een lichte ondergrond met één zachte kleur hetzelfde werk.

Een donkere kleurverloopachtergrond in CSS

.dark-hero {
  background-color: #0b0f1a; /* fallback */
  background-image:
    radial-gradient(circle at 85% 15%, #1d4ed8 0%, transparent 45%),
    linear-gradient(180deg, #0b0f1a 0%, #0f172a 100%);
  color: #e5e7eb;
}

.dark-hero h1 {
  color: #ffffff;
}

Ontwerp je een hele interface in donkere modus in plaats van één achtergrond, zie dan dark mode-ontwerp. Veel Marks op de Markt zijn gebouwd op donkere ondergronden, en ze maken vanzelf ruimte voor je woorden door hun rustigste deel achter de tekst te schuiven.