Color guide · Green colors
Forest Green Color
Forest green brings a strong, midtone green to a palette. It is lighter than many shades sold under the same name in paint and clothing. The CSS anchor works as a useful starting point for foliage, environmental illustrations and green accents.
Forest Green color codes
#228B22rgb(34, 139, 34)hsl(120, 60.7%, 33.9%)forestgreenRGB values use the 0–255 scale. HSL values are rounded to one decimal place for display. CSS Color: named colors ↗
The name & the reference
What makes forest green interesting?
Plants do not share one exact green. The Smithsonian describes how chlorophyll absorbs red and blue light while reflecting green. Leaf age, surface structure and illumination alter what you see. Sample a real photograph if a specific tree or landscape matters to your project.
Read the reference: Smithsonian: what makes things blue ↗
Things with forest green tones
These illustrated references explore a color family. Objects vary; none is a claim of an exact #228B22 match.
Broad leaves
Overlapping foliage creates a range from bright edges to almost black gaps.
Woodland canopies
Forest scenes need separate greens for light, middle distance and shadow.
Outdoor equipment
A green painted surface is a design reference, not a measurement of living foliage.
A practical color study
Build foliage with depth
A woodland scene benefits from layers. Make the distant foliage less prominent, keep foreground silhouettes clearly defined and reserve the sharpest highlights for the nearest leaves. Repeating the same green across every tree flattens the distance.
For a nature website, use green to connect section headings and illustration details. Let a stable dark text color handle body paragraphs, and keep success states labeled.
Ideas for using forest green
Web interfaces
Give environmental content a green accent, but include labels and icons for states such as completed or available.
Game art
Separate foliage from walkable ground with value as well as hue. A forest palette becomes easier to read when trees have a darker silhouette.
Illustration
Combine this green with warm browns and a pale neutral. A little yellow-green in sunlit areas can keep the foliage from looking like a flat cutout.
Watch out: Do not use green as the only way to indicate success. Check contrast independently for normal text and decorative shapes.
Tints, shades & companion hues
These tints and shades are simple sRGB channel mixes with white or black. They are useful starting points, not perceptually equal steps or guaranteed accessible pairs. Select a swatch to copy its hex code.
Hue companions
Calculated in HSL with the same saturation and lightness. Complementary and analogous colors suggest hue relationships; they do not promise contrast.
Palettes featuring forest green
See the palette at work
Palette preview studio
Try a website, a game scene, a poster or a room. Pick a role, then select a swatch to repaint it. These are schematic design previews, not rendered materials or a game engine.
Text is automatically chosen as black or white for opaque preview surfaces. This does not certify your exported palette for every use.
Make something worth exploring.
A clear reading surface, one useful accent and room for the details.
Explore the collection →COLOR
IN MOTION
Make room for a new perspective.
Explore. Experiment. Create.Try it in context
Live design & contrast preview
Change the surface and text independently. The text result uses opaque sRGB colors; it does not evaluate your entire page.
4.78:1 · AA normal text
AA normal text needs 4.5:1; AA large text needs 3:1. Large text means at least 18 pt, or 14 pt bold. Ratios are assessed before rounding. This is a text check, not a complete accessibility audit. W3C: understanding text contrast ↗
Your next good idea
Try a readable heading, a short paragraph and a clear action on this surface.
Example action →Static design sample · use the controls to change itCompare forest green with another color →
Questions about forest green
Why does forest green look different in paint catalogs?
Everyday color names cover ranges. CSS forestgreen has one fixed sRGB value, while manufacturers define their own formulations.
Will this look the same in print?
No exact print match is promised. Paper, ink, color profiles and lighting affect the result. Use a physical proof when a precise material match matters.
Can I use these codes in a website or game?
Yes. Copy the exact code, give it a clear role in your palette and test text contrast. Add labels or shapes when color communicates important information.
Keep exploring
A color name is a starting point
Digital codes describe sRGB colors. Natural objects, paint, ink and screens can look different under different lighting or calibration. Visual references illustrate color families rather than exact measured matches. Placeholder illustrations are clearly labeled. Design ideas are suggestions, not universal claims about emotion or culture.
Pick colors from an image · Convert a color · Check a complete text pair · Suggest a color guide