Forest green carries the hex code #228B22, which resolves to rgb(34, 139, 34) and hsl(120, 61%, 34%). Red and blue sit at identical values while green runs 105 points ahead, which places the hue at exactly 120° with a low 34% lightness.
Forest green reaches 4.39:1 against white, which makes it the only green in this cluster that clears the large-text bar unaided, and its dark variant passes AA at 6.91:1. This page covers every code format, the computed palettes, the four elements where it performs, and why a green this dark solves the problems every pale green creates.
What Is the Color Forest Green?
Forest green sits at 120° with 61% saturation and 34% lightness. The CSS keyword forestgreen maps to #228B22 exactly, which makes it one of the specified greens rather than a convention.
The full code set for #228B22:
- HEX: #228B22
- RGB: rgb(34, 139, 34)
- RGBA: rgba(34, 139, 34, 1)
- HSL: hsl(120, 61%, 34%)
- HSB: 120, 76, 55
- CMYK: 76, 0, 76, 45
Identical red and blue channels put the hue on exactly 120°, the pure green axis, the same position light green and mint green occupy. What separates forest green from those two is 40 points of lightness.
The CMYK reading shows the depth. At 45% key coverage a substantial part of this color is black ink, which is why it prints as a deep, dense green rather than a bright one.
Why Does Forest Green Solve the Pale Green Problem?
Every pale green fails as text on white, and the reason is green’s luminance weighting rather than anything about the hue. Forest green fixes that by trading lightness for contrast.
The comparison makes the case directly:
- Mint green (#98FB98): lightness 79%, 1.27:1 on white, fails everything
- Light green (#90EE90): lightness 75%, 1.42:1, fails everything
- Medium sea green (#3CB371): lightness 47%, 2.71:1, fails
- Forest green (#228B22): lightness 34%, 4.39:1, passes large text and non-text
- Dark green (#006400): lightness 20%, 8.4:1, passes AAA
Nothing above 40% lightness clears the 3:1 non-text floor. That threshold is the practical dividing line for the whole green family, and forest green sits just below it.
Relative luminance counts green at 71.52%, which is why the drop-off is so steep. A green needs to be considerably darker than a red or blue of equivalent apparent brightness to reach the same ratio.
The practical rule follows. Any interface that needs green text, green borders, or green icons on a white surface is describing forest green or darker, and reaching for it directly avoids a round of failed contrast checks.
How Does Forest Green Appear on Digital Screens?
Forest green renders consistently because no channel sits at an extreme. It shows none of the intensity variation that a saturated green produces across wide-gamut and sRGB displays.
The measured values are the most balanced of any green in this cluster:
- #228B22 on white: 4.39:1, large text and non-text only
- #228B22 on black: 4.78:1, passes AA
- Dark variant #1A681A on white: 6.91:1, passes AA
- Bright variant #2FC32F on #0C1D0C: 7.49:1, passes AAA
- White text on #228B22: 4.39:1, large text only
Forest green is one of the few colors that works in both themes without a large value shift. The base clears AA on black and the shade clears AA on white, so one hue family covers both.
The 4.39:1 figure is the one to remember. It covers headings, large labels, borders, and icons on white, and it misses body copy by a small margin.
Small text needs the shade. #1A681A at 6.91:1 passes AA at every size, which is the safer default for a design system.
What Are the Shades and Tints of Forest Green?
Shades come from mixing black into #228B22 while holding hue at 120°:
- #1E7A1E
- #1A681A
- #155715
- #114611
- #0D340D
- #082308
- #041104
The step at #1A681A matters most, since it’s the first that passes AA for body copy at 6.91:1. Everything below it in the ramp reads as near-black with a green cast.
Tints carry the surface layer:
- #29A929
- #30C730
- #49D349
- #67DA67
- #85E185
- #A3E9A3
- #C0F0C0
- #DEF7DE
The upper steps behave like the pale greens covered elsewhere in this cluster. #DEF7DE and #C0F0C0 make workable success banner fills, and everything above #67DA67 fails as a foreground on white.
Named neighbors sit across the deep green range:
- Green (#008000): the CSS keyword, deeper and less saturated, 5.1:1 on white
- Dark green (#006400): deeper again, 8.4:1
- Sea green (#2E8B57): bluer at similar depth, 4.3:1
- Hunter green (#355E3B): muted and darker, 7.5:1
- Medium sea green (#3CB371): lighter and bluer, 2.71:1
What UI Elements Work Best with Forest Green?
Forest green belongs anywhere on a light surface that needs green with real contrast. At 4.39:1 it covers non-text and large text, and the shade covers everything smaller.
Body copy at the base value and any use as a large dark-theme surface fall outside its range, since it sits too light to host white text comfortably at small sizes. Four element types remain where it genuinely performs.
Success Text and Confirmation Messages
Text is where forest green does the job no pale green can. A success message set in #1A681A on white reaches 6.91:1 and passes AA, so the confirmation reads clearly without a neutral.
Headings work at the base value. #228B22 clears the 3:1 large-text bar, which means a section header can carry the semantic color directly.
Pairing with a pale fill completes the pattern. A #DEF7DE banner background with #1A681A text gives a success state that’s both readable and unmistakably green.
Primary Buttons and CTAs
Buttons work at large label sizes with the base value. White on #228B22 sits at 4.39:1, which covers a 20px bold label and fails a 14px one.
Small labels need the shade. White on #1A681A reaches 6.91:1 and passes AA at every size, which is the safer default.
Hover states come from the shade ramp rather than opacity. A step to #1E7A1E keeps the hue stable where a transparency change alters the effective contrast.
Data Visualizations
Charts use forest green as a series color that carries its own labels. Data text can sit directly on a #228B22 bar at large sizes and on a #1A681A bar at any size, which most greens can’t manage.
Line charts benefit most. A 2px #228B22 line reads clearly against a white plot area, where a pale green line disappears into the gridlines.
Red-green color vision deficiency remains the constraint. Forest green and a deep red sit at similar luminance, so a direct label or a pattern has to carry the comparison.
Dark Mode Accents
Dark mode suits forest green with a small adjustment. The bright variant #2FC32F on the computed surface #0C1D0C reaches 7.49:1 and clears AAA, so it carries small text, icons, and success indicators.
The base value also passes on pure black at 4.78:1. That flexibility means one hue family covers both themes with a single step.
Saturation should rise slightly as the surface darkens. A green that reads as confident on white looks muted against near-black, and the tint ramp restores it.
What Are the Best Forest Green Color Palettes for UI?
Every palette below comes from rotating hue around #228B22 at fixed saturation and lightness. Because lightness sits at 34%, these schemes produce deep values that mostly carry text.
Monochromatic
The monochromatic scheme holds hue at 120° and moves lightness: #228B22, #145414, and #2FC32F. Three values covering text, base, and dark-mode accent.
#145414 reaches 9.8:1 on white and passes AAA. Mapping places it on body copy, the base on fills and headings, and #2FC32F on dark surfaces.
Analogous
Analogous pulls neighbors 30° in each direction: #228B22, #228B56, and #568B22. A sea green and an olive flanking the base, all at matched depth.
All three clear 4:1 on white. Analogous schemes rarely produce members that all carry large text, and this one does.
Complementary
Forest green’s complement sits opposite at 300°: #228B22 paired with #8B228B, a deep magenta-purple. Both are dark and moderately saturated, so the pairing produces hue tension without a luminance clash.
The purple at #8B228B reaches 8.1:1 on white and passes AAA. Two complementary colors that both carry text is a genuinely useful property.
Triadic
The triadic scheme gives you #228B22, #22228B, and #8B2222: forest green, a deep blue, and a deep red. Evenly spaced and uniformly dark, which makes it a strong categorical set.
All three pass AA on white. A chart built from this triad supports data labels directly on the series.
The red-green pairing needs care, though. Those two members converge under deuteranopia, so a pattern or a label should separate them.
Split-Complementary
Split-complementary softens the pairing: #228B22, #56228B, and #8B2256. Forest green with a deep violet and a deep rose, giving a third value for secondary actions.
This is the most flexible of the five for a full interface. Visily’s theme tools can generate the tint and shade ladder for each value so hover and dark-mode variants come out accessible rather than hand-mixed.
Which Colors Are Similar to Forest Green?
Five named colors sit close enough to #228B22 to substitute for it:
- Green (#008000): the CSS keyword, deeper and less saturated, 5.1:1 on white
- Sea green (#2E8B57): bluer at similar depth, 4.3:1
- Dark green (#006400): considerably deeper, 8.4:1
- Hunter green (#355E3B): muted and darker, 7.5:1
- Medium sea green (#3CB371): lighter and bluer, 2.71:1
Green at #008000 is the closest functional relative and it passes AA on white where forest green doesn’t. Anyone needing a CSS keyword green for body copy should reach for it rather than for forest green.
Hunter green is the choice when a green needs to read as muted rather than vivid. Its lower saturation gives it a heritage, outdoor register that suits a different set of brands entirely.
Which Colors Pair Best with Forest Green?
Off-white and cream are forest green’s strongest surfaces. A warm near-white lets it read as natural rather than clinical, which suits the outdoor, sustainability, and heritage contexts where the color belongs.
Deep magenta from the complementary scheme is the most useful accent. #8B228B sits opposite at matched depth and passes AAA on white, so both colors can carry real work.
Warm browns and tans extend the natural family. Those hues share forest green’s grounded register and give a palette depth without competing.
Muted gold reads as premium against it. A warm metallic on deep green is the pairing that heritage and luxury brands reach for repeatedly.
The 60-30-10 split applies as follows:
- 60% off-white or cream: page surfaces and reading areas
- 30% forest green: headings, buttons, navigation, and success states
- 10% accent: the gold or magenta carrying secondary emphasis
Forest green tolerates a 30% share comfortably. Its contrast is strong enough that a large presence stays readable.
Which Colors Should You Avoid Pairing with Forest Green?
Two computed near-clashes cause the most trouble: #228B4E and #4E8B22. Both sit 25° away at identical lightness, offering hue difference with no luminance difference.
Deep red is the accessibility problem. Forest green and a deep red at similar luminance sit on the axis that red-green deficiency collapses, so a green-versus-red comparison reads as one color for a substantial share of users.
Olive is the aesthetic failure. Forest green beside an olive at matched depth produces a combination that reads as muddy, since both share yellow-green territory.
Pure black as a background gives too little separation. At 4.78:1 forest green on black passes AA and reads as heavy, so a near-black with a lighter step serves a dark theme better.
Does Forest Green Meet Accessibility Standards?
Forest green clears the large-text and non-text bars on white and misses AA for body copy at the base value. The 4.39:1 measurement sits above the 3:1 threshold and just below the 4.5:1 threshold set by the W3C.
Forest green lands as follows across the common pairings:
- #228B22 on white: 4.39:1, passes for large text and non-text, fails AA for body
- White on #228B22: 4.39:1, large text only
- #1A681A on white: 6.91:1, passes AA
- #145414 on white: 9.8:1, passes AAA
- #2FC32F on #0C1D0C: 7.49:1, passes AAA
That near-miss at 4.39:1 is worth noting carefully. A designer checking only large text will pass the review, and the same color will fail on the 14px caption underneath.
Red-green color vision deficiency applies forcefully to any green. Under deuteranopia and protanopia forest green shifts toward a muted brown-olive and converges with deep reds and browns at similar luminance.
Green should never carry a state alone. A checkmark, the word “success”, or a position preserves the meaning when the hue collapses, which matters more for green than for almost any other signal.
How Can You Convert Forest Green Between HEX, RGB, HSL, CMYK, and Other Color Formats?
Each format describes the same green from a different angle:
- HEX #228B22: the default in design files and CSS, with the symmetric pattern of a primary-axis hue
- RGB rgb(34, 139, 34): identical red and blue channels
- RGBA rgba(34, 139, 34, 1): adds alpha for tinted overlays and fills
- HSL hsl(120, 61%, 34%): hue lands on exactly 120° at low lightness
- HSB 120, 76, 55: the picker model, reporting saturation at 76%
- CMYK 76, 0, 76, 45: equal cyan and yellow over a heavy black plate
The symmetric CMYK reading confirms the pure-green position. Equal cyan and yellow with zero magenta is what a hue at exactly 120° looks like in the subtractive model.
HSL makes the ramp predictable and covers the whole green family. Holding hue at 120° and stepping lightness generates mint green, light green, forest green, and dark green from one definition, which collapses four tokens into one scale.
CMYK reproduces forest green closely. The 45% key coverage means much of the color comes from black ink rather than saturated pigment, so the printed version tracks the screen more faithfully than a bright green would.
Wrapping Up
Forest green is the green that carries its own text, which is what separates it from every pale green in this cluster. #228B22 works for headings, borders, icons, and buttons with large labels at 4.39:1, #1A681A handles body copy and small white labels at 6.91:1, #145414 reaches AAA, and #2FC32F carries dark mode at 7.49:1.
Those steps don’t need to be derived by hand. Open Visily and use its AI-powered design tools to generate the forest green tint and shade ladder, accessible success states across both themes, and matched accent pairings in one pass.
