# Forest green gradient: deep natural codes [Canonical HTML page](https://gradiently.design/guide/forest-gradient) Forest green is the most grown up of the greens: quiet, rich and a little serious. These codes follow a real woodland from the floor to the canopy, with pairings that keep it from looking flat. ## The short version - A forest green gradient runs from a near black green, like the shade under trees, to a mid or light green where light breaks through. - Blue leaning greens read as pine and evergreen, while yellow leaning greens read as moss and fern. - A small warm accent such as cream, brass or terracotta makes forest green look rich instead of flat. - Forest green turns muddy when it is blended directly with red or orange, so keep warm colours as separate accents. - Light type on the dark end of a forest green gradient reads well and feels calm and premium. A **forest green gradient** moves from a near black green, the colour of deep shade under trees, up to a richer mid green or a soft sunlit green where light comes through the canopy. It feels natural, steady and quietly expensive, which is why heritage brands, outdoor companies, hotels and plant shops reach for it. The codes below follow a real woodland, from the floor to the treetops, with notes on what to pair with each. ## The colours of a forest, from floor to canopy Stand in a wood and you see more than one green. The deepest shade is almost black. Pine and spruce lean blue. Moss, ferns and young leaves lean yellow. High up, where sun catches the leaves, the green turns pale and golden, and on a damp morning everything fades to a soft grey green. A good forest gradient picks one of these stories rather than all of them. - Night pine: #0b1f14 - Forest: #14391f - Canopy: #22573a - Spruce: #1d4a3f - Moss: #4f6b2a - Fern light: #a7c97a - Morning mist: #c9d3cc - Sun through leaves: #f3d98b Woodland greens. Spruce leans blue, moss leans yellow, and the sunlight stop is the only warm colour you need. ## Forest green gradient codes Start with deep canopy if you want the classic **dark green gradient**: it is the most versatile and carries light type beautifully. Pine is cooler and more modern. Moss is earthier and works for food, crafts and anything handmade. Fern light is the brightest of the set and still unmistakably forest rather than lime. - Deep canopy: `linear-gradient(160deg, #0b1f14 0%, #14391f 45%, #22573a 100%)` - Pine and spruce: `linear-gradient(180deg, #0e2a26 0%, #1d4a3f 50%, #3c6e5d 100%)` - Moss: `linear-gradient(135deg, #2f3d17 0%, #4f6b2a 50%, #8a9a4b 100%)` - Fern light: `linear-gradient(180deg, #1f4d2b 0%, #3f7d3c 55%, #a7c97a 100%)` Four forest greens. Each keeps its hue steady and changes mostly in lightness, which is what keeps the blend clean. For fresher, brighter greens, from emerald to lime, the main [green gradient](https://gradiently.design/guide/green-gradient) collection goes wider. If you want a forest green with more blue in it, [teal gradient](https://gradiently.design/guide/teal-gradient) picks up where pine leaves off. ## Mist, sunlight and the forest floor Atmosphere is what makes a forest gradient feel like a place rather than a paint chip. Mist lifts the top of the frame to a pale grey green and lets the trees emerge below. Sunlight through the canopy is a radial glow of soft gold sitting high in the frame. The forest floor brings a little brown in at the bottom, which grounds the design. One of these effects per design is plenty. - Misty forest: `linear-gradient(180deg, #c9d3cc 0%, #7e968a 45%, #2f4a3d 100%)` - Sun through the canopy: `radial-gradient(ellipse at 70% 10%, #f3d98b 0%, #8aa64b 25%, #2c5a2f 55%, #0c2215 90%)` - Forest floor: `linear-gradient(0deg, #1a140c 0%, #2e2a16 35%, #2a4a26 100%)` - Evergreen night: `radial-gradient(circle at 50% 30%, #1f4a35 0%, #0d2219 50%, #040b08 100%)` Atmospheric forest gradients. Misty forest suits light type at the bottom and dark type at the top; evergreen night takes white anywhere. ## What to pair with forest green Forest green on its own can look heavy. A single warm partner, used for type or one small accent, changes its whole personality. Pick the partner by the feeling you want, then keep it out of the gradient itself. | Pair with | Hex | Feels | Suits | | --- | --- | --- | --- | | Warm cream | `#f4efe3` | Heritage, calm | Outdoor brands, bookshops, cafés | | Brass gold | `#c9a24a` | Luxury, classic | Hotels, spirits, private clubs | | Terracotta | `#c8643b` | Earthy, friendly | Plant shops, ceramics, food | | Blush pink | `#f2c6c2` | Soft, romantic | Florists, weddings, beauty | | Pale sage | `#d7e2d0` | Fresh, gentle | Wellness, skincare, tea | One partner each. Cream and brass are the safest; blush is the surprise that makes florists' feeds stand out. There is more on building natural palettes in [nature colour palettes](https://gradiently.design/guide/nature-color-palettes) and [earth tone colours](https://gradiently.design/guide/earth-tone-colors), and on what green signals to people in [green colour meaning](https://gradiently.design/guide/green-color-meaning). ## Keeping forest green rich, not flat ### Looks flat or sickly - Green blended straight into red or orange - A yellow green so bright it reads as lime - Neutral grey added to darken it - Pure black at the dark end - Bright green type on dark green ### Looks like a forest - Warm colours kept as separate accents - Light end kept soft, such as #a7c97a - Darkened by lowering lightness, keeping the hue - A near black that is still green, such as #0b1f14 - Cream or brass type on dark green The first point is the one that catches people. Green and red sit opposite each other on the colour wheel, and a direct blend between them passes through brown. If you want both, let them meet with a hard edge, or keep the red to the type. [Muddy gradients](https://gradiently.design/guide/muddy-gradients) shows exactly what happens in between. > **Dark greens in print** Deep greens tend to print darker and duller than they look on screen, and the near black end can lose its colour entirely. For flyers, menus and signs, lift the darkest stop slightly and order a proof before a full run. [Print gradients](https://gradiently.design/guide/print-gradients) covers banding and colour shifts on paper. ## Forest green gradients in real designs Forest green is a gift for businesses that work outdoors or with living things, because it says expertise and care without shouting. A landscaper can post seasonal reminders, a florist can announce a workshop, a hotel can promote a weekend away, and all of it looks like the same brand. A portrait social post with a deep forest green background and the headline Spring visits are open in cream type A landscaper's portrait post. Cream type on the deep end, with the lighter green kept to the edges. That consistency is the hard part when a season's worth of posts, stories and flyers comes from different hands. In Gradiently, you pick a forest green Mark once and every design in the Studio wears it at the right size, with the calm part kept behind your words. [Landscaping marketing](https://gradiently.design/guide/landscaping-marketing) has a season of ideas to fill it with. ```css :root { --forest-950: #0b1f14; --forest-800: #14391f; --forest-600: #22573a; --forest-300: #a7c97a; --cream: #f4efe3; } .hero--forest { color: var(--cream); background: linear-gradient(160deg, var(--forest-950) 0%, var(--forest-800) 45%, var(--forest-600) 100%); } ``` Forest green as reusable tokens, with cream for type. The same variables can colour buttons and borders across the site. ## FAQ ### What is the hex code for forest green? The CSS named colour `forestgreen` is `#228b22`, a fairly bright green. Deeper forest greens for gradients sit around #14391f to #22573a, with near black versions such as #0b1f14 for the dark end of a gradient. ### What colours go with a forest green gradient? Warm cream, brass gold, terracotta, blush pink and pale sage. Use one as a type or accent colour rather than blending it into the green. ### Why does my green gradient look muddy? It is probably blending into red, orange or grey. Keep the hue steady, darken by lowering lightness, and let warm colours meet the green with a hard edge or stay in the type. ### What text colour works on dark green? Cream such as #f4efe3, white or a soft brass. They read clearly on the dark end and keep the calm, natural feel.