Palette · 10 colors · Lc 9.2
Wizard’s Potion Grove palette
Wizard’s Potion Grove: a 10-color palette (Pink, Monochromatic, 10 Colors). HEX, RGB, HSL and OKLCH for #070713, #171A31, #293056, #404277, #6060A2, #787ABE, #8E95D0, #A5B1EC, #C6CDEB, #E5E8FF, WCAG contrast on white and black, plus CSS variables, Tailwind and JSON export.
- Pink
- Monochromatic
- 10 Colors
bg
#070713
surface
#171A31
muted
#293056
primary
#404277
secondary
#6060A2
accent
#787ABE
highlight
#8E95D0
border
#A5B1EC
focus
#C6CDEB
text
#E5E8FF
Colors in Wizard’s Potion Grove: HEX, RGB, HSL & OKLCH
- #070713 color page →
bg
#070713
- RGB
- rgb(7 7 19)
- HSL
- hsl(240 46% 5%)
- OKLCH
- oklch(0.136 0.027 282.2)
WCAG contrast: on white 20.02:1 (AAA) · on black 1.04:1 (Fail)
- #171A31 color page →
surface
#171A31
- RGB
- rgb(23 26 49)
- HSL
- hsl(233 36% 14%)
- OKLCH
- oklch(0.228 0.045 276.6)
WCAG contrast: on white 17.09:1 (AAA) · on black 1.22:1 (Fail)
- #293056 color page →
muted
#293056
- RGB
- rgb(41 48 86)
- HSL
- hsl(231 35% 25%)
- OKLCH
- oklch(0.323 0.068 274.1)
WCAG contrast: on white 12.71:1 (AAA) · on black 1.65:1 (Fail)
- #404277 color page →
primary
#404277
- RGB
- rgb(64 66 119)
- HSL
- hsl(238 30% 36%)
- OKLCH
- oklch(0.404 0.088 280)
WCAG contrast: on white 9.27:1 (AAA) · on black 2.26:1 (Fail)
- #6060A2 color page →
secondary
#6060A2
- RGB
- rgb(96 96 162)
- HSL
- hsl(240 26% 51%)
- OKLCH
- oklch(0.519 0.103 282.2)
WCAG contrast: on white 5.68:1 (AA) · on black 3.69:1 (Fail)
- #787ABE color page →
accent
#787ABE
- RGB
- rgb(120 122 190)
- HSL
- hsl(238 35% 61%)
- OKLCH
- oklch(0.606 0.103 281.6)
WCAG contrast: on white 3.94:1 (Fail) · on black 5.32:1 (AA)
- #8E95D0 color page →
highlight
#8E95D0
- RGB
- rgb(142 149 208)
- HSL
- hsl(234 41% 69%)
- OKLCH
- oklch(0.687 0.087 278.6)
WCAG contrast: on white 2.85:1 (Fail) · on black 7.35:1 (AAA)
- #A5B1EC color page →
border
#A5B1EC
- RGB
- rgb(165 177 236)
- HSL
- hsl(230 65% 79%)
- OKLCH
- oklch(0.772 0.086 275.3)
WCAG contrast: on white 2.07:1 (Fail) · on black 10.09:1 (AAA)
- #C6CDEB color page →
focus
#C6CDEB
- RGB
- rgb(198 205 235)
- HSL
- hsl(229 48% 85%)
- OKLCH
- oklch(0.852 0.042 275.1)
WCAG contrast: on white 1.57:1 (Fail) · on black 13.33:1 (AAA)
- #E5E8FF color page →
text
#E5E8FF
- RGB
- rgb(229 232 255)
- HSL
- hsl(233 100% 95%)
- OKLCH
- oklch(0.936 0.031 279.9)
WCAG contrast: on white 1.21:1 (Fail) · on black 17.31:1 (AAA)
Export Wizard’s Potion Grove: CSS variables, Tailwind & JSON
CSS variables
:root {
--bg: #070713;
--surface: #171a31;
--muted: #293056;
--primary: #404277;
--secondary: #6060a2;
--accent: #787abe;
--highlight: #8e95d0;
--border: #a5b1ec;
--focus: #c6cdeb;
--text: #e5e8ff;
}Tailwind CSS v4 @theme
@theme {
--color-bg: #070713;
--color-surface: #171a31;
--color-muted: #293056;
--color-primary: #404277;
--color-secondary: #6060a2;
--color-accent: #787abe;
--color-highlight: #8e95d0;
--color-border: #a5b1ec;
--color-focus: #c6cdeb;
--color-text: #e5e8ff;
}JSON (DTCG tokens)
{
"wizard-s-potion-grove-5on": {
"bg": {
"$type": "color",
"$value": "#070713"
},
"surface": {
"$type": "color",
"$value": "#171a31"
},
"muted": {
"$type": "color",
"$value": "#293056"
},
"primary": {
"$type": "color",
"$value": "#404277"
},
"secondary": {
"$type": "color",
"$value": "#6060a2"
},
"accent": {
"$type": "color",
"$value": "#787abe"
},
"highlight": {
"$type": "color",
"$value": "#8e95d0"
},
"border": {
"$type": "color",
"$value": "#a5b1ec"
},
"focus": {
"$type": "color",
"$value": "#c6cdeb"
},
"text": {
"$type": "color",
"$value": "#e5e8ff"
}
}
}About this palette
Wizard’s Potion Grove is a 10-color OKLCH-ready palette tagged pink, monochromatic, 10 colors. Hex values: #070713, #171A31, #293056, #404277, #6060A2, #787ABE, #8E95D0, #A5B1EC, #C6CDEB, #E5E8FF. APCA contrast score Lc 9.2. 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 Wizard’s Potion Grove by OKLab color distance.