Palette · 10 colors · Lc 8.7
Vicious Violet Beacon palette
Vicious Violet Beacon: a 10-color palette (Red, 10 Colors). HEX, RGB, HSL and OKLCH for #F6ECF8, #E1C6EF, #BEA5E6, #BB8EE6, #AD6BBF, #9B4EA6, #853A78, #67234D, #461F45, #211125, WCAG contrast on white and black, plus CSS variables, Tailwind and JSON export.
- Red
- 10 Colors
bg
#F6ECF8
surface
#E1C6EF
muted
#BEA5E6
primary
#BB8EE6
secondary
#AD6BBF
accent
#9B4EA6
highlight
#853A78
border
#67234D
focus
#461F45
text
#211125
Colors in Vicious Violet Beacon: HEX, RGB, HSL & OKLCH
- #F6ECF8 color page →
bg
#F6ECF8
- RGB
- rgb(246 236 248)
- HSL
- hsl(290 46% 95%)
- OKLCH
- oklch(0.954 0.019 320.6)
WCAG contrast: on white 1.14:1 (Fail) · on black 18.27:1 (AAA)
- #E1C6EF color page →
surface
#E1C6EF
- RGB
- rgb(225 198 239)
- HSL
- hsl(280 56% 86%)
- OKLCH
- oklch(0.862 0.063 314.2)
WCAG contrast: on white 1.55:1 (Fail) · on black 13.52:1 (AAA)
- #BEA5E6 color page →
muted
#BEA5E6
- RGB
- rgb(190 165 230)
- HSL
- hsl(263 57% 77%)
- OKLCH
- oklch(0.767 0.095 301.8)
WCAG contrast: on white 2.16:1 (Fail) · on black 9.71:1 (AAA)
- #BB8EE6 color page →
primary
#BB8EE6
- RGB
- rgb(187 142 230)
- HSL
- hsl(271 64% 73%)
- OKLCH
- oklch(0.722 0.132 306.9)
WCAG contrast: on white 2.58:1 (Fail) · on black 8.12:1 (AAA)
- #AD6BBF color page →
secondary
#AD6BBF
- RGB
- rgb(173 107 191)
- HSL
- hsl(287 40% 58%)
- OKLCH
- oklch(0.631 0.141 318.8)
WCAG contrast: on white 3.72:1 (Fail) · on black 5.63:1 (AA)
- #9B4EA6 color page →
accent
#9B4EA6
- RGB
- rgb(155 78 166)
- HSL
- hsl(293 36% 48%)
- OKLCH
- oklch(0.552 0.154 322.5)
WCAG contrast: on white 5.20:1 (AA) · on black 4.03:1 (Fail)
- #853A78 color page →
highlight
#853A78
- RGB
- rgb(133 58 120)
- HSL
- hsl(310 39% 37%)
- OKLCH
- oklch(0.471 0.13 334.6)
WCAG contrast: on white 7.30:1 (AAA) · on black 2.87:1 (Fail)
- #67234D color page →
border
#67234D
- RGB
- rgb(103 35 77)
- HSL
- hsl(323 49% 27%)
- OKLCH
- oklch(0.373 0.11 345.7)
WCAG contrast: on white 10.91:1 (AAA) · on black 1.92:1 (Fail)
- #461F45 color page →
focus
#461F45
- RGB
- rgb(70 31 69)
- HSL
- hsl(302 39% 20%)
- OKLCH
- oklch(0.311 0.082 328.3)
WCAG contrast: on white 13.61:1 (AAA) · on black 1.54:1 (Fail)
- #211125 color page →
text
#211125
- RGB
- rgb(33 17 37)
- HSL
- hsl(288 37% 11%)
- OKLCH
- oklch(0.21 0.044 319.4)
WCAG contrast: on white 17.92:1 (AAA) · on black 1.17:1 (Fail)
Export Vicious Violet Beacon: CSS variables, Tailwind & JSON
CSS variables
:root {
--bg: #f6ecf8;
--surface: #e1c6ef;
--muted: #bea5e6;
--primary: #bb8ee6;
--secondary: #ad6bbf;
--accent: #9b4ea6;
--highlight: #853a78;
--border: #67234d;
--focus: #461f45;
--text: #211125;
}Tailwind CSS v4 @theme
@theme {
--color-bg: #f6ecf8;
--color-surface: #e1c6ef;
--color-muted: #bea5e6;
--color-primary: #bb8ee6;
--color-secondary: #ad6bbf;
--color-accent: #9b4ea6;
--color-highlight: #853a78;
--color-border: #67234d;
--color-focus: #461f45;
--color-text: #211125;
}JSON (DTCG tokens)
{
"vicious-violet-beacon-5pg": {
"bg": {
"$type": "color",
"$value": "#f6ecf8"
},
"surface": {
"$type": "color",
"$value": "#e1c6ef"
},
"muted": {
"$type": "color",
"$value": "#bea5e6"
},
"primary": {
"$type": "color",
"$value": "#bb8ee6"
},
"secondary": {
"$type": "color",
"$value": "#ad6bbf"
},
"accent": {
"$type": "color",
"$value": "#9b4ea6"
},
"highlight": {
"$type": "color",
"$value": "#853a78"
},
"border": {
"$type": "color",
"$value": "#67234d"
},
"focus": {
"$type": "color",
"$value": "#461f45"
},
"text": {
"$type": "color",
"$value": "#211125"
}
}
}About this palette
Vicious Violet Beacon is a 10-color OKLCH-ready palette tagged red, 10 colors. Hex values: #F6ECF8, #E1C6EF, #BEA5E6, #BB8EE6, #AD6BBF, #9B4EA6, #853A78, #67234D, #461F45, #211125. APCA contrast score Lc 8.7. 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 Beacon by OKLab color distance.