True Vicious Violet Cascade palette

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

• bg

  #FDF0FE

  #FDF0FE color page →

  RGB

  rgb(253 240 254)

  HSL

  hsl(296 88% 97%)

  OKLCH

  oklch(0.969 0.023 323.6)

  WCAG contrast: on white 1.10:1 (Fail) · on black 19.07:1 (AAA)

• surface

  #BB99DE

  #BB99DE color page →

  RGB

  rgb(187 153 222)

  HSL

  hsl(270 51% 74%)

  OKLCH

  oklch(0.738 0.104 306.5)

  WCAG contrast: on white 2.40:1 (Fail) · on black 8.72:1 (AAA)

• primary

  #924FA3

  #924FA3 color page →

  RGB

  rgb(146 79 163)

  HSL

  hsl(288 35% 47%)

  OKLCH

  oklch(0.541 0.144 319.2)

  WCAG contrast: on white 5.42:1 (AA) · on black 3.86:1 (Fail)

• accent

  #571E42

  #571E42 color page →

  RGB

  rgb(87 30 66)

  HSL

  hsl(322 49% 23%)

  OKLCH

  oklch(0.335 0.096 344.7)

  WCAG contrast: on white 12.57:1 (AAA) · on black 1.66:1 (Fail)

• text

  #0D060F

  #0D060F color page →

  RGB

  rgb(13 6 15)

  HSL

  hsl(287 43% 4%)

  OKLCH

  oklch(0.139 0.024 319.1)

  WCAG contrast: on white 19.99:1 (AAA) · on black 1.05:1 (Fail)

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

:root {
  --bg: #fdf0fe;
  --surface: #bb99de;
  --primary: #924fa3;
  --accent: #571e42;
  --text: #0d060f;
}

@theme {
  --color-bg: #fdf0fe;
  --color-surface: #bb99de;
  --color-primary: #924fa3;
  --color-accent: #571e42;
  --color-text: #0d060f;
}

{
  "true-vicious-violet-cascade-zq": {
    "bg": {
      "$type": "color",
      "$value": "#fdf0fe"
    },
    "surface": {
      "$type": "color",
      "$value": "#bb99de"
    },
    "primary": {
      "$type": "color",
      "$value": "#924fa3"
    },
    "accent": {
      "$type": "color",
      "$value": "#571e42"
    },
    "text": {
      "$type": "color",
      "$value": "#0d060f"
    }
  }
}