Palette · 9 colors · Lc 9.5
Vivid Magentle System palette
Vivid Magentle System: a 9-color palette (Red, Warm, Rainbow, 9 Colors). HEX, RGB, HSL and OKLCH for #F5E9DF, #EB963D, #D33100, #B019A9, #006BDF, #00580D, #4B2100, #2F1500, #0E0400, WCAG contrast on white and black, plus CSS variables, Tailwind and JSON export.
bg
#F5E9DF
surface
#EB963D
muted
#D33100
primary
#B019A9
secondary
#006BDF
accent
#00580D
highlight
#4B2100
border
#2F1500
text
#0E0400
Colors in Vivid Magentle System: HEX, RGB, HSL & OKLCH
- #F5E9DF color page →
bg
#F5E9DF
- RGB
- rgb(245 233 223)
- HSL
- hsl(27 52% 92%)
- OKLCH
- oklch(0.941 0.019 62.4)
WCAG contrast: on white 1.19:1 (Fail) · on black 17.60:1 (AAA)
- #EB963D color page →
surface
#EB963D
- RGB
- rgb(235 150 61)
- HSL
- hsl(31 81% 58%)
- OKLCH
- oklch(0.745 0.144 63.2)
WCAG contrast: on white 2.34:1 (Fail) · on black 8.96:1 (AAA)
- #D33100 color page →
muted
#D33100
- RGB
- rgb(211 49 0)
- HSL
- hsl(14 100% 41%)
- OKLCH
- oklch(0.567 0.203 34.1)
WCAG contrast: on white 4.98:1 (AA) · on black 4.20:1 (Fail)
- #B019A9 color page →
primary
#B019A9
- RGB
- rgb(176 25 169)
- HSL
- hsl(303 75% 39%)
- OKLCH
- oklch(0.535 0.229 330.5)
WCAG contrast: on white 5.90:1 (AA) · on black 3.55:1 (Fail)
- #006BDF color page →
secondary
#006BDF
- RGB
- rgb(0 107 223)
- HSL
- hsl(211 100% 44%)
- OKLCH
- oklch(0.547 0.195 257.1)
WCAG contrast: on white 5.03:1 (AA) · on black 4.16:1 (Fail)
- #00580D color page →
accent
#00580D
- RGB
- rgb(0 88 13)
- HSL
- hsl(129 100% 17%)
- OKLCH
- oklch(0.4 0.129 144)
WCAG contrast: on white 8.74:1 (AAA) · on black 2.40:1 (Fail)
- #4B2100 color page →
highlight
#4B2100
- RGB
- rgb(75 33 0)
- HSL
- hsl(26 100% 15%)
- OKLCH
- oklch(0.302 0.077 53)
WCAG contrast: on white 13.84:1 (AAA) · on black 1.51:1 (Fail)
- #2F1500 color page →
border
#2F1500
- RGB
- rgb(47 21 0)
- HSL
- hsl(27 100% 9%)
- OKLCH
- oklch(0.229 0.055 58.5)
WCAG contrast: on white 17.09:1 (AAA) · on black 1.22:1 (Fail)
- #0E0400 color page →
text
#0E0400
- RGB
- rgb(14 4 0)
- HSL
- hsl(17 100% 3%)
- OKLCH
- oklch(0.124 0.029 59.9)
WCAG contrast: on white 20.26:1 (AAA) · on black 1.03:1 (Fail)
Export Vivid Magentle System: CSS variables, Tailwind & JSON
CSS variables
:root {
--bg: #f5e9df;
--surface: #eb963d;
--muted: #d33100;
--primary: #b019a9;
--secondary: #006bdf;
--accent: #00580d;
--highlight: #4b2100;
--border: #2f1500;
--text: #0e0400;
}Tailwind CSS v4 @theme
@theme {
--color-bg: #f5e9df;
--color-surface: #eb963d;
--color-muted: #d33100;
--color-primary: #b019a9;
--color-secondary: #006bdf;
--color-accent: #00580d;
--color-highlight: #4b2100;
--color-border: #2f1500;
--color-text: #0e0400;
}JSON (DTCG tokens)
{
"vivid-magentle-system-143": {
"bg": {
"$type": "color",
"$value": "#f5e9df"
},
"surface": {
"$type": "color",
"$value": "#eb963d"
},
"muted": {
"$type": "color",
"$value": "#d33100"
},
"primary": {
"$type": "color",
"$value": "#b019a9"
},
"secondary": {
"$type": "color",
"$value": "#006bdf"
},
"accent": {
"$type": "color",
"$value": "#00580d"
},
"highlight": {
"$type": "color",
"$value": "#4b2100"
},
"border": {
"$type": "color",
"$value": "#2f1500"
},
"text": {
"$type": "color",
"$value": "#0e0400"
}
}
}About this palette
Vivid Magentle System is a 9-color OKLCH-ready palette tagged red, warm, rainbow, 9 colors. Hex values: #F5E9DF, #EB963D, #D33100, #B019A9, #006BDF, #00580D, #4B2100, #2F1500, #0E0400. APCA contrast score Lc 9.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 Magentle System by OKLab color distance.