Calming Earthy Botanical Gray-Green
Category: Green
Sage Green (#9CAF88) — Color Codes, Meaning & UI Palettes
Sage Green takes its name from the dried leaves of the culinary herb Salvia officinalis. Sitting at the intersection of green and warm gray, it represents wisdom, natural tranquility, wellness, and sustainable organic luxury.
Click to Copy HEX
Sage Green
#9CAF88
HEX
#9CAF88
RGB
rgb(156, 175, 136)
HSL
hsl(89deg, 20%, 61%)
CMYK (Print)
cmyk(11%, 0%, 22%, 31%)
Apple Display P3
color(display-p3 0.612 0.686 0.533)
WCAG 2.1 Accessibility & Contrast Rating
White Text (#FFFFFF)
2.36:1 (Fail)
Black Text (#000000)
8.9:1 (AAA)
11-Step Tints & Shades Scale (Tailwind 50–950)
Mathematically balanced luminance scale for design tokens and CSS color palettes. Click any shade to copy hex code:
50
#F9FAF8
100
#EFF2EC
200
#DFE5D9
300
#CCD5C1
400
#B4C2A5
500
#9CAF88
600
#7D8C6D
700
#5E6952
800
#3E4636
900
#22261E
950
#131510
Color Harmonies & Palette Schemes
Complementary
#9B88AF
Opposite 180° Contrast
Analogous -30°
#AFAF88
Natural Harmony
Analogous +30°
#88AF88
Natural Harmony
Triadic +120°
#889CAF
120° Balanced Triad
Triadic +240°
#AF889C
120° Balanced Triad
Curated UI Design Pairings for Sage Green
An ideal neutral background or card surface for wellness apps, modern e-commerce, and editorial publications. Avoid pairing with harsh neon tones; prefer warm neutrals and earthy charcoals.
Warm Cream
#FAF7F2
Soft Warm Background
Deep Forest Green
#1B4332
Authoritative Contrast
Terracotta
#E2725B
Warm Earth Accent
Charcoal Slate
#2D3748
Legible Typography
Export Sage Green Code Snippets
CSS Variable
--color-sage-green: #9CAF88;
Tailwind Config
'sage-green': '#9CAF88'
Swift / SwiftUI
Color(hex: "#9CAF88")
JSON Design Token
{"name": "Sage Green", "hex": "#9CAF88"}
Explore More Colors in the Dictionary
Browse our complete catalog of curated named colors, harmonic palettes, and accessible UI combinations.