Nachthemelverlopen: diepblauw, sterren en maanlichtcodes

Een nachthemelverloop is een verticaal mengsel dat bijna zwart begint bovenaan en opklimt naar een zachter blauw bij de horizon, vaak met een zwakke warme of turquoise band helemaal onderaan. Die richting doet ertoe: boven je hoofd is het donkerste deel van elke nachthemel, en de horizon houdt nog wat verstrooid licht vast van steden, de ondergaande zon of de maan. Krijg die volgorde goed en zelfs twee kleuren lezen als nacht. Voeg een maan, een paar sterren en wat korrel toe en het leest als een plek.

De kleuren van een echte nachthemel

Kijk naar foto’s van de lucht na donker en je vindt heel weinig echt zwart. Het zenit is een diep marineblauw met een vleugje violet. Het midden van de lucht is indigo of leisteen. De horizon pakt op wat er aan licht is: oranje van straatlantaarns, lila in het blauwe uur, een zwak groen onder het noorderlicht op hoge breedtegraden. Deze kiezen als aparte stops onderscheidt een nachthemel van een generiek marineblauw verloop.

Nachthemelverloopcodes

Elk van deze loopt van boven naar beneden op 180 graden, zodat de donkerste kleur bovenaan het beeld zit. Kopieer er een zoals hij is, of wissel de horizonstop om het uur en de omgeving te veranderen.

Merk op dat de stops niet gelijkmatig verdeeld zijn. Het grootste deel van het beeld blijft donker en de kleurverandering gebeurt in het onderste vijfde, zoals een echte horizon zich gedraagt. Gelijkmatige verdeling laat de hemel op een helling lijken in plaats van op een koepel. Voor de redenering achter ongelijke stops, zie kleurstops in verlopen.

Zo voeg je een maan toe

Een maan is een radiaal verloop met drie delen: een kleine schijf van bijna wit, een snelle daling naar bleekblauw en een lange, zwakke halo die in de hemel vervaagt. Houd de schijf klein, rond 3 tot 5 procent van de beeldbreedte. Een grote, zachte maan leest als een schijnwerper. Plaats hem uit het midden, hoog in een hoek, zodat hij nooit met je kop concurreert.

Om een maan met een horizongloed te combineren, leg je het radiale verloop boven een lineair verloop. De gids over radiale verlopen legt posities en formaten uitgebreider uit.

Zo teken je sterren in CSS

Sterren zijn kleine radiale verlopen: een harde witte stip die een fractie van een pixel later stopt. Geef elke sterrenlaag een eigen background-size zodat hij in een ander tempo tegelt. Tegels van 200, 230, 290 en 170 pixels herhalen niet gelijktijdig, dus het oog vindt het raster nooit. Varieer ook de dekking: echte sterren zijn niet allemaal even helder.

.night-sky {
  min-height: 100vh;
  background-color: #020611;
  background-image:
    radial-gradient(1px 1px at 25px 35px, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 120px 80px, rgba(255, 255, 255, 0.75) 50%, transparent 51%),
    radial-gradient(2px 2px at 170px 150px, #fdfaf0 50%, transparent 51%),
    radial-gradient(1px 1px at 60px 140px, rgba(200, 215, 255, 0.6) 50%, transparent 51%),
    radial-gradient(circle at 78% 18%, #f4f1e3 0%, #9fb3d6 1.5%, rgba(59, 91, 143, 0.5) 8%, transparent 25%),
    linear-gradient(180deg, #020611 0%, #0b1a3a 55%, #1e3a6e 85%, #3b5b8f 100%);
  background-size: 200px 200px, 230px 230px, 290px 290px, 170px 170px, 100% 100%, 100% 100%;
}

Ontwerpideeën voor nachthemelverlopen

Nachthemels passen bij late evenementen, lanceringen, slaap- en welzijnsmerken, sterrenkundeverenigingen, muziekreleases en alles wat na donker gebeurt. De donkere bovenste helft is een natuurlijk thuis voor lichte letters en de helderdere horizon geeft het oog een vloer. Zet je kop in het bovenste midden en houd de maan eraf. Als de woorden de horizonband kruisen, controleer dan of ze nog lezen: tekst op een verloop behandelt de contrastregels.

Zo voorkom je banding in een donkerblauw verloop

Donkerblauw is waar banding in verlopen het zichtbaarst is, omdat schermen weinig te onderscheiden stappen tussen bijna-zwarte tinten hebben. Verdeel de donkerste stops over een grotere afstand, voeg een fijne ruislaag toe met zeer lage dekking en vermijd zware JPEG-compressie. Voor diepere donkere paletten in het algemeen heeft donkere verloopachtergronden meer recepten, en sterrenstelselverlopen duwen dezelfde hemel richting violet en magenta.

Wil je de korrel, het licht en de leesbaarheid liever niet met de hand bouwen, dan zijn de Marks van Gradiently levende achtergronden die op elk formaat renderen waarin je ontwerpt en zichzelf kalmeren achter je woorden. Zoek in de Markt op kleurwoorden zoals “middernacht” of “diep marineblauw” en ontwerp gratis met elke ongeclaimde Mark.