Palette · 10 colors · Lc 8.5
Vivid Magento Lattice palette
Vivid Magento Lattice: a 10-color palette (Pink, OKLCH Neon, Cyberpunk, Rainbow). HEX, RGB, HSL and OKLCH for #040108, #5C2881, #B03BFE, #FF33C3, #FF3600, #C38900, #00B83B, #00C1E3, #99C7FF, #E5E1E8, WCAG contrast on white and black, plus CSS variables, Tailwind and JSON export.
- Pink
- OKLCH Neon
- Cyberpunk
- Rainbow
- 10 Colors
bg
#040108
surface
#5C2881
muted
#B03BFE
primary
#FF33C3
secondary
#FF3600
accent
#C38900
highlight
#00B83B
border
#00C1E3
focus
#99C7FF
text
#E5E1E8
Colors in Vivid Magento Lattice: HEX, RGB, HSL & OKLCH
- #040108 color page →
bg
#040108
- RGB
- rgb(4 1 8)
- HSL
- hsl(266 78% 2%)
- OKLCH
- oklch(0.09 0.031 307.5)
WCAG contrast: on white 20.73:1 (AAA) · on black 1.01:1 (Fail)
- #5C2881 color page →
surface
#5C2881
- RGB
- rgb(92 40 129)
- HSL
- hsl(275 53% 33%)
- OKLCH
- oklch(0.395 0.146 307.9)
WCAG contrast: on white 10.11:1 (AAA) · on black 2.07:1 (Fail)
- #B03BFE color page →
muted
#B03BFE
- RGB
- rgb(176 59 254)
- HSL
- hsl(276 99% 61%)
- OKLCH
- oklch(0.615 0.269 307.2)
WCAG contrast: on white 4.28:1 (Fail) · on black 4.90:1 (AA)
- #FF33C3 color page →
primary
#FF33C3
- RGB
- rgb(255 51 195)
- HSL
- hsl(318 100% 60%)
- OKLCH
- oklch(0.686 0.266 343.4)
WCAG contrast: on white 3.22:1 (Fail) · on black 6.51:1 (AA)
- #FF3600 color page →
secondary
#FF3600
- RGB
- rgb(255 54 0)
- HSL
- hsl(13 100% 50%)
- OKLCH
- oklch(0.648 0.239 33)
WCAG contrast: on white 3.63:1 (Fail) · on black 5.77:1 (AA)
- #C38900 color page →
accent
#C38900
- RGB
- rgb(195 137 0)
- HSL
- hsl(42 100% 38%)
- OKLCH
- oklch(0.67 0.139 78.6)
WCAG contrast: on white 3.04:1 (Fail) · on black 6.89:1 (AA)
- #00B83B color page →
highlight
#00B83B
- RGB
- rgb(0 184 59)
- HSL
- hsl(139 100% 36%)
- OKLCH
- oklch(0.681 0.208 146)
WCAG contrast: on white 2.65:1 (Fail) · on black 7.91:1 (AAA)
- #00C1E3 color page →
border
#00C1E3
- RGB
- rgb(0 193 227)
- HSL
- hsl(189 100% 45%)
- OKLCH
- oklch(0.747 0.133 216.5)
WCAG contrast: on white 2.15:1 (Fail) · on black 9.73:1 (AAA)
- #99C7FF color page →
focus
#99C7FF
- RGB
- rgb(153 199 255)
- HSL
- hsl(213 100% 80%)
- OKLCH
- oklch(0.818 0.093 253.7)
WCAG contrast: on white 1.75:1 (Fail) · on black 11.96:1 (AAA)
- #E5E1E8 color page →
text
#E5E1E8
- RGB
- rgb(229 225 232)
- HSL
- hsl(274 13% 90%)
- OKLCH
- oklch(0.915 0.01 311.2)
WCAG contrast: on white 1.29:1 (Fail) · on black 16.26:1 (AAA)
Export Vivid Magento Lattice: CSS variables, Tailwind & JSON
CSS variables
:root {
--bg: #040108;
--surface: #5c2881;
--muted: #b03bfe;
--primary: #ff33c3;
--secondary: #ff3600;
--accent: #c38900;
--highlight: #00b83b;
--border: #00c1e3;
--focus: #99c7ff;
--text: #e5e1e8;
}Tailwind CSS v4 @theme
@theme {
--color-bg: #040108;
--color-surface: #5c2881;
--color-muted: #b03bfe;
--color-primary: #ff33c3;
--color-secondary: #ff3600;
--color-accent: #c38900;
--color-highlight: #00b83b;
--color-border: #00c1e3;
--color-focus: #99c7ff;
--color-text: #e5e1e8;
}JSON (DTCG tokens)
{
"vivid-magento-lattice-k8": {
"bg": {
"$type": "color",
"$value": "#040108"
},
"surface": {
"$type": "color",
"$value": "#5c2881"
},
"muted": {
"$type": "color",
"$value": "#b03bfe"
},
"primary": {
"$type": "color",
"$value": "#ff33c3"
},
"secondary": {
"$type": "color",
"$value": "#ff3600"
},
"accent": {
"$type": "color",
"$value": "#c38900"
},
"highlight": {
"$type": "color",
"$value": "#00b83b"
},
"border": {
"$type": "color",
"$value": "#00c1e3"
},
"focus": {
"$type": "color",
"$value": "#99c7ff"
},
"text": {
"$type": "color",
"$value": "#e5e1e8"
}
}
}About this palette
Vivid Magento Lattice is a 10-color OKLCH-ready palette tagged pink, oklch neon, cyberpunk, rainbow, 10 colors. Hex values: #040108, #5C2881, #B03BFE, #FF33C3, #FF3600, #C38900, #00B83B, #00C1E3, #99C7FF, #E5E1E8. APCA contrast score Lc 8.5. 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 Vivid Magento Lattice by OKLab color distance.