Grüne Website-Farbschemata: 6 Paletten mit Hex-Codes

Grüne Farbpaletten für Websites mit Hex-Codes, kontrastgeprüften Textkombinationen und Einsatzbereichen: So wählen Sie ein gut lesbares Grün, das zu Ihrer Marke passt.

Häufige Fragen

Welches ist das beste Grün für eine Website?

Das eine beste Grün gibt es nicht, aber ein tiefes, leicht entsättigtes Grün wie #166534 oder #2D6A4F ist der sicherste Ausgangspunkt. Beide erreichen auf Weiß die WCAG-AA-Schwelle von 4,5:1 für Text (7,13:1 und 6,39:1) und eignen sich daher für Buttons, Links und Überschriften. Leuchtende Grüntöne wie #22C55E fallen auf Weiß durch (2,28:1) und sind besser für Icons oder dunkle Hintergründe geeignet.

Welche Farben passen auf einer Website gut zu Grün?

Warme Off-White- und Cremetöne (#F6F4EC), fast schwarze Grüntöne (#081C15) und ein einzelner warmer Akzent wie Bernstein oder Terrakotta passen gut dazu. Halten Sie Neutraltöne lieber leicht ins Grüne getönt statt reinem Grau, damit die Seite stimmig wirkt, und beschränken Sie den Akzent auf eine einzige Aktionsfarbe.

Ist Grün als Textfarbe barrierefrei?

Dunkle Grüntöne ja, helle und mittlere oft nicht. WCAG 2 AA verlangt mindestens 4,5:1 für normalen Text sowie 3:1 für großen Text und Bedienelemente. Prüfen Sie jede Farbkombination, statt nach Augenmaß zu urteilen: Mittlere Grüntöne wie #40916C (3,83:1 auf Weiß) liegen in einem Bereich, in dem sie nur für großen Text bestehen.

Was vermittelt Grün im Webdesign?

Grün wird meist mit Natur, Wachstum, Gesundheit, Nachhaltigkeit und Geld verbunden. Deshalb taucht es so oft auf Wellness-, Finanz-, Energie- und Outdoor-Seiten auf. Die Wirkung hängt vom Farbton ab: Tiefes Waldgrün wirkt etabliert und ruhig, Limettengrün energiegeladen und modern. Verstehen Sie das als Konventionen, nicht als Garantie, und testen Sie mit Ihrer eigenen Zielgruppe.

Sollte ich Grün für Call-to-Action-Buttons verwenden?

Sie können es tun, solange sich der Button vom Rest der Seite abhebt und die Beschriftung den Kontrast besteht. Ein dunkelgrüner Button mit weißem Text funktioniert auf hellen Seiten. Auf einer überwiegend grünen Seite hebt sich ein Button in warmer Akzentfarbe oft besser ab. In unserem Leitfaden zu conversionfreundlichen Farbschemata erfahren Sie, wie Sie sich entscheiden.

Brauche ich eine grüne Palette für den Dark Mode?

Nötig ist sie nicht, aber dunkelgrüne Hintergründe sind auch für sich genommen eine beliebte Designwahl. Wenn Sie einen Dark Mode anbieten, übernehmen Sie nicht einfach die helle Palette: Leuchtende Grüntöne, die auf Weiß durchfallen, wirken auf fast schwarzem Grün oft sehr gut, zum Beispiel #22C55E auf #052E16 mit 6,54:1.

Kurzantwort: Verwenden Sie für eine grüne Website ein tiefes Grün wie #166534 oder #2D6A4F für Buttons, Links und Überschriften, ein getöntes Off-White wie #F6F4EC oder #F0FDF4 als Hintergrund und reservieren Sie leuchtende Grüntöne wie #22C55E nur für dunkle Hintergründe oder als Dekoration. Dunkle Grüntöne auf hellem Hintergrund erreichen die WCAG-AA-Schwelle von 4,5:1 für Text. Leuchtendes Grün auf Weiß schafft das nicht (#22C55E auf Weiß: 2,28:1).

Nachfolgend finden Sie sechs Grünpaletten mit Hex-Werten, gemessenen Kontrastverhältnissen und der Art von Website, für die sie sich eignen. Jedes Verhältnis wurde mit der WCAG-Formel für die relative Luminanz berechnet. Jede Kombination können Sie selbst im Farbkontrast-Checker überprüfen.

Warum Grün auf Bildschirmen knifflig ist

Grün liegt im mittleren Helligkeitsbereich. Ein mittleres Grün wirkt lebendig, ist auf Weiß aber oft zu hell für Text und auf Schwarz oft zu dunkel. Deshalb kann ein Grün, das im Logo großartig aussieht, als Button-Farbe durchfallen.

Die praktische Regel: Wählen Sie Ihr Grün nach dem Kontrastverhältnis, nicht nach dem Eindruck im Farbfeld. Für normalen Text sollten es 4,5:1 oder mehr sein. Für großen Text (etwa ab 24 px regular oder 19 px fett) und für UI-Komponenten wie Eingabefeldrahmen und Icons gilt 3:1 als Minimum.

Sechs grüne Website-Paletten mit Hex-Codes

Jede Palette nennt einen Hintergrund, eine Textfarbe, einen Akzent für Buttons oder Links und das Kontrastverhältnis der entscheidenden Kombination.

1. Wald und Creme (Editorial, Outdoor, Food)

Rolle	Hex	Kombination und Verhältnis
Hintergrund	#F6F4EC
Text und Überschriften	#1B4332	auf Hintergrund: 10,06:1
Button / Link	#2D6A4F	weißer Text darauf: 6,39:1
Weiche Fläche	#95D5B2	Text in #1B4332 darauf: 6,56:1

Warm, ruhig und gut lesbar. Der cremefarbene Hintergrund verhindert, dass die Seite klinisch wirkt. Gut für Restaurants, Hofläden, Reiseseiten und Websites mit langen Texten.

2. Frisches Mint (Wellness, Praxen, Gesundheitsinhalte)

Rolle	Hex	Kombination und Verhältnis
Hintergrund	#F0FDF4
Text und Überschriften	#14532D	auf Hintergrund: 8,70:1
Button	#15803D	weißer Text darauf: 5,02:1
Dunkles Band	#052E16	Text in #DCFCE7 darauf: 13,57:1

Hell und klar. Das Button-Grün liegt nur knapp über AA. Setzen Sie Button-Beschriftungen daher in normaler oder kräftigerer Schrift und platzieren Sie den Button nicht auf getönten Flächen.

3. Salbei und Olive (Studios, Interior, Handgemachtes)

Rolle	Hex	Kombination und Verhältnis
Hintergrund	#E9F5DB
Text und Überschriften	#31572C	auf Hintergrund: 7,33:1
Button	#4F772D	weißer Text darauf: 5,24:1
Hervorhebung	#90A955	Text in #132A13 darauf: 5,84:1

Eine gedeckte, erdige Palette. Sie funktioniert gut für Portfolios und Boutique-Marken, bei denen Grün präsent sein soll, ohne zu schreien.

4. Tiefgrünes Dark Theme (Fintech, SaaS, Premium)

Rolle	Hex	Kombination und Verhältnis
Hintergrund	#081C15
Text	#B7E4C7	auf Hintergrund: 12,58:1
Akzent / Links	#40916C	auf Hintergrund: 4,62:1
Karte	#1B4332	Text in #95D5B2 darauf: 6,56:1

Auf dunklen Hintergründen können auch mittlere Grüntöne als Akzent dienen. Beachten Sie, dass #40916C auf #081C15 besteht, auf Weiß aber durchfällt (3,83:1). Verwenden Sie es daher nicht in einem hellen Abschnitt.

5. Neon-Limette auf Dunkelgrün (Events, Creator, junge Marken)

Rolle	Hex	Kombination und Verhältnis
Hintergrund	#1A2E05
Headline / Button	#A3E635	auf Hintergrund: 9,69:1
Alternatives Leuchtgrün	#22C55E	auf #052E16: 6,54:1

Sehr energiegeladen und gut lesbar, weil die helle Limette auf dunklem Grund sitzt. Setzen Sie sie sparsam ein: Eine ganze Seite in Limette ermüdet das Auge schnell.

6. Petrolgrün (SaaS, Health-Tech, Nachhaltigkeit)

Rolle	Hex	Kombination und Verhältnis
Hintergrund	#CCFBF1
Text und Überschriften	#134E4A	auf Hintergrund: 8,41:1
Button	#0F766E	weißer Text darauf: 5,47:1

Neigt zu Blaugrün und wirkt dadurch technischer und weniger „naturnah“. Eine gute Wahl, wenn Sie Grün ohne organische Anmutung wollen.

Grüntöne, die durchfallen, und was stattdessen funktioniert

Fällt durch	Kombination	Verhältnis	Besser
Leuchtend grüner Button	#22C55E mit weißem Text	2,28:1	#15803D mit weißem Text (5,02:1)
Limettenfarbener Link auf Weiß	#65A30D auf Weiß	3,09:1	#4D7C0F auf Weiß (4,99:1)
Mittelgrüner Fließtext	#40916C auf Weiß	3,83:1	#2D6A4F auf Weiß (6,39:1)

Die mittleren Töne erreichen immerhin die 3:1-Marke und sind damit für große Überschriften, Icons und Rahmen akzeptabel, nur nicht für Absatztext oder kleine Links. Mehr dazu, was schiefgehen kann, finden Sie unter Beispiele für schlechten Farbkontrast, und für stärkere Farbkombinationen allgemein im Leitfaden Farbpaletten mit hohem Kontrast.

So erstellen Sie Ihre eigene Grünpalette, Schritt für Schritt

Legen Sie zuerst die Aufgabe des Grüns fest. Ist es die Markenfarbe, die Aktionsfarbe oder nur ein Akzent? Reine Markengrüns können jeder Farbton sein. Aktionsgrüns müssen den Kontrast bestehen.
Wählen Sie einen dunklen Anker. Beginnen Sie mit einem Grün zwischen #14532D und #2D6A4F. Das wird Ihre Farbe für Überschriften, Links und Buttons auf hellen Hintergründen.
Tönen Sie den Hintergrund. Nehmen Sie statt reinem Weiß ein sehr helles Grün oder ein warmes Creme, zum Beispiel #F0FDF4 oder #F6F4EC. Prüfen Sie den Textkontrast nach dem Tönen erneut.
Fügen Sie einen Akzent hinzu, der nicht grün ist. Bernstein oder Terrakotta neben Grün sorgt auf Seiten mit viel Grün dafür, dass sich Buttons absetzen. Prüfen Sie den Kontrast der Beschriftung: Zum Beispiel misst Text in #92400E auf #FEF3C7 6,37:1.
Testen Sie jede Kombination aus Text und Hintergrund. Lassen Sie Überschriften, Fließtext, Links, Buttons und Platzhaltertext durch einen Checker laufen. Alles unter 4,5:1 in Fließtextgröße braucht einen dunkleren oder helleren Farbton.
Prüfen Sie Hover- und Disabled-Zustände. Hover-Farbtöne rutschen oft in den durchfallenden Bereich ab.
Speichern Sie die Palette als benannte Tokens. Mit Variablennamen wie brand-900, brand-700 und brand-100 ist eine spätere Änderung eine Ein-Zeilen-Anpassung. Unser Leitfaden zu Tailwind-CSS-Farben zeigt das Prinzip der Farbstufen-Skala, und mehrere der obigen Hex-Werte stammen aus einer solchen Skala.

Welches Grün für welche Art von Website

Nachhaltigkeit, Energie, gemeinnützige Organisationen: Wald und Creme oder Salbei. Echte Beispiele für diese Stimmung finden Sie in unserem Greenfield-Renewables-Template.
Gesundheit und Wellness: Frisches Mint oder Petrolgrün.
Finanzen und SaaS: Tiefgrünes Dark Theme mit einem einzelnen leuchtenden Akzent.
Food, Hof, Garten: Wald und Creme mit warmem Akzent.
Creator- und Event-Seiten: Neon-Limette auf Dunkelgrün, beschränkt auf Headlines und einen Button.

Checkliste zum Kopieren vor der Veröffentlichung

[ ] Fließtext hat mindestens 4,5:1 gegenüber dem Hintergrund
[ ] Großer Text und Icons haben mindestens 3:1
[ ] Button-Beschriftungen erreichen 4,5:1 gegenüber der Button-Füllung
[ ] Links lassen sich nicht nur durch die Farbe vom Fließtext unterscheiden (Unterstreichung genügt)
[ ] Leuchtende Grüntöne erscheinen nur auf dunklen Hintergründen oder als Dekoration
[ ] Neben Grün gibt es höchstens eine weitere Akzentfarbe
[ ] Dunkle Abschnitte nutzen eigene, getestete Kombinationen statt wiederverwendeter Light-Mode-Paare
[ ] Die Palette ist als benannte Tokens gespeichert und lässt sich an einer Stelle ändern

Wenn Sie unsicher sind, wie viele Farben eine Website insgesamt braucht, finden Sie die Grundlagen im Leitfaden zu Website-Farbschemata. Die hier verwendeten Begriffe erklärt der Glossareintrag zur Farbpalette.

Eine grüne Palette auf einer echten Website einsetzen

Sobald Sie Ihre Hex-Codes haben, brauchen Sie einen Ort, an dem Sie sie anwenden. Im kostenlosen Tarif von We.Inc können Sie bis zu drei Websites aus fertigen Templates veröffentlichen. Der KI-Builder, der aus einem Prompt eine Website entwirft, startet im Starter-Tarif für $20 im Monat. Hier registrieren: Tragen Sie dann Hintergrund-, Text- und Button-Hex-Werte in die Website-Stile ein und führen Sie dieselben Kontrastprüfungen auf den veröffentlichten Seiten durch.