# Oceaanverloop: codes van ondiep water tot de diepte

[Canonical HTML page](https://gradiently.design/nl/guide/ocean-gradient)

De zee is al een verloop: bleek boven zand, helder waar de zon komt, bijna zwart waar dat niet lukt. Kopieer die volgorde en een oceaanmengsel ziet er echt uit. Hier zijn de codes, diepte voor diepte.

## The short version

- Een oceaanverloop mengt blauw en blauwgroen in de volgorde waarin echt water ze toont: bleek en turquoise in de ondiepten, helder blauw in open water en bijna zwart marineblauw in de diepte.
- Water absorbeert eerst rood licht, daarom wordt de zee met de diepte blauwer en donkerder.
- Verticale oceaanverlopen, licht bovenaan en donker onderaan, lezen als diepte; een harde stop tussen twee blauwtinten leest als een horizon.
- Witte tekst werkt op de diepblauwe helft van een oceaanverloop; de bleke ondiepten vragen donker marineblauwe letters.
- Oceaanverlopen passen bij reizen, zwemmen, zeilen, zeevruchten, duurzaamheid en rustige technologieproducten.

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.

- Schuim: #e0f7f4
- Ondiepten: #7ee0d6
- Lagune: #22b8cf
- Open zee: #0284c7
- Deining: #075985
- Schemerzone: #0c3b66
- Diepte: #082f49
- Afgrond: #020c1b

De zee van boven naar beneden. De meeste oceaanverlopen gebruiken drie of vier aangrenzende stops uit deze kolom.

## 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](https://gradiently.design/nl/guide/turquoise-gradient).

- Schuim naar ondiepten: `linear-gradient(180deg, #e0f7f4 0%, #7ee0d6 100%)`
- Helder water: `linear-gradient(180deg, #a5f3fc 0%, #22b8cf 100%)`
- Zon op het water: `radial-gradient(circle at 30% 20%, #f0fdfa 0%, #7ee0d6 40%, #0891b2 100%)`
- Rifrand: `linear-gradient(160deg, #7ee0d6 0%, #22b8cf 50%, #0284c7 100%)`

Mengsels voor ondiep water. Elk begint met een bleke of heldere stop, zoals licht water eruitziet boven zand.

## 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](https://gradiently.design/nl/guide/blue-gradient) heeft de bredere blauwe familie.

- Open zee: `linear-gradient(180deg, #38bdf8 0%, #0284c7 50%, #075985 100%)`
- Atlantisch: `linear-gradient(135deg, #22b8cf 0%, #1d4ed8 100%)`
- Offshore: `linear-gradient(180deg, #0ea5e9 0%, #0c3b66 100%)`
- Deining: `linear-gradient(160deg, #0284c7 0%, #075985 45%, #0c3b66 100%)`

Blauwtinten van open water. Minder groen, meer diepte en bovenaan nog helder genoeg om als daglicht te voelen.

## 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](https://gradiently.design/nl/guide/gradient-banding) voordat je exporteert.

- Afdaling: `linear-gradient(180deg, #075985 0%, #082f49 50%, #020c1b 100%)`
- Licht van het oppervlak: `radial-gradient(ellipse at 50% 0%, #0ea5e9 0%, #0c3b66 30%, #020c1b 80%)`
- Bioluminescentie: `radial-gradient(circle at 70% 80%, #22b8cf 0%, #082f49 30%, #020c1b 75%)`

Diepzeemengsels. Eén zachte lichtbron is genoeg; al het andere is diepte.

## 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](https://gradiently.design/nl/guide/gradient-stops) legt uit hoe stoppositie werkt.

- Horizon bij zonsopgang: `linear-gradient(180deg, #fde2cf 0%, #bae6fd 45%, #0284c7 45%, #082f49 100%)`
- Horizon op de middag: `linear-gradient(180deg, #bfdbfe 0%, #e0f2fe 52%, #0ea5e9 52%, #0c3b66 100%)`
- Kustlijn: `linear-gradient(180deg, #0284c7 0%, #7ee0d6 50%, #e0f7f4 70%, #f5deb3 100%)`

Harde stops maken een horizon; een bleke schuimstop maakt een zachte kustlijn.

## 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.

- Story 1080×1920: 1080 × 1920
- Pin 1000×1500: 1000 × 1500
- Post 1080×1350: 1080 × 1350
- Website-hero 1920×1080: 1920 × 1080
- LinkedIn-banner 1584×396: 1584 × 396

Gebruik op stories en pins de volle hoogte voor de duik. Probeer op de hero en de banner een horizon of licht van één kant.

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](https://gradiently.design/nl/guide/css-linear-gradient) behandelt de syntaxis.

```css
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; }
```

Een pagina die dieper wordt naarmate je scrolt. Gebruik donkere tekst in de heldere bovenste secties en lichte tekst in de onderste.

## 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](https://gradiently.design/nl/guide/text-on-gradient) voor meer technieken.

Een story van een zeilclub met duidelijke koptekst op een oceaanverloop dat van helderblauw naar diep marineblauw verdonkert

Een story die loopt van helder water bovenaan naar diepblauw onderaan, met de woorden in de rustigste band.

## FAQ

### Welke kleuren vormen een oceaanverloop?

Bleek aqua, turquoise, helder blauw, diepblauw en bijna zwart marineblauw, in die volgorde van boven naar beneden. Codes zoals `#7ee0d6`, `#0284c7` en `#082f49` dekken het bereik.

### Moet een oceaanverloop van licht naar donker gaan of andersom?

Licht bovenaan en donker onderaan, wat past bij hoe licht met de diepte vervaagt in echt water.

### Hoe maak ik een horizonlijn in een CSS-verloop?

Geef twee kleurstops dezelfde positie, zoals `#bae6fd 45%, #0284c7 45%`. De kleur verandert dan op een scherpe lijn in plaats van met een overgang.

### Welke tekstkleur werkt op een oceaanverloop?

Donker marineblauw op het lichte bovenste deel en wit op het diepe onderste deel. Controleer het punt direct achter elke regel tekst.

### Wat is het verschil tussen een oceaanverloop en een blauw verloop?

Een oceaanverloop volgt de volgorde van echt water en bevat meestal turquoise en bijna zwart marineblauw. Een blauw verloop kan elk mengsel van blauwtinten zijn.