Classic Vicious Violet System palette

Colors in Classic Vicious Violet System: HEX, RGB, HSL & OKLCH

• bg

  #F1E6FE

  #F1E6FE color page →

  RGB

  rgb(241 230 254)

  HSL

  hsl(268 92% 95%)

  OKLCH

  oklch(0.941 0.034 306.3)

  WCAG contrast: on white 1.20:1 (Fail) · on black 17.49:1 (AAA)

• surface

  #C2A3D5

  #C2A3D5 color page →

  RGB

  rgb(194 163 213)

  HSL

  hsl(277 37% 74%)

  OKLCH

  oklch(0.76 0.078 312.4)

  WCAG contrast: on white 2.21:1 (Fail) · on black 9.49:1 (AAA)

• primary

  #885C9B

  #885C9B color page →

  RGB

  rgb(136 92 155)

  HSL

  hsl(282 26% 48%)

  OKLCH

  oklch(0.546 0.107 315.2)

  WCAG contrast: on white 5.18:1 (AA) · on black 4.05:1 (Fail)

• accent

  #462353

  #462353 color page →

  RGB

  rgb(70 35 83)

  HSL

  hsl(284 41% 23%)

  OKLCH

  oklch(0.326 0.091 316.1)

  WCAG contrast: on white 12.91:1 (AAA) · on black 1.62:1 (Fail)

• text

  #0B040C

  #0B040C color page →

  RGB

  rgb(11 4 12)

  HSL

  hsl(293 50% 3%)

  OKLCH

  oklch(0.126 0.025 323.2)

  WCAG contrast: on white 20.25:1 (AAA) · on black 1.03:1 (Fail)

Export Classic Vicious Violet System: CSS variables, Tailwind & JSON

:root {
  --bg: #f1e6fe;
  --surface: #c2a3d5;
  --primary: #885c9b;
  --accent: #462353;
  --text: #0b040c;
}

@theme {
  --color-bg: #f1e6fe;
  --color-surface: #c2a3d5;
  --color-primary: #885c9b;
  --color-accent: #462353;
  --color-text: #0b040c;
}

{
  "classic-vicious-violet-system-5ie": {
    "bg": {
      "$type": "color",
      "$value": "#f1e6fe"
    },
    "surface": {
      "$type": "color",
      "$value": "#c2a3d5"
    },
    "primary": {
      "$type": "color",
      "$value": "#885c9b"
    },
    "accent": {
      "$type": "color",
      "$value": "#462353"
    },
    "text": {
      "$type": "color",
      "$value": "#0b040c"
    }
  }
}