Color Directory
Forest Green
A saturated mid-dark green with the density of woodland foliage.
#228B22
- HEX
- #228B22
- RGB
- rgb(34, 139, 34)
- HSL
- hsl(120, 61%, 34%)
Check Forest Green
Contrast ratios against white and black text.
WCAG asks for 4.5:1 on body text and 3:1 on text 24px or larger. Ratios are calculated from #228B22 in the sRGB colour space.
About this entry
What it is
A saturated mid-dark green with the density of woodland foliage.
Outdoor brands, success states and colour-blocked layouts.
Copy & use
How to copy and use forest green
- 01
Copy the complete value
Use the copy button above so the value is captured without its label, description or surrounding page text.
- 02
Paste it where you need it
Outdoor brands, success states and colour-blocked layouts.
- 03
Check the final result
Modern browsers support hex, RGB and HSL. Screens, colour profiles and neighbouring colours can still make the same value appear different, so evaluate it in the intended interface.
Tints & shades
A scale built from forest green
Each step is mixed toward white or black from #228B22 in sRGB, which is what the browser does too. Useful when one colour has to cover hover states, borders and backgrounds as well as the accent itself.
Lighter 60%
#A7D1A7
rgb(167, 209, 167)
Lighter 30%
#64AE64
rgb(100, 174, 100)
- Base
Base
#228B22
rgb(34, 139, 34)
Darker 30%
#186118
rgb(24, 97, 24)
Darker 60%
#0E380E
rgb(14, 56, 14)
Name & pairing
Where forest green comes from
A CSS keyword value, and a saturated mid-dark green rather than the grey-greens most forests actually are. It is the green of illustration rather than of photography.
What to put beside it
Confident with cream and gold, and dependable as a success state. Beside sage it makes the sage look washed out, so use one or the other.
Common questions
Using forest green
What is forest green?
A saturated mid-dark green with the density of woodland foliage. Outdoor brands, success states and colour-blocked layouts.
What are the colour values for Forest Green?
Forest Green is HEX #228B22, RGB rgb(34, 139, 34), HSL hsl(120, 61%, 34%). All three notations describe the same sRGB colour, so pick whichever your tool expects: hex for CSS and design files, RGB when you need the channels separately, HSL when you want to shift lightness or saturation without changing the hue.
Will forest green work everywhere?
Modern browsers support hex, RGB and HSL. Screens, colour profiles and neighbouring colours can still make the same value appear different, so evaluate it in the intended interface.
Can I customise forest green after copying?
Use the supplied value as a starting point, then check contrast and nearby colours in the final design. Converting between hex, RGB and HSL does not change the intended sRGB colour.
Also known as
Keep browsing