True Grape Riot Cascade palette

Colors in True Grape Riot Cascade: HEX, RGB, HSL & OKLCH

• bg

  #F4E1EE

  #F4E1EE color page →

  RGB

  rgb(244 225 238)

  HSL

  hsl(319 46% 92%)

  OKLCH

  oklch(0.929 0.027 337.1)

  WCAG contrast: on white 1.24:1 (Fail) · on black 16.85:1 (AAA)

• surface

  #BC8DC8

  #BC8DC8 color page →

  RGB

  rgb(188 141 200)

  HSL

  hsl(288 35% 67%)

  OKLCH

  oklch(0.708 0.099 319.3)

  WCAG contrast: on white 2.69:1 (Fail) · on black 7.78:1 (AAA)

• primary

  #9A4C90

  #9A4C90 color page →

  RGB

  rgb(154 76 144)

  HSL

  hsl(308 34% 45%)

  OKLCH

  oklch(0.537 0.136 332.3)

  WCAG contrast: on white 5.51:1 (AA) · on black 3.81:1 (Fail)

• accent

  #621B3F

  #621B3F color page →

  RGB

  rgb(98 27 63)

  HSL

  hsl(330 57% 25%)

  OKLCH

  oklch(0.349 0.109 353)

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

• text

  #0D050B

  #0D050B color page →

  RGB

  rgb(13 5 11)

  HSL

  hsl(315 44% 4%)

  OKLCH

  oklch(0.132 0.022 335.2)

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

Export True Grape Riot Cascade: CSS variables, Tailwind & JSON

:root {
  --bg: #f4e1ee;
  --surface: #bc8dc8;
  --primary: #9a4c90;
  --accent: #621b3f;
  --text: #0d050b;
}

@theme {
  --color-bg: #f4e1ee;
  --color-surface: #bc8dc8;
  --color-primary: #9a4c90;
  --color-accent: #621b3f;
  --color-text: #0d050b;
}

{
  "true-grape-riot-cascade-40b": {
    "bg": {
      "$type": "color",
      "$value": "#f4e1ee"
    },
    "surface": {
      "$type": "color",
      "$value": "#bc8dc8"
    },
    "primary": {
      "$type": "color",
      "$value": "#9a4c90"
    },
    "accent": {
      "$type": "color",
      "$value": "#621b3f"
    },
    "text": {
      "$type": "color",
      "$value": "#0d050b"
    }
  }
}