Groene website kleuren: 6 paletten met hexcodes

Groene kleurenpaletten voor je website met hexcodes, op contrast geteste tekstparen en toepassingen, zodat je een groen kiest dat leesbaar blijft en bij je merk past.

Veelgestelde vragen

Wat is het beste groen voor een website?

Er bestaat geen enkel beste groen, maar een diep, iets gedempt groen zoals #166534 of #2D6A4F is het veiligste beginpunt. Beide halen de WCAG AA-drempel van 4,5:1 voor tekst tegen wit (7,13:1 en 6,39:1), dus ze werken voor knoppen, links en koppen. Felle groentinten zoals #22C55E halen dat tegen wit niet (2,28:1) en kun je beter bewaren voor pictogrammen of donkere achtergronden.

Welke kleuren passen goed bij groen op een website?

Warm gebroken wit en crème (#F6F4EC), bijna zwarte groentinten (#081C15) en één warme accentkleur zoals amber of terracotta passen allemaal goed bij groen. Kies neutrale tinten met een licht groene ondertoon in plaats van zuiver grijs, zodat de pagina samenhangend voelt, en beperk het accent tot één actiekleur.

Is groen toegankelijk voor tekst?

Donkergroen wel, licht en middelgroen vaak niet. WCAG 2 AA vraagt minimaal 4,5:1 voor normale tekst en 3:1 voor grote tekst en interface-onderdelen. Test elk kleurpaar in plaats van op het oog te oordelen, want middentonen zoals #40916C (3,83:1 op wit) halen de norm alleen voor grote tekst.

Wat communiceert groen in webdesign?

Groen wordt het vaakst geassocieerd met natuur, groei, gezondheid, duurzaamheid en geld. Daarom zie je het zo vaak op sites over welzijn, financiën, energie en buitenleven. De betekenis verschuift per tint: diep bosgroen oogt gevestigd en rustig, terwijl limoengroen energiek en modern overkomt. Zie dit als conventies en niet als garanties, en test met je eigen doelgroep.

Moet ik groen gebruiken voor call-to-action-knoppen?

Dat kan, zolang de knop opvalt tussen de rest van de pagina en het label voldoende contrast heeft. Een donkergroene knop met witte tekst werkt op lichte pagina's. Op een pagina die grotendeels groen is, onderscheidt een knop in een warme accentkleur zich vaak beter. Lees onze gids over conversievriendelijke kleurenschema's om die keuze te maken.

Heb ik een groen palet voor de donkere modus nodig?

Niet verplicht, maar donkergroene achtergronden zijn op zichzelf een populaire ontwerpkeuze. Bied je er een aan, gebruik dan niet gewoon het lichte palet opnieuw: felle groentinten die op wit falen, werken vaak goed op bijna zwart groen, bijvoorbeeld #22C55E op #052E16 met 6,54:1.

Kort antwoord: Gebruik voor een groene website een diep groen zoals #166534 of #2D6A4F voor knoppen, links en koppen, een getinte gebroken witte tint zoals #F6F4EC of #F0FDF4 als achtergrond, en bewaar felle groentinten zoals #22C55E alleen voor donkere achtergronden of decoratie. Donkergroen op een lichte achtergrond haalt de WCAG AA-drempel van 4,5:1 voor tekst. Felgroen op wit niet (#22C55E op wit is 2,28:1).

Hieronder staan zes groene paletten met hexwaarden, gemeten contrastverhoudingen en het soort site waar elk palet bij past. Elke verhouding is berekend met de WCAG-formule voor relatieve luminantie, en je kunt elk paar zelf controleren met de contrastchecker voor kleuren.

Waarom groen lastig is op schermen

Groen zit in het midden van het luminantiebereik. Een middelgroen ziet er levendig uit, maar tegen wit is het vaak te licht voor tekst en tegen zwart vaak te donker. Daarom kan een groen dat in een logo prachtig staat, als knopkleur toch falen.

De praktische regel: kies je groen op basis van de contrastverhouding, niet op hoe het eruitziet in een kleurstaal. Mik voor normale tekst op 4,5:1 of hoger. Voor grote tekst (ongeveer 24px normaal of 19px vet en groter) en voor UI-onderdelen zoals randen van invoervelden en pictogrammen is 3:1 het minimum.

Zes groene websitepaletten met hexcodes

Elk palet toont een achtergrond, een tekstkleur, een accent voor knoppen of links, en de contrastverhouding van het paar dat ertoe doet.

1. Bos en crème (redactioneel, buiten, eten)

Rol	Hex	Paar en verhouding
Achtergrond	#F6F4EC
Tekst en koppen	#1B4332	op achtergrond: 10,06:1
Knop / link	#2D6A4F	witte tekst erop: 6,39:1
Zacht vlak	#95D5B2	#1B4332-tekst erop: 6,56:1

Warm, rustig en goed leesbaar. De crèmekleurige achtergrond voorkomt dat het klinisch aanvoelt. Goed voor restaurants, boerderijwinkels, reizen en sites met lange teksten.

2. Frisse munt (welzijn, klinieken, gezondheidscontent)

Rol	Hex	Paar en verhouding
Achtergrond	#F0FDF4
Tekst en koppen	#14532D	op achtergrond: 8,70:1
Knop	#15803D	witte tekst erop: 5,02:1
Donkere band	#052E16	#DCFCE7-tekst erop: 13,57:1

Licht en schoon. Het knopgroen zit net boven AA, dus houd knoplabels op normaal of zwaarder gewicht en plaats de knop niet op getinte vlakken.

3. Salie en olijf (ateliers, interieur, handgemaakte producten)

Rol	Hex	Paar en verhouding
Achtergrond	#E9F5DB
Tekst en koppen	#31572C	op achtergrond: 7,33:1
Knop	#4F772D	witte tekst erop: 5,24:1
Accent	#90A955	#132A13-tekst erop: 5,84:1

Een gedempt, aards palet. Werkt goed voor portfolio's en boetiekmerken waar je groen wilt zonder dat het schreeuwt.

4. Diepgroen donker thema (fintech, SaaS, premium)

Rol	Hex	Paar en verhouding
Achtergrond	#081C15
Tekst	#B7E4C7	op achtergrond: 12,58:1
Accent / links	#40916C	op achtergrond: 4,62:1
Kaart	#1B4332	#95D5B2-tekst erop: 6,56:1

Op donkere achtergronden kunnen middelgroene tinten als accent dienen. Let op: #40916C haalt het op #081C15 wel, maar op wit niet (3,83:1), dus gebruik het niet opnieuw in een lichte sectie.

5. Neonlimoen op donkergroen (evenementen, creators, jonge merken)

Rol	Hex	Paar en verhouding
Achtergrond	#1A2E05
Kop / knop	#A3E635	op achtergrond: 9,69:1
Alternatief felgroen	#22C55E	op #052E16: 6,54:1

Veel energie en zeer goed leesbaar, omdat het lichte limoen op een donkere basis staat. Gebruik het spaarzaam: een hele pagina vol limoen vermoeit de ogen snel.

6. Blauwgroen (SaaS, healthtech, duurzaamheid)

Rol	Hex	Paar en verhouding
Achtergrond	#CCFBF1
Tekst en koppen	#134E4A	op achtergrond: 8,41:1
Knop	#0F766E	witte tekst erop: 5,47:1

Neigt naar blauwgroen, wat technischer en minder "natuur" overkomt. Een goede keuze als je groen wilt zonder het organische gevoel.

Groentinten die falen, en wat je ervoor in de plaats kunt gebruiken

Faalt	Paar	Verhouding	Vervang door
Felgroene knop	#22C55E met witte tekst	2,28:1	#15803D met witte tekst (5,02:1)
Limoenkleurige link op wit	#65A30D op wit	3,09:1	#4D7C0F op wit (4,99:1)
Middelgroene broodtekst	#40916C op wit	3,83:1	#2D6A4F op wit (6,39:1)

De middentonen halen de drempel van 3:1 nog wel, dus ze zijn acceptabel voor grote koppen, pictogrammen en randen, maar niet voor lopende tekst of kleine links. Meer over wat er misgaat lees je in voorbeelden van slecht kleurcontrast, en voor sterkere combinaties in het algemeen in de gids over kleurenpaletten met hoog contrast.

Zo bouw je stap voor stap je eigen groene palet

Bepaal eerst de taak van groen. Is het de merkkleur, de actiekleur of slechts een accent? Groen dat alleen als merkkleur dient, mag elke tint zijn. Groen voor acties moet het contrast halen.
Kies een donker ankerpunt. Begin met een groen tussen #14532D en #2D6A4F. Dit wordt je kleur voor koppen, links en knoppen op lichte achtergronden.
Tint je achtergrond. Gebruik een heel licht groen of een warme crème in plaats van zuiver wit, bijvoorbeeld #F0FDF4 of #F6F4EC. Controleer het tekstcontrast opnieuw na het tinten.
Voeg één accent toe dat niet groen is. Amber of terracotta naast groen geeft knoppen houvast op pagina's met veel groen. Controleer het contrast van het label: #92400E-tekst op #FEF3C7 meet bijvoorbeeld 6,37:1.
Test elk paar tekst en achtergrond. Haal koppen, broodtekst, links, knoppen en placeholdertekst door een checker. Alles onder 4,5:1 op broodtekstformaat heeft een donkerdere of lichtere tint nodig.
Controleer de hover- en uitgeschakelde staten. Hovertinten glijden vaak af naar een te laag contrast.
Sla het palet op als benoemde tokens. Met variabelenamen zoals brand-900, brand-700 en brand-100 is een latere wijziging één regel. Onze gids over Tailwind CSS-kleuren laat het idee van een tintenschaal zien, en meerdere hexcodes hierboven komen uit zo'n schaal.

Welk groen voor welk soort site

Duurzaamheid, energie, non-profit: bos en crème, of salie. Echte voorbeelden van de sfeer vind je in ons Greenfield Renewables-template.
Gezondheid en welzijn: frisse munt of blauwgroen.
Financiën en SaaS: diepgroen donker thema, met één felle accentkleur.
Eten, boerderij, tuin: bos en crème met een warm accent.
Creator- en evenementpagina's: neonlimoen op donkergroen, beperkt tot koppen en één knop.

Kopieerbare checklist voor je publiceert

[ ] Broodtekst heeft minstens 4,5:1 contrast met de achtergrond
[ ] Grote tekst en pictogrammen halen minstens 3:1
[ ] Knoplabels halen 4,5:1 tegen de knopkleur
[ ] Links zijn niet alleen op kleur van broodtekst te onderscheiden (onderstrepen werkt)
[ ] Felgroen komt alleen voor op donkere achtergronden of als decoratie
[ ] Naast groen is er hooguit één accentkleur
[ ] Donkere secties gebruiken eigen geteste paren, geen hergebruikte lichte paren
[ ] Het palet is opgeslagen als benoemde tokens, zodat je het op één plek kunt wijzigen

Weet je niet zeker hoeveel kleuren een site in totaal nodig heeft? De gids over kleurenschema's voor websites behandelt de basis, en het woordenlijstartikel over kleurenpaletten legt de gebruikte termen uit.

Een groen palet toepassen op een echte site

Heb je je hexcodes, dan heb je een plek nodig om ze toe te passen. Met het gratis abonnement van We.Inc publiceer je tot drie sites vanuit kant-en-klare templates; de AI-bouwer die uit een prompt een site schetst, start vanaf het Starter-abonnement voor $20 per maand. Je kunt je hier aanmelden en je hexcodes voor achtergrond, tekst en knoppen in de siteopmaak plakken, en daarna dezelfde contrastcontroles uitvoeren op de gepubliceerde pagina's.