Palette · 9 colors · Lc 9.2
True Vicious Violet System palette
True Vicious Violet System: a 9-color palette (Trending, Red, Pink, Warm). HEX, RGB, HSL and OKLCH for #F8F1F6, #D4BADC, #B191CC, #A067AD, #8B4798, #7F3774, #622C4D, #3A1635, #120511, WCAG contrast on white and black, plus CSS variables, Tailwind and JSON export.
bg
#F8F1F6
surface
#D4BADC
muted
#B191CC
primary
#A067AD
secondary
#8B4798
accent
#7F3774
highlight
#622C4D
border
#3A1635
text
#120511
Colors in True Vicious Violet System: HEX, RGB, HSL & OKLCH
- #F8F1F6 color page →
bg
#F8F1F6
- RGB
- rgb(248 241 246)
- HSL
- hsl(317 33% 96%)
- OKLCH
- oklch(0.965 0.01 335.5)
WCAG contrast: on white 1.11:1 (Fail) · on black 18.90:1 (AAA)
- #D4BADC color page →
surface
#D4BADC
- RGB
- rgb(212 186 220)
- HSL
- hsl(286 33% 80%)
- OKLCH
- oklch(0.822 0.055 318.2)
WCAG contrast: on white 1.77:1 (Fail) · on black 11.85:1 (AAA)
- #B191CC color page →
muted
#B191CC
- RGB
- rgb(177 145 204)
- HSL
- hsl(273 37% 68%)
- OKLCH
- oklch(0.707 0.091 308.9)
WCAG contrast: on white 2.69:1 (Fail) · on black 7.79:1 (AAA)
- #A067AD color page →
primary
#A067AD
- RGB
- rgb(160 103 173)
- HSL
- hsl(289 30% 54%)
- OKLCH
- oklch(0.601 0.121 320)
WCAG contrast: on white 4.16:1 (Fail) · on black 5.03:1 (AA)
- #8B4798 color page →
secondary
#8B4798
- RGB
- rgb(139 71 152)
- HSL
- hsl(290 36% 44%)
- OKLCH
- oklch(0.514 0.142 321)
WCAG contrast: on white 6.08:1 (AA) · on black 3.45:1 (Fail)
- #7F3774 color page →
accent
#7F3774
- RGB
- rgb(127 55 116)
- HSL
- hsl(309 40% 36%)
- OKLCH
- oklch(0.456 0.127 333.7)
WCAG contrast: on white 7.77:1 (AAA) · on black 2.70:1 (Fail)
- #622C4D color page →
highlight
#622C4D
- RGB
- rgb(98 44 77)
- HSL
- hsl(323 38% 28%)
- OKLCH
- oklch(0.378 0.089 344.6)
WCAG contrast: on white 10.56:1 (AAA) · on black 1.98:1 (Fail)
- #3A1635 color page →
border
#3A1635
- RGB
- rgb(58 22 53)
- HSL
- hsl(308 45% 16%)
- OKLCH
- oklch(0.268 0.073 333)
WCAG contrast: on white 15.60:1 (AAA) · on black 1.34:1 (Fail)
- #120511 color page →
text
#120511
- RGB
- rgb(18 5 17)
- HSL
- hsl(305 57% 5%)
- OKLCH
- oklch(0.145 0.035 329.9)
WCAG contrast: on white 19.89:1 (AAA) · on black 1.05:1 (Fail)
Export True Vicious Violet System: CSS variables, Tailwind & JSON
CSS variables
:root {
--bg: #f8f1f6;
--surface: #d4badc;
--muted: #b191cc;
--primary: #a067ad;
--secondary: #8b4798;
--accent: #7f3774;
--highlight: #622c4d;
--border: #3a1635;
--text: #120511;
}Tailwind CSS v4 @theme
@theme {
--color-bg: #f8f1f6;
--color-surface: #d4badc;
--color-muted: #b191cc;
--color-primary: #a067ad;
--color-secondary: #8b4798;
--color-accent: #7f3774;
--color-highlight: #622c4d;
--color-border: #3a1635;
--color-text: #120511;
}JSON (DTCG tokens)
{
"true-vicious-violet-system-4pz": {
"bg": {
"$type": "color",
"$value": "#f8f1f6"
},
"surface": {
"$type": "color",
"$value": "#d4badc"
},
"muted": {
"$type": "color",
"$value": "#b191cc"
},
"primary": {
"$type": "color",
"$value": "#a067ad"
},
"secondary": {
"$type": "color",
"$value": "#8b4798"
},
"accent": {
"$type": "color",
"$value": "#7f3774"
},
"highlight": {
"$type": "color",
"$value": "#622c4d"
},
"border": {
"$type": "color",
"$value": "#3a1635"
},
"text": {
"$type": "color",
"$value": "#120511"
}
}
}About this palette
True Vicious Violet System is a 9-color OKLCH-ready palette tagged trending, red, pink, warm, 9 colors. Hex values: #F8F1F6, #D4BADC, #B191CC, #A067AD, #8B4798, #7F3774, #622C4D, #3A1635, #120511. 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 True Vicious Violet System by OKLab color distance.