Palette · 4 colors · Lc 9
Ginger Quartz palette
Ginger Quartz: a 4-color palette (Yellow, Gray, Warm, Dark Mode UI). HEX, RGB, HSL and OKLCH for #090602, #473A1F, #AD5C00, #F1F0EE, WCAG contrast on white and black, plus CSS variables, Tailwind and JSON export.
bg
#090602
surface
#473A1F
accent
#AD5C00
text
#F1F0EE
Colors in Ginger Quartz: HEX, RGB, HSL & OKLCH
- #090602 color page →
bg
#090602
- RGB
- rgb(9 6 2)
- HSL
- hsl(34 64% 2%)
- OKLCH
- oklch(0.125 0.016 83.6)
WCAG contrast: on white 20.22:1 (AAA) · on black 1.03:1 (Fail)
- #473A1F color page →
surface
#473A1F
- RGB
- rgb(71 58 31)
- HSL
- hsl(41 39% 20%)
- OKLCH
- oklch(0.355 0.045 84.4)
WCAG contrast: on white 11.09:1 (AAA) · on black 1.89:1 (Fail)
- #AD5C00 color page →
accent
#AD5C00
- RGB
- rgb(173 92 0)
- HSL
- hsl(32 100% 34%)
- OKLCH
- oklch(0.559 0.134 57.6)
WCAG contrast: on white 4.87:1 (AA) · on black 4.30:1 (Fail)
- #F1F0EE color page →
text
#F1F0EE
- RGB
- rgb(241 240 238)
- HSL
- hsl(40 10% 94%)
- OKLCH
- oklch(0.955 0.003 84.6)
WCAG contrast: on white 1.13:1 (Fail) · on black 18.43:1 (AAA)
Export Ginger Quartz: CSS variables, Tailwind & JSON
CSS variables
:root {
--bg: #090602;
--surface: #473a1f;
--accent: #ad5c00;
--text: #f1f0ee;
}Tailwind CSS v4 @theme
@theme {
--color-bg: #090602;
--color-surface: #473a1f;
--color-accent: #ad5c00;
--color-text: #f1f0ee;
}JSON (DTCG tokens)
{
"ginger-quartz-2w9": {
"bg": {
"$type": "color",
"$value": "#090602"
},
"surface": {
"$type": "color",
"$value": "#473a1f"
},
"accent": {
"$type": "color",
"$value": "#ad5c00"
},
"text": {
"$type": "color",
"$value": "#f1f0ee"
}
}
}About this palette
Ginger Quartz is a 4-color OKLCH-ready palette tagged yellow, gray, warm, dark mode ui, ui system, 4 colors. Hex values: #090602, #473A1F, #AD5C00, #F1F0EE. APCA contrast score Lc 9. 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 Ginger Quartz by OKLab color distance.