Back to Blog

Forest Green Color Palette: Hex Codes, Shades & Combinations

Build a complete forest green color palette from #228B22—five copy-ready forest green combinations for eco, wellness, and outdoor brands.

•8 min read

Forest Green = #228B22

CSS named color forestgreen—copy hex or RGB, or use #065F46 for deeper UI chrome.

Hex
#228B22
RGB
rgb(34, 139, 34)
Deep UI green
#065F46

A mature forest green color palette balances one recognizable anchor (#228B22), stepped greens for hover and borders, warm neutrals for long reading, and a single accent that carries emotion—terracotta for Mediterranean warmth, dusty rose for spa calm, navy and gold for premium trust. Unlike a one-swatch mood board, a full forest green color scheme names roles: primary, surface, text, accent. That discipline keeps engineers, marketers, and agencies aligned when campaigns ship weekly.

Forest Green Color Palette Combinations

Five four-color forest green combinations with swatches and hex labels. Use forest for roughly 60% of visible structure, neutrals for 30%, and accent for 10%—see our 60-30-10 color rule for proportion tips.

  • Forest + Cream + Brown + Tan

    Earthy editorial and outdoor brands: forest anchors (#228B22), cream reading surfaces (#FFF8F0), brown typography (#5C4033), and tan (#D2B48C) for borders and illustration fills.

    • Forest: #228B22
    • Cream: #FFF8F0
    • Brown: #5C4033
    • Tan: #D2B48C

  • Forest + Terracotta + Sand + White

    Wellness and Mediterranean lifestyle: terracotta CTAs (#E2725B), sand section backgrounds (#D4C4A8), white product cards (#FFFFFF), forest for navigation and trust.

    • Forest: #228B22
    • Terracotta: #E2725B
    • Sand: #D4C4A8
    • White: #FFFFFF

  • Forest + Navy + White + Gold

    Premium eco-finance and heritage outdoor: navy structure (#000080) with forest success states (#228B22), gold rules (#FFD700), white data panels.

    • Forest: #228B22
    • Navy: #000080
    • White: #FFFFFF
    • Gold: #FFD700

  • Forest + Black + White + Light Gray

    Minimal product UI: charcoal-black text (#111827) on white, forest primary buttons (#228B22), light gray (#E5E7EB) zebra rows—high contrast without neon accents.

    • Forest: #228B22
    • Black: #111827
    • White: #FFFFFF
    • Light gray: #E5E7EB

  • Forest + Dusty Rose + Cream + Sage

    Spa, beauty, and calm lifestyle: dusty rose highlights (#D4A5A5), cream body (#FAF9F6), sage secondary (#B2AC88), forest for headers and eco badges.

    • Forest: #228B22
    • Dusty rose: #D4A5A5
    • Cream: #FAF9F6
    • Sage: #B2AC88

Forest Green Shades

Ten greens from airy tints to deep forest. Use lighter rows for backgrounds; #228B22 or hunter green for navigation and primary actions.

SwatchShadeHex
Honeydew
#F0FFF0
Mint cream
#F5FFFA
Light green
#90EE90
Medium sea green
#3CB371
Forest green (CSS)
#228B22
Office green
#008000
Hunter green
#355E3B
Bottle green
#006A4E
Dark green
#006400
Deep forest
#1A4D1A

Forest Green in UI & Web Design

Sustainability dashboards. Deep UI green (#065F46) for sidebar chrome, #228B22 for positive metrics and primary buttons, cream (#FFF8F0) canvas, and tan (#D2B48C) chart gridlines. White numerals on forest pass at large sizes—validate 14px table text with the contrast checker.

Wellness checkout flows. Terracotta pay buttons (#E2725B) on white cards, forest progress steps (#228B22), sand section dividers (#D4C4A8). Keep error states a distinct red so success green is never confused with warnings.

Outdoor retail and membership apps. Forest + black + white + light gray delivers crisp product grids: #111827 body copy, #228B22 loyalty badges, #E5E7EB skeleton loaders. Generate hover ramps from #228B22 in the palette generator instead of lightening green by eye—which often shifts hue toward mint unintentionally.

Across UI patterns, treat the forest green color scheme as structure: photography and charts carry saturation; green carries navigation, success, and eco credentials. Re-test focus rings whenever border radius or font weight changes—rounded forest buttons fail contrast sooner than square ones.

Forest Green in Branding

Eco labels, outdoor gear, and agricultural cooperatives adopt a forest green color palette because it signals growth and responsibility without the acidity of neon green. Pair forest with cream and brown for heritage storytelling—think trail maps, kraft packaging, and farm-to-table menus. The terracotta-and-sand combination mirrors Mediterranean clay and sun-bleached stone; it works for skincare, yoga studios, and boutique hotels that want warmth without abandoning natural cues.

Fintech and insurance products increasingly blend forest with navy and gold to say “stable and sustainable.” Use navy for legal density and forest for positive deltas or ESG scores so users parse trust versus progress at a glance. Black-and-white minimal schemes help DTC brands that sell technical outerwear: forest becomes the only chromatic brand mark on monochrome lookbooks.

Beauty and spa brands soften forest with dusty rose and sage—see the fifth combination above—so clinical green does not dominate sensitive categories. Document both CSS forestgreen (#228B22) and your production UI green (#065F46) in guidelines; stakeholders often conflate them in slide decks. When print vendors enter the mix, add Pantone references beside hex so paper bags and web headers stay cousins, not strangers.

Before you finalize any forest green combinations, show three real artifacts: logo on cream, app navigation, and social template. Approvers understand proportion when they see 60% neutral fields versus 10% terracotta accent—not when they stare at four equal swatches in a PDF.

For canonical hex values, RGB, and an expanded copy-paste reference, open the forest green hex code guide. Muted partners live in the sage green hex and terracotta hex posts—combine those accents with the palettes above without reinventing warm neutrals.

FAQ

What is a forest green color palette?
A forest green color palette centers on #228B22 (CSS forestgreen) or a deeper UI green such as #065F46, plus neutrals (cream, tan, gray) and one warm accent (terracotta, dusty rose, or gold). Name each role in your design system so web and print stay aligned.
What is a good forest green color scheme for websites?
Strong forest green color schemes use forest for navigation and primary actions, off-white or cream for content wells, charcoal or brown for body text, and terracotta or rose sparingly for CTAs. Verify every text-on-green pair with a WCAG contrast checker.
What are the best forest green combinations?
Popular forest green combinations include forest + cream + brown + tan for earthy brands, forest + terracotta + sand + white for wellness, forest + navy + gold for premium eco-finance, and forest + dusty rose + sage for spa and lifestyle products.
How many greens should a forest palette include?
Use one canonical forest hex, three to five tints or shades for surfaces and borders, plus two neutrals and one accent. More than eight greens without token names causes teams to pick random hex values in mockups.

Build your palette

Use our free tools to create and test your color palette.

Color Palette GeneratorWCAG Contrast Checker

Related: Forest Green Hex Code · Sage Green Hex Code · Terracotta Hex Code