# Groenblauwe verlopen: frisse codes die natuurlijk voelen

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

Groen dat blauw ontmoet is de kleur van ondiep water boven zand, van een meer onder dennen, van het noorderlicht. Daarom voelt dit paar zo makkelijk natuurlijk. Zo houd je het zo.

## The short version

- Een groen-blauw verloop mengt aangrenzende koele tinten zoals smaragd #10b981, teal #0d9488 en hemelsblauw #0284c7, met teal of aqua in het midden.
- Omdat groen en blauw op de kleurencirkel naast elkaar liggen, blijft de overgang zuiver en leest hij als natuurlijk omdat hij water, ijs en lucht nabootst.
- Heldere groenen en aqua’s zijn te licht voor witte tekst, dus gebruik diepe teal-inkt op lichte versies en wit of mint op donkere.
- Donkere groen-blauwe verlopen voelen rustig en betrouwbaar, lichte versies voelen fris en schoon.
- Het paar past bij reizen, welzijn, financiën, outdoormerken en technologie, en een warm accent zoals zand of koraal voorkomt dat het koud aanvoelt.

Een **groen-blauw verloop** mengt twee koele buren: groenen zoals smaragd `#10b981` of mint `#a7f3d0` en blauwen zoals `#0284c7` of hemel `#bae6fd`, met teal en aqua als brug ertussen. De overgang blijft zuiver omdat er geen grijs punt tussen de twee tinten zit. Het voelt natuurlijk omdat je het je hele leven in water, ijs en lucht hebt gezien. De codes hier volgen vier landschappen, met de tekstkleuren die op elk leesbaar zijn en CSS voor licht en donker.

## Waarom groen en blauw samen natuurlijk ogen

Groen en blauw zijn [analoge kleuren](https://gradiently.design/nl/guide/analogous-colors): ze liggen naast elkaar op de cirkel, dus elke stap ertussen is een echte kleur, meestal teal en aqua. De natuur toont het paar voortdurend, van ondiepe zeeën waar blauw water over groen wier en zand loopt tot gletsjermeren en dennenbossen die in stil water spiegelen. Lenen uit die taferelen is de makkelijkste manier om het verloop rustig te laten voelen in plaats van zakelijk.

- Diepe teal-inkt: #042f2e
- Den: #065f46
- Smaragd: #10b981
- Teal: #0d9488
- Aqua: #22d3ee
- Meerblauw: #0284c7
- Mint: #a7f3d0
- Hemel: #bae6fd

Het groen-naar-blauwbereik met een diepe inkt voor tekst. Teal en aqua zijn de brugkleuren die de overgang doorlopend houden.

## Lagune: heldere aqua- en groenverlopen

Ondiep tropisch water is vooral aqua, met groen waar het het ondiepst is en blauw waar het dieper wordt. Deze verlopen voelen vakantiehelder. Voeg een warme zandstop toe als je wilt dat ze als een strand voelen in plaats van een zwembad.

- Lagune: `linear-gradient(180deg, #a5f3fc 0%, #2dd4bf 50%, #0891b2 100%)`
- Rif: `linear-gradient(135deg, #6ee7b7 0%, #22d3ee 55%, #0284c7 100%)`
- Zandbank: `linear-gradient(0deg, #fde68a 0%, #5eead4 30%, #0ea5e9 100%)`

Heldere groen-blauwe verlopen. Het derde voegt zand onderaan toe, wat het hele kader verwarmt. [Oceaanverlopen](https://gradiently.design/nl/guide/ocean-gradient) heeft er meer.

## Dennenmeer: diepe groen-blauwe verlopen

Donkergroen dat overloopt in donkerblauw voelt rustig, kostbaar en betrouwbaar. Denk aan een bosmeer in de schemering of de kleur van een oude fles. Deze dragen witte tekst goed en passen bij financiën, outdoorspullen, architectuur en elk merk dat standvastig wil voelen.

- Dennenmeer: `linear-gradient(160deg, #022c22 0%, #065f46 45%, #0c4a6e 100%)`
- Teal in maanlicht: `radial-gradient(circle at 80% 20%, #0d9488 0%, #134e4a 40%, #031418 80%)`
- Fles naar marine: `linear-gradient(135deg, #064e3b 0%, #115e59 50%, #1e3a8a 100%)`

Donker groen en blauw. Deze vertonen makkelijk banding in gecomprimeerde afbeeldingen, dus voeg vóór het exporteren een fijne korrel toe.

## Gletsjer: bleke mint- en hemelverlopen

Til het paar helemaal op en je krijgt gletsjerijs en koude ochtenden: schoon, luchtig en heel rustig. Deze passen bij gezondheidszorg, huidverzorging, schoonmaak en productiviteitsapps. Ze kunnen klinisch voelen, dus een vleugje warm wit helpt.

- Gletsjer: `linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 45%, #bae6fd 100%)`
- Koude ochtend: `linear-gradient(180deg, #f0fdfa 0%, #ccfbf1 50%, #e0f2fe 100%)`
- IJs in zonlicht: `radial-gradient(circle at 25% 25%, #fefce8 0%, #d1fae5 45%, #bae6fd 100%)`

Bleek groen en blauw. Diepe teal-inkt leest op elk. [Mintverlopen](https://gradiently.design/nl/guide/mint-gradient) gaat dieper op groen in.

## Aurora: groen en blauw op een nachtelijke hemel

Het noorderlicht is groen en blauw licht op zwart, daarom behoren aurora-verlopen tot de meest geliefde donkere achtergronden. Houd de kleur in zachte banden en laat de donkere ondergrond het grootste deel van het kader dragen. [Aurora-verlopen](https://gradiently.design/nl/guide/aurora-gradients) behandelt de volledige techniek.

- Aurora: `radial-gradient(ellipse at 30% 30%, #34d399 0%, #0f766e 30%, #0b1e3a 65%, #030712 90%)`
- Lichtband: `linear-gradient(170deg, #030712 0%, #064e3b 40%, #0e7490 70%, #030712 100%)`
- Poolwervel: `conic-gradient(from 210deg at 60% 40%, #030712, #10b981, #0ea5e9, #030712)`

Groen en blauw op bijna-zwart. Mint en aqua zijn op deze allebei opvallende tekstkleuren.

## Tekstkleuren op groen-blauwe verlopen

Smaragd en aqua zijn verrassend licht, dus witte tekst op de heldere versies faalt vaak. Diepe teal-inkt werkt op lichte mengsels en houdt alles in één familie; wit en mint lezen goed op de donkere. De verhoudingen hieronder gebruiken de WCAG-formule. [Tekst op een verloop](https://gradiently.design/nl/guide/text-on-gradient) laat zien wat je doet als een regel beide uiteinden kruist.

| Achtergrond | Tekst | Contrast | Oordeel |
| --- | --- | --- | --- |
| Smaragd `#10b981` | Wit | 2,5:1 | Faalt |
| Aqua `#22d3ee` | Wit | 1,8:1 | Faalt |
| Teal `#0d9488` | Wit | 3,7:1 | Alleen grote koppen |
| Mint `#a7f3d0` | Diep teal `#042f2e` | 11,3:1 | Uitstekend |
| Den `#065f46` | Wit | 7,7:1 | Uitstekend |
| Nacht `#04202a` | Aquamint `#5eead4` | 11,4:1 | Uitstekend, kleur als inkt |

Op een groen-blauw mengsel is het groene uiteinde meestal het lichtste, dus controleer daar eerst het contrast.

Een staande reispost met diepe teal letters op een helder aqua-groen verloop

Een post van een reisbureau in heldere lagunetinten, met diepe teal letters.

Een liggende linkafbeelding voor een financiële app met witte letters op een verloop van donkergroen naar marineblauw

Een LinkedIn-linkafbeelding op den naar marine voor een financiële app.

## Hoe je een groen-blauw palet opwarmt

Groen en blauw zijn allebei koel, dus een heel merk erin kan afstandelijk voelen. Eén warm accent lost het op. Zand, koraal en zacht goud liggen allemaal aan de overkant van de cirkel ten opzichte van teal, dus gebruik ze naast het verloop, in een knop, een logo of een streepje aan één rand, in plaats van erin te mengen. [Complementaire kleuren](https://gradiently.design/nl/guide/complementary-colors) legt uit waarom mengen over de cirkel heen grijs wordt.

### Vermijd

- Teal rechtstreeks in koraal gemengd
- Witte tekst op smaragd of aqua
- Elk oppervlak in koele kleuren
- Verzadigd groen op verzadigd blauw op volle sterkte

### Doe

- Koraal of zand naast het verloop als accent
- Diepe teal-inkt op lichte mengsels
- Een warm wit of crème voor panelen en letters
- Eén kleur die leidt, de ander ondersteunend

## CSS voor groen-blauwe verlopen in licht en donker

```css
.hero {
  background-color: #ecfdf5;
  background-image: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 45%, #bae6fd 100%);
  color: #042f2e;
}

@media (prefers-color-scheme: dark) {
  .hero {
    background-color: #031418;
    background-image:
      radial-gradient(ellipse at 30% 25%, #0d9488 0%, transparent 50%),
      linear-gradient(160deg, #022c22 0%, #0c4a6e 100%);
    color: #ecfeff;
  }
}
```

Gletsjer in lichte modus, dennenmeer in donkere modus. Dezelfde tinten, dus het merk voelt nog als één geheel.

Een lichte en donkere versie van hetzelfde groen en blauw combineren is een nette manier om een themawissel ontworpen te laten voelen in plaats van omgekeerd. [Donkere-modusverlopen](https://gradiently.design/nl/guide/dark-mode-gradients) gaat dieper in. In Gradiently rendert één Mark op elk formaat waarin je ontwerpt en kiest hij per regel lichte of donkere inkt uit zijn eigen palet, dus zowel heldere lagunetinten als donkere dennentinten houden hun woorden leesbaar.

## FAQ

### Wat is een goede code voor een groen-blauw verloop?

Een heldere optie is `linear-gradient(135deg, #6ee7b7 0%, #22d3ee 55%, #0284c7 100%)`. Voor iets donkerders en rustigers probeer je `linear-gradient(160deg, #022c22 0%, #065f46 45%, #0c4a6e 100%)`.

### Passen groen en blauw bij elkaar?

Ja. Ze liggen naast elkaar op de kleurencirkel, met teal en aqua ertussen, dus de overgang blijft zuiver en voelt natuurlijk.

### Welke kleur zit tussen groen en blauw?

Teal, rond `#0d9488`, met aqua en turkoois als helderdere verwanten.

### Welke tekstkleur past op een groen-blauw verloop?

Diep teal zoals `#042f2e` op lichte versies en wit of mint op donkere. Wit op heldere smaragd of aqua faalt op contrast.

### Wat betekent een groen-blauw verloop voor een merk?

Het leest meestal als rustig, fris en betrouwbaar, omdat het water, lucht en planten weerklinkt. Donkere versies voelen standvastig; lichte voelen schoon.