Sage is a medium-light, muted shade in the yellow color family, with a warm feel. Its HEX code is #B2AC88, which equals rgb(178, 172, 136) in RGB and hsl(51, 21%, 62%) in HSL. In print terms it converts to roughly C0 M3 Y24 K30, although exact CMYK results depend on the paper and color profile.
- HEX
#B2AC88 - RGB
178, 172, 136 - HSL
51°, 21%, 62% - CMYK
0, 3, 24, 30 - Family
Yellow - Tone
Medium-light, muted
About Sage
Yellow shades are bright, sunny and attention-grabbing. They suggest optimism and clarity, and are often used for highlights, warnings and happy, youthful designs. Try it as a primary brand color, a section background, or a highlight against neutral layouts. Text in black is the most readable choice on this color, with a contrast ratio of 9.15:1. Its complementary color is #8A90B2.
Download Sage as an image
Choose a size and format, then download a solid-color image — or tick colors in the library to batch-download a ZIP.
Loading colors…
Loading gradients…
Sage color codes
| HEX | #B2AC88 |
|---|---|
| RGB | rgb(178, 172, 136) |
| HSL | hsl(51, 21%, 62%) |
| HSV | 51°, 24%, 70% |
| CMYK | 0%, 3%, 24%, 30% |
| Decimal | 11709576 |
Shades and tints of Sage
Lighter tints are mixed with white and darker shades are mixed with black.
- 50
#F2F1EB - 100
#E5E3D7 - 200
#D9D6C4 - 300
#CCC8B0 - 400
#BFBA9C - 500
#B2AC88 - 600
#948F71 - 700
#77735B - 800
#595644 - 900
#3B392D - 950
#1E1D17
Color harmonies for Sage
- Complementary
#8A90B2≈ Medium Light Dusty Cornflower - Analogous −30°
#B2988A≈ Medium Light Dusty Tangerine - Analogous +30°
#A4B28A≈ Light Dusty Fern - Triadic +120°
#8AB2AC≈ Light Dusty Seafoam - Triadic +240°
#AC8AB2≈ Medium Light Dusty Magenta - Split 150°
#8AA4B2≈ Medium Light Dusty Lagoon - Split 210°
#988AB2≈ Medium Light Dusty Amethyst
Contrast and accessibility of Sage
| Text color | Sample | Contrast ratio | WCAG |
|---|---|---|---|
| White text on Sage | Aa | 2.30:1 | Fails |
| Black text on Sage | Aa | 9.15:1 | AAA (excellent) |
CSS code for Sage
background-color: #B2AC88;color: #B2AC88;background-color: rgb(178, 172, 136);background-color: hsl(51, 21%, 62%);:root { --color-sage: #B2AC88; }class="bg-[#B2AC88]"Colors similar to Sage
- Medium Light Dusty Yellow
#A9A97E - Medium Light Dusty Gold
#A9A57E - Light Dusty Tangerine
#BAAC97 - Medium Light Dusty Citron
#A5A97E - Light Dusty Amber
#BAAF97 - Light Dusty Orange
#BAA897 - Light Dusty Persimmon
#BAA597 - Light Dusty Marigold
#BAB397 - Medium Light Dusty Marigold
#A9A17E - Ecru
#C2B280 - Medium Light Dusty Lime
#A1A97E - Light Dusty Gold
#BAB697
More yellow shades
- Cornsilk
#FFF8DC - Dark Khaki
#BDB76B - Light Goldenrod Yellow
#FAFAD2 - Olive
#808000 - Pale Goldenrod
#EEE8AA - Yellow
#FFFF00 - Mustard
#FFDB58 - Cream
#FFFDD0 - Brass
#B5A642 - Citron
#DFFF00 - Lemon
#FFF700
Frequently asked questions
What is the HEX code for Sage?
The HEX code for Sage is #B2AC88.
What is the RGB value of Sage?
Sage has an RGB value of 178, 172, 136 (rgb(178, 172, 136)). In HSL it is 51°, 21%, 62%.
What text color should I use on Sage?
Use black text on Sage. White text has a contrast ratio of 2.30:1 and black text has 9.15:1; WCAG AA requires at least 4.5:1 for normal text.
What color goes well with Sage?
The complementary color of Sage is #8A90B2. Analogous colors #B2988A and #A4B28A also pair well.