# Groene kleurverlopen: fris, diep en elektrisch

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

Groen kan een lenteochtend zijn, een besloten club of een flyer voor een rave. Hier zijn groene kleurverlopen voor elk, met codes, en een uitweg uit het cliché van bladgroen.

## The short version

- Een groen kleurverloop mengt tinten groen, van bleek mint en salie tot smaragd, bosgroen en elektrisch limoen, vaak met een naburig petrol of geel.
- Groen wordt breed geassocieerd met natuur, gezondheid, groei en geld, en daarom zie je het zo vaak in duurzaamheid, wellness en finance.
- Groen mengt schoon richting petrol, blauw en geel, maar wordt vaak grijs als je het rechtstreeks in roze, rood of paars mengt.
- Witte tekst werkt op diepe groenen zoals #14532d, maar een middengroen zoals #16a34a vraagt om donkere tekst of grote formaten.
- Onverwachte groenen zoals olijf, flessengroen en chartreuse, gecombineerd met een partnerkleur die niet uit de natuur komt, vermijden de sleetse eco-look.

Een **groen kleurverloop** mengt tinten groen, van bleek mint en salie via smaragd en bosgroen tot elektrisch limoen, vaak met een naburig petrol of geel. Groen heeft meer bereik dan bijna elke andere kleur: het kan fris en schoon aanvoelen, diep en duur, of luid en synthetisch. Hieronder staan paletten voor een groen kleurverloop in elke stemming met kopieerbare CSS, de tekstkleuren die erop werken en hoe je voorkomt dat je op elk duurzaamheidsverslag lijkt.

## De groene familie

Groenen neigen twee kanten op. Richting geel worden ze limoen, chartreuse en olijf, die warm, energiek of aards aanvoelen. Richting blauw worden ze petrol, jade en smaragd, die koel, rustig en verzorgd aanvoelen. Maak ze grijzer en je krijgt salie, zacht en volwassen. Maak ze donkerder en je krijgt bosgroen en flessengroen, die gevestigd en een tikje luxe aanvoelen.

- Mint: #d1fae5
- Salie: #a3b18a
- Limoen: #a3e635
- Smaragd: #059669
- Petrol: #0f766e
- Olijf: #556b2f
- Bosgroen: #14532d
- Flessengroen: #0b3b2e

Acht groenen. Versies van één kleurfamilie die naar geel neigen, naar blauw neigen, vergrijsd zijn of diep.

## Wat een groen kleurverloop uitstraalt

De breedst gedeelde associaties van groen zijn natuur, groei, gezondheid en frisheid, en die komen rechtstreeks van planten. Conventie heeft er meer aan toegevoegd: doorrijden bij verkeerslichten, geld in de Verenigde Staten vanwege de bankbiljetten, en succes in dashboards en financiële apps. Op sommige plekken heeft het ook religieuze en nationale betekenissen, en [kleurbetekenissen over de hele wereld](https://gradiently.design/nl/guide/color-meanings-around-the-world) behandelt ze.

In de praktijk betekent het dat de tint het meeste zegt. Mint zegt schoon. Salie zegt rustig en doordacht. Bosgroen en flessengroen zeggen erfgoed. Limoen zegt energie. Petrol zegt verzorgd. Beslis welke van die je bedoelt voordat je een kleurverloop kiest, en kiezen uit de paletten hieronder wordt veel makkelijker.

## Frisse en mintgroene kleurverlopen

Bleke groenen voelen schoon, koel en licht. Ze passen bij huidverzorging, gezondheid, eten en alles wat fris moet aanvoelen. Houd tekst donker en maak ze aan één uiteinde iets warmer, zodat ze niet klinisch aanvoelen.

- Mint: `linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 100%)`
- Lenteochtend: `linear-gradient(160deg, #f0fdf4 0%, #bbf7d0 55%, #fef9c3 100%)`
- Saliepapier: `linear-gradient(135deg, #e3eadb 0%, #a3b18a 100%)`
- Aqua naar limoen: `linear-gradient(135deg, #ccfbf1 0%, #d9f99d 100%)`

Lichtgroene kleurverlopen. De uiteinden in geel en limoen voegen warmte toe en voorkomen dat ze koud ogen.

## Diepe en bosgroene kleurverlopen

Donkere groenen horen bij de kleuren die het duurst ogen. Denk aan raceauto’s, oude bibliotheken en verpakkingen met een lange geschiedenis. Ze dragen witte en crèmekleurige tekst goed en gaan prachtig samen met goud, messing en warm gebroken wit.

- Flessengroen: `linear-gradient(180deg, #03140e 0%, #0b3b2e 55%, #1f6f50 100%)`
- Bosgrond: `linear-gradient(160deg, #0a1f14 0%, #14532d 55%, #3f7d4e 100%)`
- Smaragdgloed: `radial-gradient(circle at 70% 20%, #34d399 0%, #065f46 40%, #022c22 100%)`
- Olijf naar messing: `linear-gradient(135deg, #1a2410 0%, #556b2f 60%, #c9b458 100%)`

Diepgroene kleurverlopen. Olijf naar messing laat zien hoe goed donkergroen een warme metallic partner verdraagt.

## Elektrisch limoen en neongroene kleurverlopen

Zuurgroen en limoengroen zijn luid en synthetisch, op de beste manier. Ze passen bij sport, muziek, gaming en lanceringen in tech. Op een bijna zwarte ondergrond gloeien ze. Op wit zijn ze soms lastig om naar te kijken, dus gebruik ze daar in kleine vlakken.

- Limoen op zwart: `linear-gradient(135deg, #0a0a0a 0%, #1a2e05 50%, #a3e635 100%)`
- Limoen naar citroen: `linear-gradient(135deg, #84cc16 0%, #facc15 100%)`
- Zure gloed: `radial-gradient(circle at 50% 50%, #bef264 0%, #4d7c0f 45%, #0c1a05 100%)`
- Groen naar cyaan: `linear-gradient(135deg, #22c55e 0%, #06b6d4 100%)`

Elektrische groenen. Alleen buren: zwart, geel en cyaan.

## Kleurverlopen in petrol en jade

Groen dat naar blauw neigt is rustig, verzorgd en stil zelfverzekerd. Het werkt goed voor finance, wellness en reizen, en is in die categorieën minder verwacht dan zuiver blauw.

- Diep petrol: `linear-gradient(160deg, #042f2e 0%, #0f766e 55%, #5eead4 100%)`
- Jade naar aqua: `linear-gradient(135deg, #064e3b 0%, #0d9488 50%, #67e8f9 100%)`
- Lagunelicht: `linear-gradient(135deg, #134e4a 0%, #2dd4bf 60%, #f0fdfa 100%)`

Petrol en jade. Deze zitten tussen de groenen hierboven en de [blauwe kleurverlopen](https://gradiently.design/nl/guide/blue-gradient) in.

## Het duurzaamheidscliché vermijden

Omdat groen zo sterk met natuur is verbonden, is het de standaardkleur geworden voor alles wat eco, biologisch of duurzaam is. Een helder bladgroen, een witte achtergrond en een icoon van een blad lezen nu als de categorie, niet als een bepaald bedrijf. Werk je in die hoek en wil je opvallen, verander dan minstens één van die drie dingen.

### Cliché

- Helder bladgroen op wit
- Groen dat alleen met meer groen en blauw is gemengd
- Blaadjes, wereldbollen en kiemplantjes als versiering
- Een gladde, glanzende digitale afwerking

### Fris

- Olijf, flessengroen, salie of chartreuse
- Een partner die niet uit de natuur komt: roze, lila, crème of zwart
- Letters en textuur in plaats van iconen
- Papierkorrel of een mat materiaal

Groen en roze zijn hiervoor een bijzonder goede combinatie, omdat die botanisch aanvoelt zonder letterlijk te zijn. Ze liggen wel bijna tegenover elkaar op de kleurencirkel, dus houd ze in aparte vlakken in plaats van de ene in de andere te mengen. [Complementaire kleuren](https://gradiently.design/nl/guide/complementary-colors) legt uit waarom.

Flessengroen en roze, gedeeld: `linear-gradient(90deg, #0b3b2e 0% 62%, #f4b6c2 62% 100%)`

Twee tegenpolen naast elkaar met een harde rand. Opvallend, botanisch en totaal anders dan een doorsnee eco-palet.

## Tekst op groene kleurverlopen

| Tekst op achtergrond | Contrast | Oordeel |
| --- | --- | --- |
| Wit op `#14532d` | 9,1:1 | Uitstekend |
| Wit op `#15803d` | 5,0:1 | Goed voor lopende tekst |
| Wit op `#16a34a` | 3,3:1 | Alleen grote tekst |
| `#052e16` op `#22c55e` | 6,5:1 | Donkere inkt werkt hier |
| `#052e16` op `#a3e635` | 9,9:1 | Uitstekend |
| `#052e16` op `#86efac` | 10,6:1 | Uitstekend |

Contrastverhoudingen volgens WCAG, berekend. Lopende tekst heeft 4,5:1 nodig, grote tekst 3:1.

Heldere groenen zijn lichter dan ze lijken, dus witte tekst erop haalt het meestal niet. Een heel donkergroene inkt leest beter en houdt alles in de familie. Controleer bij elk kleurverloop het lichtste punt achter witte tekst. [Tekst op een kleurverloop](https://gradiently.design/nl/guide/text-on-gradient) laat zien hoe.

Een staande post met veldnotities, getiteld Wat er groeit in oktober, op een diep kleurverloop

Een rustig, diep veld voor een redactionele post.

Een verticale aftelstory met de tekst Nog 3 dagen op een helder kleurverloop

Een luide aftelstory, waarin een elektrisch groen zou gloeien.

```css
.panel {
  background-color: #0b3b2e;
  background-image: linear-gradient(180deg, #03140e 0%, #0b3b2e 55%, #1f6f50 100%);
  color: #f5f0e6;
}
```

Flessengroen met warme crèmekleurige tekst: een makkelijke, premium combinatie.

Voor meer paletten uit bossen, velden en water, zie [kleurpaletten uit de natuur](https://gradiently.design/nl/guide/nature-color-palettes).

## FAQ

### Welke kleuren passen goed bij groen in een kleurverloop?

Petrol, blauw, geel en limoen mengen schoon met groen. Roze, rood en paars zijn opvallende partners, maar horen in aparte vlakken, omdat groen erin mengen grijs oplevert.

### Wat is de CSS voor een donkergroen kleurverloop?

Bijvoorbeeld linear-gradient(180deg, #03140e 0%, #0b3b2e 55%, #1f6f50 100%) geeft een diep flessengroen. Elk palet op deze pagina kun je als CSS kopiëren.

### Welke tekstkleur werkt op groen?

Wit of crème werkt op diepe groenen. Gebruik op heldere of lichte groenen een heel donkergroene inkt, want witte tekst zakt er meestal onder het aanbevolen contrast.

### Hoe gebruik ik groen zonder op een eco-merk te lijken?

Kies minder verwachte groenen zoals olijf, flessengroen of chartreuse, combineer ze met een kleur die niet uit de natuur komt, zoals roze of lila, en gebruik textuur of letters in plaats van bladmotieven.