Zwarte kleurverlopen: ontwerpen met bijna-zwart

Een zwart kleurverloop is een overgang die beweegt tussen bijna-zwarte tinten, of van zwart naar een kleur, zodat een donker ontwerp diepte en licht heeft in plaats van een vlakke leegte. De kleurverlopen die er duur uitzien gebruiken bijna nooit puur #000000. Ze beginnen bij een getint zwart, zoals #0b0b10, laten de helderheid maar een paar procent veranderen en voegen één bron van kleur of licht toe ergens in het vlak.

Deze gids geeft je getinte zwarten, kopieerbare zwarte kleurverloopcodes, de oplossing voor banding die donkere overgangen plaagt en regels voor tekst. Voor donkere achtergronden in het algemeen, zie donkere kleurverloopachtergronden; voor de basis van hoe overgangen werken, begin bij wat een kleurverloop is.

Waarom puur zwart vlak oogt

#000000 heeft geen tint en nergens donkerder om heen te gaan, dus een ontwerp erop heeft geen schaduwen, alleen een afwezigheid. Niets in het echt is zo zwart: een donkere kamer, een nachtelijke hemel en zwarte stof dragen allemaal een spoor van kleur en een langzame verandering in helderheid. Je oog leest die verandering als diepte.

Er is ook een praktische reden. Op OLED-schermen gaan pure zwarte pixels helemaal uit, en op sommige telefoons hebben ze even nodig om weer aan te gaan, wat een korte veeg kan achterlaten als donkere inhoud scrolt. Je donkerste waarde een paar stappen boven nul tillen voorkomt dat en kost je visueel niets.

Getinte zwarten: de kleuren in een goed zwart

Een getint zwart is een zeer donkere kleur met een beetje verzadiging erin. In HSL-termen houd je de helderheid tussen ongeveer 4% en 9% en laat je de verzadiging tussen 15% en 40% liggen. De tint bepaalt de sfeer: blauwzwarten voelen technisch en koel, warme bruintinten voelen als leer en koffie, en aubergine voelt als de avond.

Werk je in OKLCH, dan zijn de getallen makkelijker te doorgronden: helderheid rond 15% tot 20% en chroma tussen 0,005 en 0,025. Inkt hierboven is oklch(15.2% 0.011 285), een zwart met een fluistering blauw. Onze gids over kleurcodes legt uit hoe je deze waarden leest.

Zwarte kleurverloopcodes om te kopiëren

Elk hiervan houdt zijn donkerste waarde boven puur zwart en verandert de helderheid zacht. Gebruik ze als volledige achtergrond, hero-secties of dia-ondergronden en kies degene waarvan de temperatuur bij je accentkleur past.

Richting telt op zwart meer dan waar ook, omdat er zo weinig anders gebeurt. Licht dat van boven valt leest als natuurlijk en rustig. Licht dat uit een onderhoek opkomt leest als een gloed, zoals een scherm of een vlam, en trekt het oog naar die hoek. Meer daarover bij kleurverloophoeken.

Kleurverlopen van zwart naar kleur

De opvallendste zwarte kleurverlopen laten één kleur uit het donker opkomen. Twee regels houden ze rijk. Geef de kleur ten eerste niet meer dan een derde van het vlak, zodat zwart de hoofdnoot blijft. Verdonker de kleur ten tweede richting zwart langs zijn eigen tint in plaats van door grijs te vervagen: een violet moet op weg naar beneden door diep indigo gaan, niet door antraciet. Een grijs midden is de meest voorkomende oorzaak van modderige kleurverlopen.

Moderne browsers kunnen hier deels voor zorgen. Interpoleren in OKLCH houdt het chroma van de kleur levend door de donkerdere stops, en een gewone terugvalregel dekt oudere browsers.

.hero {
  /* Fallback for browsers without colour interpolation */
  background: linear-gradient(160deg, #08070c 0%, #140d24 55%, #7c3aed 100%);
  /* Blends through oklch, so the violet stays violet as it darkens */
  background: linear-gradient(in oklch 160deg, #08070c 0%, #140d24 55%, #7c3aed 100%);
}

Zo voorkom je banding in donkere kleurverlopen

Schermen tonen meestal 256 niveaus per kleurkanaal. Een kleurverloop van #0a0a0a naar #1a1a1a heeft er maar 16 van om mee te werken, dus over een hero van 1920 pixels breed is elke stap ongeveer 120 pixels breed en zie je strepen. Dit is banding in kleurverlopen, en donkere kleurverlopen hebben er het meeste last van.

Korrel is de betrouwbaarste oplossing, omdat ze de harde rand van elke stap breekt tot textuur die het oog weer samenvoegt. Een paar procent dekking is genoeg. Korrelige kleurverlopen behandelt de look uitgebreid; dit is de minimale CSS.

.hero {
  position: relative;
  background: linear-gradient(180deg, #1c1c24 0%, #0b0b10 60%, #070709 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

Tekst en kleur op een zwart kleurverloop

Zwarte ondergronden laten bijna elke lichte tekst het contrast halen, dus het risico verschuift naar je secundaire tekst. Middengrijzen die er op een heldere monitor goed uitzien kunnen onder het minimum van 4,5:1 voor lopende tekst zakken. Puur wit heeft ook een prijs: sommige lezers vinden fel wit op bijna-zwart hard bij lange stukken, dus een warm gebroken wit is vriendelijker en leest nog steeds scherp. Zie kleurcontrast voor de volledige regels.

Waar zwarte kleurverlopen het best werken

• Lanceringen en onthullingen, waar een donker vlak één product of kop verlicht laat voelen
• Luxe, parfum en juwelen, gecombineerd met een metaalaccent zoals #c9a96e
• Muziek, uitgaan en evenementen, met één verzadigde kleur die uit een hoek opkomt
• Tech- en ontwikkelaarsproducten, waar blauwzwarten precies aanvoelen
• Interfaces in donkere modus, met twee of drie getinte zwarten als oppervlaktelagen
• Fotografieportfolio’s, waar een rustig zwart kader de beelden de kleur laat dragen

In Gradiently kun je op de Markt Marks zoeken op kleurwoorden als “bijna zwart” of “zwart en goud”, en elke Mark draagt al korrel en licht, dus de bovenstaande problemen met banding en vlakheid zijn opgelost voordat je begint.