True Vicious Violet Quartz palette

Colors in True Vicious Violet Quartz: HEX, RGB, HSL & OKLCH

• bg

  #F1E6F4

  #F1E6F4 color page →

  RGB

  rgb(241 230 244)

  HSL

  hsl(287 39% 93%)

  OKLCH

  oklch(0.938 0.022 319)

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

• surface

  #B297D7

  #B297D7 color page →

  RGB

  rgb(178 151 215)

  HSL

  hsl(265 44% 72%)

  OKLCH

  oklch(0.723 0.095 303.4)

  WCAG contrast: on white 2.52:1 (Fail) · on black 8.30:1 (AAA)

• primary

  #944C99

  #944C99 color page →

  RGB

  rgb(148 76 153)

  HSL

  hsl(296 34% 45%)

  OKLCH

  oklch(0.534 0.14 324.9)

  WCAG contrast: on white 5.59:1 (AA) · on black 3.75:1 (Fail)

• accent

  #68254D

  #68254D color page →

  RGB

  rgb(104 37 77)

  HSL

  hsl(324 48% 28%)

  OKLCH

  oklch(0.378 0.108 346.6)

  WCAG contrast: on white 10.71:1 (AAA) · on black 1.96:1 (Fail)

• text

  #0F0310

  #0F0310 color page →

  RGB

  rgb(15 3 16)

  HSL

  hsl(295 68% 4%)

  OKLCH

  oklch(0.132 0.039 325)

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

Export True Vicious Violet Quartz: CSS variables, Tailwind & JSON

:root {
  --bg: #f1e6f4;
  --surface: #b297d7;
  --primary: #944c99;
  --accent: #68254d;
  --text: #0f0310;
}

@theme {
  --color-bg: #f1e6f4;
  --color-surface: #b297d7;
  --color-primary: #944c99;
  --color-accent: #68254d;
  --color-text: #0f0310;
}

{
  "true-vicious-violet-quartz-9w": {
    "bg": {
      "$type": "color",
      "$value": "#f1e6f4"
    },
    "surface": {
      "$type": "color",
      "$value": "#b297d7"
    },
    "primary": {
      "$type": "color",
      "$value": "#944c99"
    },
    "accent": {
      "$type": "color",
      "$value": "#68254d"
    },
    "text": {
      "$type": "color",
      "$value": "#0f0310"
    }
  }
}