# Petrol kleurverloop: codes van lagune tot diepzee

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

Petrol ligt precies tussen blauw en groen, en dat maakt het rustig, slim en opvallend makkelijk te mengen. Loop van de lagune naar de diepzee met codes voor elke diepte.

## The short version

- Een petrol kleurverloop mengt blauwgroene tinten, meestal van een bleek aqua naar een diep groenblauw.
- Petrol mengt schoon met zijn buren: cyaan, smaragd, blauw en marine.
- Warme accenten zoals koraal, perzik en koper staan tegenover petrol en laten het gloeien, mits je ze buiten het verloop houdt.
- Witte tekst vraagt een petrol die minstens zo diep is als #0f766e om het contrast te halen; lichtere tinten hebben donkere letters nodig.
- Heel donker petrol is een prima ondergrond voor de donkere modus: zachter dan zwart en minder voorspelbaar dan marine.

Een **petrol kleurverloop** loopt tussen blauwgroene tinten: bleek aqua aan de lichte kant, een heldere middentint petrol in het midden en een donker, inktachtig groenblauw onderaan. Omdat petrol halverwege blauw en groen ligt, mengt het makkelijk naar beide kanten en wordt het bijna nooit modderig. De codes hieronder volgen het per diepte, van zonnige lagune tot diepzee, met per stap tips over accenten, CSS en letters.

## Een petrolladder om elk kleurverloop mee te bouwen

De meeste goede petrol kleurverlopen bestaan uit twee tot vier stappen van deze ladder. Kies buren voor een zachte overgang, of sla drie sporten over voor drama. De namen hieronder gebruiken we in de rest van het artikel.

- Ondiep: #ccfbf1
- Lagune: #5eead4
- Aqua: #2dd4bf
- Petrol: #14b8a6
- Rif: #0d9488
- Kelp: #0f766e
- Diep petrol: #115e59
- Afgrond: #042f2e

Acht tinten petrol van licht naar donker. Twee of drie buren geven een rustige overgang; van licht naar donker geeft diepte.

## Lichtpetrol kleurverlopen: lagune en ondiep water

Lichtpetrol is schoon, fris en stilletjes vrolijk. Het past bij wellness, zwembaden en zwemkleding, tandartsen en zorgpraktijken, en bij elk product dat hygiënisch wil ogen zonder de kilte van puur blauw. Laat het lopen naar wit of naar een bleek mintgroen om het zacht te houden.

- Ondiep: `linear-gradient(180deg, #f0fdfa 0%, #99f6e4 100%)`
- Lagune: `linear-gradient(135deg, #ccfbf1 0%, #5eead4 100%)`
- Hemel naar lagune: `linear-gradient(135deg, #e0f2fe 0%, #5eead4 100%)`
- Zonnig zwembad: `radial-gradient(circle at 30% 20%, #f0fdfa 0%, #99f6e4 45%, #2dd4bf 100%)`

Bleke tinten petrol die fris blijven. Elk heeft een bijna witte stop, zodat donkere tekst een plek heeft.

## Middenpetrol kleurverlopen: rif en jade

Het midden van het bereik is petrol op zijn zelfverzekerdst. Het werkt goed voor apps, fintech-dashboards, duurzame merken en onderwijs, omdat het zowel betrouwbaar (blauw) als levend (groen) leest. Leunt het naar smaragd, dan voelt het natuurlijk; leunt het naar blauw, dan voelt het technisch.

- Rif: `linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%)`
- Jade: `linear-gradient(135deg, #34d399 0%, #0d9488 100%)`
- Cyaan naar kelp: `linear-gradient(135deg, #22d3ee 0%, #0f766e 100%)`
- Petrol naar blauw: `linear-gradient(120deg, #14b8a6 0%, #0ea5e9 100%)`
- Petrol in drie stappen: `linear-gradient(160deg, #5eead4 0%, #14b8a6 50%, #0f766e 100%)`

Middentinten trekken naar smaragd of blauw. Kies de richting op basis van wat je merk moet uitstralen.

## Donkerpetrol kleurverlopen: de diepzee

Aan de donkere kant wordt petrol bijna zwart met een koele groene adem. Dit is de meest verfijnde petrol: advocatenkantoren, sterke drank, hotels, architectuur, avondevenementen. Het is ook een prachtige ondergrond voor één felle accentkleur, omdat er niets aan concurreert. Donkere verlopen vertonen banding in gecomprimeerde exports, dus wat korrel helpt; zie [gradient banding](https://gradiently.design/nl/guide/gradient-banding).

- Afdaling: `linear-gradient(180deg, #0f766e 0%, #042f2e 100%)`
- Licht van boven: `radial-gradient(circle at 75% 20%, #14b8a6 0%, #115e59 35%, #031d1c 80%)`
- Diep petrol naar middernacht: `linear-gradient(135deg, #134e4a 0%, #0c1f2e 100%)`
- Lichtstraal: `radial-gradient(ellipse at 50% 0%, #2dd4bf 0%, #0f4c47 30%, #021614 75%)`

Donkere tinten petrol met één lichtbron. Ze voelen duur en rustig.

## Warme accenten bij een petrol kleurverloop

Het tegenovergestelde van petrol op het kleurenwiel is een warm roodoranje, dus koraal, perzik, abrikoos en koper laten het allemaal zingen. Houd de warme kleur buiten het verloop zelf: een verloop van petrol naar koraal gaat in het midden door een doffe grijstint. Gebruik het accent liever voor een knop, een kop of een kleine vorm. [Complementaire kleuren](https://gradiently.design/nl/guide/complementary-colors) legt de aantrekkingskracht uit, en [koraal kleurverlopen](https://gradiently.design/nl/guide/coral-gradient) heeft codes voor de andere kant.

- Vermijd: grijs midden: `linear-gradient(90deg, #14b8a6 0%, #fb7185 100%)`
- Koperen zon op diep petrol: `radial-gradient(circle at 85% 15%, #fb923c 0%, transparent 25%), linear-gradient(160deg, #0f766e 0%, #042f2e 100%)`
- Bleek petrol naar perzik: `linear-gradient(135deg, #ccfbf1 0%, #fde2cf 100%)`

Een verzadigd verloop van petrol naar koraal wordt in het midden grijs. Een klein warm licht op petrol, of twee bleke tinten, werkt veel beter.

Kijk naar het derde staal: heel bleke tinten van tegenpolen mengen prima, omdat er weinig verzadiging te verliezen is. Dat is een handige truc voor zachte verpakkingen en bruiloftsdrukwerk.

## Een petrol kleurverloop kiezen voor je merk

Petrol is populair bij merken in zorg, geld en duurzaamheid, dus de tint alleen onderscheidt je niet. Dat doen de diepte die je kiest, het accent waarmee je het combineert en het oppervlak. Begin bij de taak die het ontwerp moet doen.

| Als je bent | Probeer | Combineer met |
| --- | --- | --- |
| Een kliniek, zwembad of huidverzorgingsmerk | Ondiep of Lagune | Antracietkleurige letters, witruimte |
| Een app of fintechproduct | Petrol naar blauw | Eén koraalkleurige knopkleur |
| Een café, bloemist of tuincentrum | Jade | Crème en terracotta |
| Een hotel, bar of advocatenkantoor | Licht van boven | Details in koper of messing |
| Een avondevenement | Lichtstraal | Kop in bleek lagunegroen |

Startpunten, geen regels. Test elk met je echte kop en logo.

## CSS voor een petrol kleurverloop in een donkere interface

Diep petrol is een mooi alternatief voor zwart of marine in een donkere interface. Het voelt zachter dan puur zwart en geeft bleke tekst toch ruim contrast. Hier is een achtergrond voor een app-schil met een zachte gloed boven aan de pagina. Meer over de aanpak in [ontwerpen voor de donkere modus](https://gradiently.design/nl/guide/dark-mode-design).

```css
:root {
  --abyss: #042f2e;
  --deep-teal: #115e59;
  --lagoon: #5eead4;
}

body {
  min-height: 100vh;
  margin: 0;
  color: #f0fdfa;
  background-color: var(--abyss);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgb(20 184 166 / 0.35) 0%, transparent 70%),
    linear-gradient(180deg, var(--deep-teal) 0%, var(--abyss) 60%);
}

a { color: var(--lagoon); }
```

Een schil in diep petrol met een petrolgloed bovenaan. Links in bleek lagunegroen blijven er goed leesbaar.

## Leesbare tekst op petrol

Middenpetrol is bedrieglijk. `#14b8a6` lijkt sterk genoeg voor witte letters, maar meet ongeveer 2,5 op 1, een duidelijke afkeuring. Wit heeft Kelp (`#0f766e`, ongeveer 5,5 op 1) of donkerder nodig. Gebruik op alles vanaf Aqua en lichter de kleur Afgrond `#042f2e` als inkt: dat houdt de tekst in de petrolfamilie en leest makkelijk.

| Achtergrond | Witte tekst | Tekst in Afgrond #042f2e |
| --- | --- | --- |
| Lagune `#5eead4` | Faalt | Ongeveer 9,8:1 |
| Petrol `#14b8a6` | Ongeveer 2,5:1, faalt | Ongeveer 5,8:1 |
| Rif `#0d9488` | Ongeveer 3,7:1, alleen grote tekst | Zwak |
| Kelp `#0f766e` | Ongeveer 5,5:1, haalt het | Faalt |
| Diep petrol `#115e59` | Ongeveer 7,6:1, haalt het | Faalt |

Bij petrol schakel je tussen Rif en Kelp van donkere naar witte letters.

Een staande spa-post met witte tekst op een diep petrol kleurverloop

Als staande post staat de kop in het rustigste petrol.

Hetzelfde spa-ontwerp als hoge story, met het petrolkleurige licht verplaatst voor dit formaat

Hetzelfde ontwerp als story, opnieuw opgebouwd in plaats van bijgesneden.

Dat laatste punt is belangrijker dan het lijkt. Een verloop dat van post naar story wordt bijgesneden, verplaatst het licht naar de verkeerde plek. In Gradiently wordt een Mark in elk formaat opnieuw opgebouwd, en de Designer kan de andere formaten voor je maken, zodat een petrol look in balans blijft in de feed, de story en de [hero van je website](https://gradiently.design/nl/guide/website-hero-background).

## FAQ

### Welke kleuren passen bij een petrol kleurverloop?

Cyaan, smaragd, blauw en marine mengen erin. Koraal, perzik, koper en goud zijn sterke warme accenten als je ze buiten het verloop gebruikt.

### Wat is de hexcode voor petrol?

De benoemde webkleur `teal` is `#008080`. De meeste moderne paletten gebruiken levendiger versies zoals `#14b8a6` voor middenpetrol en `#0f766e` voor een diepere.

### Wat is het verschil tussen petrol en turkoois?

Petrol is dieper en gedempter; turkoois is lichter, helderder en leunt iets meer naar groen. Beide liggen tussen blauw en groen.

### Kan ik witte tekst op petrol gebruiken?

Alleen op diep petrol, vanaf ongeveer `#0f766e` en donkerder. Heldere en lichte tinten petrol hebben donkere tekst nodig om het contrast te halen.

### Is petrol een goede kleur voor de donkere modus?

Ja. Een heel donker petrol zoals `#042f2e` is zachter dan zwart en onderscheidender dan marine, en bleke petrolaccenten lezen er goed op.