Classic Vicious Violet Ledger palette

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

• bg

  #F9EAF8

  #F9EAF8 color page →

  RGB

  rgb(249 234 248)

  HSL

  hsl(304 56% 95%)

  OKLCH

  oklch(0.953 0.024 327.8)

  WCAG contrast: on white 1.15:1 (Fail) · on black 18.15:1 (AAA)

• surface

  #B88BCF

  #B88BCF color page →

  RGB

  rgb(184 139 207)

  HSL

  hsl(280 41% 68%)

  OKLCH

  oklch(0.704 0.108 313.8)

  WCAG contrast: on white 2.75:1 (Fail) · on black 7.63:1 (AAA)

• primary

  #8F4898

  #8F4898 color page →

  RGB

  rgb(143 72 152)

  HSL

  hsl(293 36% 44%)

  OKLCH

  oklch(0.521 0.143 323)

  WCAG contrast: on white 5.91:1 (AA) · on black 3.54:1 (Fail)

• accent

  #68254B

  #68254B color page →

  RGB

  rgb(104 37 75)

  HSL

  hsl(326 48% 28%)

  OKLCH

  oklch(0.377 0.106 348.3)

  WCAG contrast: on white 10.74:1 (AAA) · on black 1.95:1 (Fail)

• text

  #180916

  #180916 color page →

  RGB

  rgb(24 9 22)

  HSL

  hsl(308 45% 6%)

  OKLCH

  oklch(0.169 0.035 332)

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

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

:root {
  --bg: #f9eaf8;
  --surface: #b88bcf;
  --primary: #8f4898;
  --accent: #68254b;
  --text: #180916;
}

@theme {
  --color-bg: #f9eaf8;
  --color-surface: #b88bcf;
  --color-primary: #8f4898;
  --color-accent: #68254b;
  --color-text: #180916;
}

{
  "classic-vicious-violet-ledger-4if": {
    "bg": {
      "$type": "color",
      "$value": "#f9eaf8"
    },
    "surface": {
      "$type": "color",
      "$value": "#b88bcf"
    },
    "primary": {
      "$type": "color",
      "$value": "#8f4898"
    },
    "accent": {
      "$type": "color",
      "$value": "#68254b"
    },
    "text": {
      "$type": "color",
      "$value": "#180916"
    }
  }
}