Palette · 4 colors · Lc 8.3
Sage Quartz palette
Sage Quartz: a 4-color palette (Green, Nature, 4 Colors). HEX, RGB, HSL and OKLCH for #E3EEE4, #8FB379, #064327, #09150A, WCAG contrast on white and black, plus CSS variables, Tailwind and JSON export.
bg
#E3EEE4
surface
#8FB379
accent
#064327
text
#09150A
Colors in Sage Quartz: HEX, RGB, HSL & OKLCH
- #E3EEE4 color page →
bg
#E3EEE4
- RGB
- rgb(227 238 228)
- HSL
- hsl(125 24% 91%)
- OKLCH
- oklch(0.938 0.018 148.1)
WCAG contrast: on white 1.19:1 (Fail) · on black 17.61:1 (AAA)
- #8FB379 color page →
surface
#8FB379
- RGB
- rgb(143 179 121)
- HSL
- hsl(97 28% 59%)
- OKLCH
- oklch(0.725 0.09 134.1)
WCAG contrast: on white 2.36:1 (Fail) · on black 8.89:1 (AAA)
- #064327 color page →
accent
#064327
- RGB
- rgb(6 67 39)
- HSL
- hsl(152 84% 14%)
- OKLCH
- oklch(0.339 0.077 157)
WCAG contrast: on white 11.41:1 (AAA) · on black 1.83:1 (Fail)
- #09150A color page →
text
#09150A
- RGB
- rgb(9 21 10)
- HSL
- hsl(125 40% 6%)
- OKLCH
- oklch(0.18 0.028 146.3)
WCAG contrast: on white 18.69:1 (AAA) · on black 1.12:1 (Fail)
Export Sage Quartz: CSS variables, Tailwind & JSON
CSS variables
:root {
--bg: #e3eee4;
--surface: #8fb379;
--accent: #064327;
--text: #09150a;
}Tailwind CSS v4 @theme
@theme {
--color-bg: #e3eee4;
--color-surface: #8fb379;
--color-accent: #064327;
--color-text: #09150a;
}JSON (DTCG tokens)
{
"sage-quartz-46o": {
"bg": {
"$type": "color",
"$value": "#e3eee4"
},
"surface": {
"$type": "color",
"$value": "#8fb379"
},
"accent": {
"$type": "color",
"$value": "#064327"
},
"text": {
"$type": "color",
"$value": "#09150a"
}
}
}About this palette
Sage Quartz is a 4-color OKLCH-ready palette tagged green, nature, 4 colors. Hex values: #E3EEE4, #8FB379, #064327, #09150A. APCA contrast score Lc 8.3. Open it in Colorise Pro Studio to lock roles and regenerate harmonies.
Related palettes
Shared tags, similar size and contrast.
Palettes with similar colors
Closest to Sage Quartz by OKLab color distance.