Sfeervolle verlopen: donkere, rijke codes met atmosfeer

Een sfeervol verloop is een donkere overgang die zich gedraagt als een schemerig verlichte kamer: het grootste deel van het beeld ligt in schaduw, één gebied vangt het licht en de kleuren worden ingehouden in plaats van opgedreven. Het recept is simpel te zeggen. Begin met een getint bijna-zwart, voeg een of twee gedempte middentonen toe en laat één licht, vaak warm tegen een koele ondergrond, het oppervlak tot leven brengen. Hieronder staan twaalf codes om te kopiëren, daarna hoe je je eigen bouwt en woorden erop leesbaar houdt.

Wat een verloop sfeervol maakt, niet alleen donker

Veel donkere verlopen voelen vlak. Marineblauw dat naar zwart vervaagt is donker, maar er zit geen weer in. Sfeer komt uit een paar beslissingen die fotografen en filmkleurisen instinctief nemen, en die je bewust kunt nemen.

• Low key. Ruwweg driekwart van het beeld is schaduw. Licht is de uitzondering, niet de regel.
• Eén bron. Licht komt binnen vanuit een hoek of rand, zodat het oog weet waar het raam of de lamp is.
• Ingehouden kleur. Middentonen zijn licht vergrijsd. Een stoffig turkoois voelt sfeervoller dan een helder.
• Gekleurde schaduwen. Het donkerste punt is blauwzwart, groenzwart of ossenbloed, nooit #000000.
• Temperatuurcontrast. Een klein warm licht in een koele scène, of andersom, creëert spanning.

Twaalf sfeervolle verloopcodes

Elk daarvan is één CSS-waarde die je in background kunt plakken. Ze zijn losjes gegroepeerd op temperatuur: eerst koel en stormachtig, dan de warme, lamplichtige, dan een paar daartussenin.

Wil je iets dat dichter bij een heldere nacht ligt dan bij een stormachtige, dan leunen nachthemelverlopen blauwer en voegen sterren toe. Voor diepere, glanzendere kleur met meer verzadiging zitten edelsteentinten een stap helderder dan alles hier.

Een sfeervol kleurenpalet om op te bouwen

Maak je je eigen, werk dan vanuit een palet in plaats van twee kleuren. Vijf is ruim voldoende: een ondergrond, twee schaduwstappen, één gedempte middentoon en één licht. Het licht is de enige kleur die echte helderheid mag hebben, en het moet in een klein gebied verschijnen.

Waarom warm licht zo goed werkt tegen koele schaduw staat uitgelegd in kleurtemperatuur. Voor meer kant-en-klare sets zie je donkere kleurpaletten.

Een sfeervol verloop maken in CSS

1. 1

   Stel een getinte ondergrond in

   Kies een bijna-zwart met een tint erin, zoals #0b0d12 voor blauwzwart of #120806 voor warm bruinzwart. Gebruik het ook als terugval voor background-color.

2. 2

   Voeg het schaduwlichaam toe

   Leg een zacht lineair verloop tussen twee donkere stappen van dezelfde tint. Dat geeft het beeld diepte voordat er licht komt.

3. 3

   Plaats één licht

   Voeg in een hoek een radiaal verloop toe dat rond 40 procent naar transparent vervaagt. Houd de kleur gedempt en de dekking ruim onder volledig.

4. 4

   Voeg een koel tegenlicht toe

   Optioneel een tweede, grotere en zwakkere radiaal in de tegenovergestelde hoek, in de koele familie. Het voorkomt dat de schaduwkant dood gaat.

5. 5

   Rond af met korrel

   Een fijne ruislaag met lage dekking verbergt banding en laat het oppervlak als film voelen. Korrelige verlopen heeft de code.

.moody {
  background-color: #0b0d12; /* tinted ground and fallback */
  background-image:
    radial-gradient(circle at 78% 18%, rgba(201, 138, 58, 0.5) 0%, transparent 40%),
    radial-gradient(ellipse at 10% 100%, rgba(31, 58, 68, 0.8) 0%, transparent 55%),
    linear-gradient(165deg, #151a22 0%, #0b0d12 100%);
}

Woorden op een sfeervolle achtergrond zetten

Lichte letters op een donkere ondergrond lezen goed, tot ze de ene heldere plek kruisen waar je zo hard aan hebt gewerkt. Plan de kop voor de schaduwkant en houd het licht weg van de woorden in plaats van erachter. Een zacht gebroken wit, zoals #ece6dc, zit prettiger op een sfeervolle ondergrond dan zuiver wit, dat hard kan ogen.

Die rechtse versie is wat een Gradiently-Mark vanzelf doet: hij weet waar de woorden staan, verdiept de kleur bij de letters en kiest per regel lichte of donkere letters uit zijn eigen palet, zonder vakken of schaduwen. Tekst op een verloop behandelt de handmatige versie.

Waar sfeervolle verlopen het best werken

Ze passen bij nacht, muziek, drank, film, parfum en stille luxe. Ze passen veel minder bij een kinderfeestje of een zomeruitverkoop. Voor een hele interface in dit register behandelt donkere verloopachtergronden de extra zorg die schermen nodig hebben.

Wil je liever geen lagen met de hand afstemmen, dan heeft de Markt levende Marks in precies dit register, doorzoekbaar met woorden als “diep turkoois” of “ossenbloed”. Je kunt gratis ontwerpen met elke niet-geclaimde Mark, en een Mark claimen betekent dat de poster van niemand anders dezelfde atmosfeer draagt.