Color Directory
Sage Green
A muted grey-green named after the herb — calm, natural and endlessly popular in branding.
#9CAF88
- HEX
- #9CAF88
- RGB
- rgb(156, 175, 136)
- HSL
- hsl(89, 18%, 61%)
Check Sage 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 #9CAF88 in the sRGB colour space.
About this entry
What it is
A muted grey-green named after the herb — calm, natural and endlessly popular in branding.
Wellness brands, wedding palettes and soft interiors. Pairs with cream and warm wood tones.
Copy & use
How to copy and use sage 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
Wellness brands, wedding palettes and soft interiors. Pairs with cream and warm wood tones.
- 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 sage green
Each step is mixed toward white or black from #9CAF88 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%
#D7DFCF
rgb(215, 223, 207)
Lighter 30%
#BAC7AC
rgb(186, 199, 172)
- Base
Base
#9CAF88
rgb(156, 175, 136)
Darker 30%
#6D7B5F
rgb(109, 123, 95)
Darker 60%
#3E4636
rgb(62, 70, 54)
Name & pairing
Where sage green comes from
Named after the herb, whose leaves carry a grey bloom that mutes the green. That grey is the whole character of the colour: remove it and you have an ordinary mid-green with none of the softness.
What to put beside it
Sits well with warm neutrals — cream, oatmeal, unfinished wood. Against a cool grey it reads as slightly dirty rather than calm, so keep the neutrals on the warm side of the line.
Common questions
Using sage green
What is sage green?
A muted grey-green named after the herb — calm, natural and endlessly popular in branding. Wellness brands, wedding palettes and soft interiors. Pairs with cream and warm wood tones.
What are the colour values for Sage Green?
Sage Green is HEX #9CAF88, RGB rgb(156, 175, 136), HSL hsl(89, 18%, 61%). 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 sage 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 sage 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