Vicious Violet Glacier palette

Colors in Vicious Violet Glacier: HEX, RGB, HSL & OKLCH

• bg

  #F7E5F4

  #F7E5F4 color page →

  RGB

  rgb(247 229 244)

  HSL

  hsl(310 53% 93%)

  OKLCH

  oklch(0.941 0.028 331.2)

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

• surface

  #BF96D2

  #BF96D2 color page →

  RGB

  rgb(191 150 210)

  HSL

  hsl(281 40% 71%)

  OKLCH

  oklch(0.732 0.096 314.9)

  WCAG contrast: on white 2.46:1 (Fail) · on black 8.50:1 (AAA)

• primary

  #9A4B93

  #9A4B93 color page →

  RGB

  rgb(154 75 147)

  HSL

  hsl(305 34% 45%)

  OKLCH

  oklch(0.537 0.14 330.7)

  WCAG contrast: on white 5.52:1 (AA) · on black 3.80:1 (Fail)

• accent

  #601C41

  #601C41 color page →

  RGB

  rgb(96 28 65)

  HSL

  hsl(327 55% 24%)

  OKLCH

  oklch(0.347 0.107 350.5)

  WCAG contrast: on white 12.07:1 (AAA) · on black 1.73:1 (Fail)

• text

  #0C060D

  #0C060D color page →

  RGB

  rgb(12 6 13)

  HSL

  hsl(291 37% 4%)

  OKLCH

  oklch(0.136 0.02 322)

  WCAG contrast: on white 20.04:1 (AAA) · on black 1.04:1 (Fail)

Export Vicious Violet Glacier: CSS variables, Tailwind & JSON

:root {
  --bg: #f7e5f4;
  --surface: #bf96d2;
  --primary: #9a4b93;
  --accent: #601c41;
  --text: #0c060d;
}

@theme {
  --color-bg: #f7e5f4;
  --color-surface: #bf96d2;
  --color-primary: #9a4b93;
  --color-accent: #601c41;
  --color-text: #0c060d;
}

{
  "vicious-violet-glacier-77n": {
    "bg": {
      "$type": "color",
      "$value": "#f7e5f4"
    },
    "surface": {
      "$type": "color",
      "$value": "#bf96d2"
    },
    "primary": {
      "$type": "color",
      "$value": "#9a4b93"
    },
    "accent": {
      "$type": "color",
      "$value": "#601c41"
    },
    "text": {
      "$type": "color",
      "$value": "#0c060d"
    }
  }
}