Palette · 9 colors · Lc 9.1
Vicious Violet Harbor palette
Vicious Violet Harbor: a 9-color palette (Red, UI System, 9 Colors). HEX, RGB, HSL and OKLCH for #F2EFF3, #F3E7F6, #DECBE6, #C7A9CF, #B67BC6, #9843A3, #8F3B7D, #532E4E, #1E141F, WCAG contrast on white and black, plus CSS variables, Tailwind and JSON export.
bg
#F2EFF3
surface
#F3E7F6
muted
#DECBE6
primary
#C7A9CF
secondary
#B67BC6
accent
#9843A3
highlight
#8F3B7D
border
#532E4E
text
#1E141F
Colors in Vicious Violet Harbor: HEX, RGB, HSL & OKLCH
- #F2EFF3 color page →
bg
#F2EFF3
- RGB
- rgb(242 239 243)
- HSL
- hsl(285 14% 95%)
- OKLCH
- oklch(0.956 0.006 317.8)
WCAG contrast: on white 1.14:1 (Fail) · on black 18.41:1 (AAA)
- #F3E7F6 color page →
surface
#F3E7F6
- RGB
- rgb(243 231 246)
- HSL
- hsl(288 45% 94%)
- OKLCH
- oklch(0.942 0.024 319.5)
WCAG contrast: on white 1.19:1 (Fail) · on black 17.57:1 (AAA)
- #DECBE6 color page →
muted
#DECBE6
- RGB
- rgb(222 203 230)
- HSL
- hsl(282 35% 85%)
- OKLCH
- oklch(0.866 0.042 316)
WCAG contrast: on white 1.52:1 (Fail) · on black 13.79:1 (AAA)
- #C7A9CF color page →
primary
#C7A9CF
- RGB
- rgb(199 169 207)
- HSL
- hsl(287 28% 74%)
- OKLCH
- oklch(0.773 0.063 319.1)
WCAG contrast: on white 2.09:1 (Fail) · on black 10.00:1 (AAA)
- #B67BC6 color page →
secondary
#B67BC6
- RGB
- rgb(182 123 198)
- HSL
- hsl(287 40% 63%)
- OKLCH
- oklch(0.67 0.125 318.9)
WCAG contrast: on white 3.16:1 (Fail) · on black 6.63:1 (AA)
- #9843A3 color page →
accent
#9843A3
- RGB
- rgb(152 67 163)
- HSL
- hsl(293 42% 45%)
- OKLCH
- oklch(0.532 0.167 322.9)
WCAG contrast: on white 5.72:1 (AA) · on black 3.66:1 (Fail)
- #8F3B7D color page →
highlight
#8F3B7D
- RGB
- rgb(143 59 125)
- HSL
- hsl(313 42% 40%)
- OKLCH
- oklch(0.489 0.14 336.6)
WCAG contrast: on white 6.79:1 (AA) · on black 3.08:1 (Fail)
- #532E4E color page →
border
#532E4E
- RGB
- rgb(83 46 78)
- HSL
- hsl(308 29% 25%)
- OKLCH
- oklch(0.361 0.072 332)
WCAG contrast: on white 11.23:1 (AAA) · on black 1.86:1 (Fail)
- #1E141F color page →
text
#1E141F
- RGB
- rgb(30 20 31)
- HSL
- hsl(295 22% 10%)
- OKLCH
- oklch(0.209 0.026 323.4)
WCAG contrast: on white 17.87:1 (AAA) · on black 1.17:1 (Fail)
Export Vicious Violet Harbor: CSS variables, Tailwind & JSON
CSS variables
:root {
--bg: #f2eff3;
--surface: #f3e7f6;
--muted: #decbe6;
--primary: #c7a9cf;
--secondary: #b67bc6;
--accent: #9843a3;
--highlight: #8f3b7d;
--border: #532e4e;
--text: #1e141f;
}Tailwind CSS v4 @theme
@theme {
--color-bg: #f2eff3;
--color-surface: #f3e7f6;
--color-muted: #decbe6;
--color-primary: #c7a9cf;
--color-secondary: #b67bc6;
--color-accent: #9843a3;
--color-highlight: #8f3b7d;
--color-border: #532e4e;
--color-text: #1e141f;
}JSON (DTCG tokens)
{
"vicious-violet-harbor-176": {
"bg": {
"$type": "color",
"$value": "#f2eff3"
},
"surface": {
"$type": "color",
"$value": "#f3e7f6"
},
"muted": {
"$type": "color",
"$value": "#decbe6"
},
"primary": {
"$type": "color",
"$value": "#c7a9cf"
},
"secondary": {
"$type": "color",
"$value": "#b67bc6"
},
"accent": {
"$type": "color",
"$value": "#9843a3"
},
"highlight": {
"$type": "color",
"$value": "#8f3b7d"
},
"border": {
"$type": "color",
"$value": "#532e4e"
},
"text": {
"$type": "color",
"$value": "#1e141f"
}
}
}About this palette
Vicious Violet Harbor is a 9-color OKLCH-ready palette tagged red, ui system, 9 colors. Hex values: #F2EFF3, #F3E7F6, #DECBE6, #C7A9CF, #B67BC6, #9843A3, #8F3B7D, #532E4E, #1E141F. APCA contrast score Lc 9.1. 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 Vicious Violet Harbor by OKLab color distance.