31 Different Shades of Sage (+ HEX codes)
Explore all shades of sage, from lighter to darker shades. See HEX codes, shade names, and sage color palettes. Click any shade to copy its HEX code.
Sage green is the color of tranquility, nature, and sophistication! From soft, muted pastels to rich, earthy tones, explore our collection of 30+ sage green shades that bring a calm and elegant touch to any design.
Whether you prefer a subtle tone or a more dramatic shade, you'll find a variety of shades with their names and HEX codes. Plus, discover stunning color palettes with sage green for your projects!
- sage#9EA587
- soft sage#B2AC88
- misty sage#A9B29F
- pale sage#C4C8A5
- light sage#BCC9A0
- pastel sage#CBD7C3
- silver sage#A1A995
- cool sage#9FB29C
- warm sage#A7A97D
- fresh sage#A8B69F
- wild sage#B2BEA6
- classic sage#A9AF98
- green tea sage#D5DEB1
- calm sage#BEC6AA
- winter sage#B7C2A1
- subtle sage#C1C9AB
- dusty sage#A8A77D
- earthy sage#9B9E7A
- muted sage#8F9779
- soft olive sage#B5B38A
- sage leaf#9EA78F
- deep sage#798476
- smoky sage#8C9D88
- olive-toned sage#A5A980
- natural sage#A8B097
- faded sage#A5A78D
- gray sage#9C9F84
- soft fern sage#B6C3A0
- lush sage#A3B091
- sagebrush green#7E7C67
- dried sage#888F71
Sage: HEX & RGB Codes
sage has the following primary color codes:
HEX: #9CAF88
RGB: (156, 175, 136).
Explore a wide range of sage shades using our interactive color picker. Click any color to copy its HEX code and use it in your project!
Explore tints of sage
Locust
#9caf88
Schist
#a6b894
Norway
#adbf9c
Rainee
#b8c7a8
Coriander
#c3d0b4
Pale Leaf
#ccd8c0
Periglacial Blue
#d6e0cc
Periglacial Blue
#e0e8d9
Green White
#ebf0e5
Snow Drift
#f5f8f2
Explore shades of sage
Pine Tree
#152405
Turtle Green
#22360c
Palm Leaf
#2e4616
Woodland
#3d5822
Chalet Green
#4d6831
Dingley
#5e7a43
Highland
#748d58
Battleship Gray
#859c6d
sage in HEX, RGB, HSL and CMYK
| HEX | #9CAF88 | |
|---|---|---|
| RGB | rgb(156, 175, 136) | |
| HSL | hsl(89, 20%, 61%) | |
| CMYK | cmyk(11%, 0%, 22%, 31%) |
Tints and shades of sage
Tints add white and shades add black, keeping the hue. Use them for hover states, borders and backgrounds that still belong to the same colour.
Tints (lighter)
#abbb9a
#bac7ab
#c9d3bd
#d7dfcf
#e6ebe1
#f5f7f3
Shades (darker)
#849c6b
#6c8156
#536342
#3b462f
#23291c
#0a0c08
Colours that work with sage
Complementary
#9CAF88 #9b88af
Opposite on the colour wheel. Maximum contrast — use it for accents, not for half the page.
Analogous
#afaf88 #9CAF88 #88af88
Neighbours on the wheel. Calm and cohesive, the safest way to build a palette.
Triadic
#9CAF88 #889caf #af889c
Three colours evenly spaced. Lively and balanced; let one dominate.
Text on sage
Measured against WCAG: 4.5:1 for body text, 3:1 for large text. Test your own pair in the Contrast Checker
sage shade chart
Right-click to save the chart, or copy the individual codes above.