Classic Vicious Violet Ember palette

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

• bg

  #F4E4F4

  #F4E4F4 color page →

  RGB

  rgb(244 228 244)

  HSL

  hsl(300 42% 93%)

  OKLCH

  oklch(0.936 0.027 325.8)

  WCAG contrast: on white 1.21:1 (Fail) · on black 17.25:1 (AAA)

• surface

  #B491CE

  #B491CE color page →

  RGB

  rgb(180 145 206)

  HSL

  hsl(274 38% 69%)

  OKLCH

  oklch(0.71 0.095 310.2)

  WCAG contrast: on white 2.66:1 (Fail) · on black 7.88:1 (AAA)

• primary

  #8E54A0

  #8E54A0 color page →

  RGB

  rgb(142 84 160)

  HSL

  hsl(286 31% 48%)

  OKLCH

  oklch(0.542 0.13 317.8)

  WCAG contrast: on white 5.34:1 (AA) · on black 3.92:1 (Fail)

• accent

  #57234B

  #57234B color page →

  RGB

  rgb(87 35 75)

  HSL

  hsl(314 43% 24%)

  OKLCH

  oklch(0.347 0.094 337.2)

  WCAG contrast: on white 12.01:1 (AAA) · on black 1.74:1 (Fail)

• text

  #160917

  #160917 color page →

  RGB

  rgb(22 9 23)

  HSL

  hsl(296 44% 6%)

  OKLCH

  oklch(0.167 0.035 324.4)

  WCAG contrast: on white 19.34:1 (AAA) · on black 1.08:1 (Fail)

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

:root {
  --bg: #f4e4f4;
  --surface: #b491ce;
  --primary: #8e54a0;
  --accent: #57234b;
  --text: #160917;
}

@theme {
  --color-bg: #f4e4f4;
  --color-surface: #b491ce;
  --color-primary: #8e54a0;
  --color-accent: #57234b;
  --color-text: #160917;
}

{
  "classic-vicious-violet-ember-38f": {
    "bg": {
      "$type": "color",
      "$value": "#f4e4f4"
    },
    "surface": {
      "$type": "color",
      "$value": "#b491ce"
    },
    "primary": {
      "$type": "color",
      "$value": "#8e54a0"
    },
    "accent": {
      "$type": "color",
      "$value": "#57234b"
    },
    "text": {
      "$type": "color",
      "$value": "#160917"
    }
  }
}