Groenblauwe verlopen: frisse codes die natuurlijk voelen

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

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.

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.

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.

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 behandelt de volledige techniek.

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 laat zien wat je doet als een regel beide uiteinden kruist.

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 legt uit waarom mengen over de cirkel heen grijs wordt.

CSS voor groen-blauwe verlopen in licht en donker

.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;
  }
}

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