Palette · 10 colors · Lc 9.7
Pure Hydra Grove palette
Pure Hydra Grove: a 10-color palette (Violet, Cold, 10 Colors). HEX, RGB, HSL and OKLCH for #020A17, #021C2E, #08334E, #004A77, #1E6B96, #3882AA, #63A5D1, #80C2E5, #ADD9EC, #E8F7FF, WCAG contrast on white and black, plus CSS variables, Tailwind and JSON export.
bg
#020A17
surface
#021C2E
muted
#08334E
primary
#004A77
secondary
#1E6B96
accent
#3882AA
highlight
#63A5D1
border
#80C2E5
focus
#ADD9EC
text
#E8F7FF
Colors in Pure Hydra Grove: HEX, RGB, HSL & OKLCH
- #020A17 color page →
bg
#020A17
- RGB
- rgb(2 10 23)
- HSL
- hsl(217 84% 5%)
- OKLCH
- oklch(0.143 0.033 253.1)
WCAG contrast: on white 19.84:1 (AAA) · on black 1.05:1 (Fail)
- #021C2E color page →
surface
#021C2E
- RGB
- rgb(2 28 46)
- HSL
- hsl(205 92% 9%)
- OKLCH
- oklch(0.217 0.048 242)
WCAG contrast: on white 17.38:1 (AAA) · on black 1.20:1 (Fail)
- #08334E color page →
muted
#08334E
- RGB
- rgb(8 51 78)
- HSL
- hsl(203 81% 17%)
- OKLCH
- oklch(0.308 0.066 242)
WCAG contrast: on white 13.17:1 (AAA) · on black 1.59:1 (Fail)
- #004A77 color page →
primary
#004A77
- RGB
- rgb(0 74 119)
- HSL
- hsl(203 100% 23%)
- OKLCH
- oklch(0.395 0.099 244.6)
WCAG contrast: on white 9.35:1 (AAA) · on black 2.24:1 (Fail)
- #1E6B96 color page →
secondary
#1E6B96
- RGB
- rgb(30 107 150)
- HSL
- hsl(202 67% 35%)
- OKLCH
- oklch(0.503 0.099 238.5)
WCAG contrast: on white 5.83:1 (AA) · on black 3.59:1 (Fail)
- #3882AA color page →
accent
#3882AA
- RGB
- rgb(56 130 170)
- HSL
- hsl(201 50% 44%)
- OKLCH
- oklch(0.577 0.095 235.5)
WCAG contrast: on white 4.24:1 (Fail) · on black 4.94:1 (AA)
- #63A5D1 color page →
highlight
#63A5D1
- RGB
- rgb(99 165 209)
- HSL
- hsl(204 54% 60%)
- OKLCH
- oklch(0.695 0.094 239.3)
WCAG contrast: on white 2.68:1 (Fail) · on black 7.83:1 (AAA)
- #80C2E5 color page →
border
#80C2E5
- RGB
- rgb(128 194 229)
- HSL
- hsl(201 66% 70%)
- OKLCH
- oklch(0.783 0.084 232.5)
WCAG contrast: on white 1.95:1 (Fail) · on black 10.76:1 (AAA)
- #ADD9EC color page →
focus
#ADD9EC
- RGB
- rgb(173 217 236)
- HSL
- hsl(198 62% 80%)
- OKLCH
- oklch(0.86 0.053 226.1)
WCAG contrast: on white 1.50:1 (Fail) · on black 13.91:1 (AAA)
- #E8F7FF color page →
text
#E8F7FF
- RGB
- rgb(232 247 255)
- HSL
- hsl(201 100% 95%)
- OKLCH
- oklch(0.967 0.019 230.7)
WCAG contrast: on white 1.09:1 (Fail) · on black 19.17:1 (AAA)
Export Pure Hydra Grove: CSS variables, Tailwind & JSON
CSS variables
:root {
--bg: #020a17;
--surface: #021c2e;
--muted: #08334e;
--primary: #004a77;
--secondary: #1e6b96;
--accent: #3882aa;
--highlight: #63a5d1;
--border: #80c2e5;
--focus: #add9ec;
--text: #e8f7ff;
}Tailwind CSS v4 @theme
@theme {
--color-bg: #020a17;
--color-surface: #021c2e;
--color-muted: #08334e;
--color-primary: #004a77;
--color-secondary: #1e6b96;
--color-accent: #3882aa;
--color-highlight: #63a5d1;
--color-border: #80c2e5;
--color-focus: #add9ec;
--color-text: #e8f7ff;
}JSON (DTCG tokens)
{
"pure-hydra-grove-pf": {
"bg": {
"$type": "color",
"$value": "#020a17"
},
"surface": {
"$type": "color",
"$value": "#021c2e"
},
"muted": {
"$type": "color",
"$value": "#08334e"
},
"primary": {
"$type": "color",
"$value": "#004a77"
},
"secondary": {
"$type": "color",
"$value": "#1e6b96"
},
"accent": {
"$type": "color",
"$value": "#3882aa"
},
"highlight": {
"$type": "color",
"$value": "#63a5d1"
},
"border": {
"$type": "color",
"$value": "#80c2e5"
},
"focus": {
"$type": "color",
"$value": "#add9ec"
},
"text": {
"$type": "color",
"$value": "#e8f7ff"
}
}
}About this palette
Pure Hydra Grove is a 10-color OKLCH-ready palette tagged violet, cold, 10 colors. Hex values: #020A17, #021C2E, #08334E, #004A77, #1E6B96, #3882AA, #63A5D1, #80C2E5, #ADD9EC, #E8F7FF. APCA contrast score Lc 9.7. 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 Pure Hydra Grove by OKLab color distance.