Codes & values
- Color Name
Sage - Color ID
KDF-C-10268552 - HEX
#9CAF88 - RGB
rgb(156, 175, 136) - RGBA
rgba(156, 175, 136, 1) - HSL
hsl(89, 20%, 61%) - HSLA
hsla(89, 20%, 61%, 1) - HSV / HSB
hsv(89, 22%, 69%) - CMYK
cmyk(11%, 0%, 22%, 31%) - Light / Dark
mid
Quick answers
- What is the HEX code for Sage?
- #9CAF88
- What is Sage RGB?
- rgb(156, 175, 136)
- What is Sage HSL?
- hsl(89, 20%, 61%)
- What is Sage CMYK?
- cmyk(11%, 0%, 22%, 31%)
What is Sage?
Sage is a curated green family color at #9CAF88. It appears in our library with tags for interior, branding, ui. This mid-range shade works as a primary brand or UI accent when contrast with text is verified. Temperature lean: cool — calmer, often used for tech, healthcare, and finance trust..
Sage HEX code
The HEX code for Sage is #9CAF88. Paste it into CSS as color: #9CAF88; or background-color: #9CAF88;. Design tools accept the same six-digit value without the # prefix (9caf88).
Sage RGB
Sage in RGB is rgb(156, 175, 136) (channels R 156, G 175, B 136). Use RGB when you need opacity via rgba(156, 175, 136, 1).
Sage HSL & HSV
HSL is hsl(89, 20%, 61%) — useful for generating lighter/darker variants by adjusting lightness. HSV/HSB is hsv(89, 22%, 69%), closer to how many digital pickers expose hue, saturation, and brightness.
Sage CMYK
Approximate CMYK for Sage is cmyk(11%, 0%, 22%, 31%). Screen HEX/RGB values are device-dependent; for print, always soft-proof in your print profile rather than relying on a web conversion alone.
Shades of Sage
Darker shades (mixed toward black): #829271, #68755B, #4E5844, #343A2D, #1A1D17. Use deeper shades for hover states, borders, and dark-mode accents.
Tints of Sage
Lighter tints (mixed toward white): #ADBC9C, #BDCAB0, #CED7C4, #DEE4D7, #EFF2EB. Tints work well for soft backgrounds, chips, and secondary buttons.
Colors that go with Sage
Complementary pairing: #9CAF88, #9B88AF. Analogous neighbors: #AFAE88, #9CAF88, #89AF88. Triadic accents: #9CAF88, #889CAF, #AF889C. Always check text contrast when pairing.
Sage color combinations
A practical combo: primary #9CAF88, complementary accent #9B88AF, and a neutral charcoal or off-white for text and surfaces. Split-complementary options: #9CAF88, #8889AF, #AE88AF.
Sage in web design
Green signals success, growth, and eco brands. Mid greens pass AA on white more often than neon limes; forest tones suit nature and finance trust UI.
Sage in branding
Brand greens communicate sustainability, health, and Islamic / South Asian retail trust signals when carefully chosen. Contrast vs white is 2.36:1 (better as a large accent or background than small body text); vs black 8.90:1.
Sage earth & muted use
Sage leans muted or earthy — ideal for interiors, craft brands, and calm UI. Combine with cream, sage, and clay neutrals.
Frequently asked questions
- What is the HEX code for Sage?
- Sage: #9CAF88.
- What is Sage RGB?
- Sage: rgb(156, 175, 136).
- What is Sage HSL?
- Sage: hsl(89, 20%, 61%).
- What is Sage CMYK?
- Sage: cmyk(11%, 0%, 22%, 31%).
- What colors go with Sage?
- Try complementary #9CAF88, #9B88AF or analogous #AFAE88, #9CAF88, #89AF88.
- Is Sage good for text on white?
- Not ideal for small body text (2.36:1). Use as a large heading, button, or background instead.
Accessibility snapshot
Contrast vs white: 2.36:1 (prefer large accent or background). Contrast vs black: 8.90:1. Complementary swatch: #9CAF88, #9B88AF.
Explore related
Green colorsColor pickerPalette generatorContrast checkerColor guidesComplete Color Code GuideHow HEX Colors WorkHEX vs RGB vs CMYK