Oceaanverloop: codes van ondiep water tot de diepte

Een oceaanverloop mengt blauw en blauwgroen in dezelfde volgorde als de zee: bleek aqua boven zand, turquoise in de ondiepten, helder blauw in open water en een bijna zwart marineblauw in de diepte. Laat het van boven naar beneden lopen, van licht naar donker, en mensen lezen het als diepte zonder dat het ze verteld wordt. De codes hieronder volgen die duik, en voegen dan horizonmengsels, een zee in CSS voor een hele pagina en de letterkleuren toe die woorden op water leesbaar houden.

Waarom de oceaan blauw is, en waarom dat ertoe doet voor je verloop

Water absorbeert eerst het rode uiteinde van zonlicht, dan geel en groen, dus hoe dieper je gaat, hoe meer alleen blauw overblijft, en dan vervaagt zelfs dat. Ondiep water boven licht zand weerkaatst veel licht en ziet er turquoise uit; diep water ziet er donker marineblauw uit. Een oceaanverloop dat deze volgorde houdt voelt natuurlijk; een die donkerblauw boven turquoise zet ziet er ondersteboven uit, ook als niemand kan zeggen waarom.

Oceaanverlopen voor ondiep water

Het heldere uiteinde: het water dat je ziet vanaf een strand of een boot bij helder weer. Zonnig, schoon en uitnodigend, passen deze bij vakantiemerken, zwemkleding, zwembadbedrijven en zomerkaarten. De meer tropische kant staat in turquoise verlopen.

Verlopen voor open zee

Verder weg verliest de zee zijn groen en wordt hij een helder, zelfverzekerd blauw. Deze mengsels voelen betrouwbaar, rustig en bekwaam, daarom passen ze bij zeilclubs, reisverzekeraars, mariene wetenschap en technologiemerken die blauw willen zonder de kilte van zakelijk marineblauw. Blauwe verlopen heeft de bredere blauwe familie.

Diepzeeverlopen

Onderaan de duik wordt de zee bijna zwart met slechts een spoor blauw. Deze zijn tegelijk dramatisch en stil: duikscholen, documentaires, luxe horloges, visrestaurants na donker. Een zwakke gloed van boven, als licht van het oppervlak, voorkomt dat ze leeg voelen. Donkere mengsels vertonen snel banding, dus lees banding in verlopen voordat je exporteert.

Horizon- en kustverlopen

Oceaanontwerpen bevatten vaak de lucht of het strand. De truc voor een horizon is een harde stop: twee kleurstops op dezelfde positie, zodat de lucht eindigt en de zee begint op een strakke lijn. Een kustlijn werkt andersom, met de zee die via een bleke schuimstop in zand overgaat zodat de warme en koele kleuren nooit als grijs samenkomen. Stops in verlopen legt uit hoe stoppositie werkt.

De richting kiezen per formaat

Omdat een oceaanverloop diepte betekent, werkt het het best verticaal, en hoge formaten tonen de hele duik. In brede formaten werkt een horizonmengsel of een radiale gloed meestal beter dan de hele zee in een lage hoogte proppen. Een staande post zit ertussenin: een zacht verticaal mengsel van open zee naar diepte werkt, zolang de kop in één band valt in plaats van over de verandering heen.

Hier laat één bijgesneden afbeelding je in de steek: het licht komt op de helft van je formaten op de verkeerde plek. Een Gradiently Mark rendert daarentegen vers in elk formaat, en de Designer kan de story, de post en de banner uit één briefing maken, zodat de zee in elk goed zit.

Een oceaanverloop in CSS voor een hele pagina

Een lange pagina kan een duik worden: helder bovenaan, diep bij de footer. Koppel het verloop aan de hele documenthoogte in plaats van het venster, geef het een effen terugval en voeg bovenaan een zachte oppervlaktegloed toe. CSS lineaire verlopen behandelt de syntaxis.

html {
  background-color: #082f49; /* fallback, and the colour seen on overscroll */
}

body {
  min-height: 100vh;
  margin: 0;
  color: #082f49;
  background-image:
    radial-gradient(ellipse 90% 30% at 50% 0%, rgb(224 247 244 / 0.8) 0%, transparent 70%),
    linear-gradient(180deg, #7ee0d6 0%, #22b8cf 18%, #0284c7 40%, #075985 65%, #082f49 85%, #020c1b 100%);
}

/* switch to light text once the page reaches deep water */
.deep { color: #e0f7f4; }

Tekst op een oceaanverloop

Een oceaanmengsel verandert van heel licht naar heel donker, dus geen enkele tekstkleur werkt overal. Diep marineblauw #082f49 op bleek hemelsblauw #7dd3fc meet ongeveer 8,3 op 1. Wit op deining #075985 meet ongeveer 7,6 op 1, en op open zee #0284c7 zakt het naar ongeveer 4,1 op 1, prima voor grote koppen maar te weinig voor lopende tekst. Plaats woorden waar de kleur bij ze past, en zie tekst op verlopen voor meer technieken.