Petrol kleurverloop: codes van lagune tot diepzee

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.

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.

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.

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.

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 legt de aantrekkingskracht uit, en koraal kleurverlopen heeft codes voor de andere kant.

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.

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.

: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); }

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.

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.