Pure Grape Candy Circuit palette

Colors in Pure Grape Candy Circuit: HEX, RGB, HSL & OKLCH

• bg

  #F5E9FD

  #F5E9FD color page →

  RGB

  rgb(245 233 253)

  HSL

  hsl(276 83% 95%)

  OKLCH

  oklch(0.949 0.029 312.1)

  WCAG contrast: on white 1.16:1 (Fail) · on black 17.95:1 (AAA)

• surface

  #C2AEDC

  #C2AEDC color page →

  RGB

  rgb(194 174 220)

  HSL

  hsl(266 40% 77%)

  OKLCH

  oklch(0.783 0.068 304.6)

  WCAG contrast: on white 2.02:1 (Fail) · on black 10.38:1 (AAA)

• muted

  #A67CC3

  #A67CC3 color page →

  RGB

  rgb(166 124 195)

  HSL

  hsl(275 37% 63%)

  OKLCH

  oklch(0.654 0.112 310.7)

  WCAG contrast: on white 3.33:1 (Fail) · on black 6.29:1 (AA)

• primary

  #8D528F

  #8D528F color page →

  RGB

  rgb(141 82 143)

  HSL

  hsl(298 27% 44%)

  OKLCH

  oklch(0.529 0.115 325.9)

  WCAG contrast: on white 5.62:1 (AA) · on black 3.73:1 (Fail)

• accent

  #502851

  #502851 color page →

  RGB

  rgb(80 40 81)

  HSL

  hsl(299 34% 24%)

  OKLCH

  oklch(0.347 0.085 326.3)

  WCAG contrast: on white 11.90:1 (AAA) · on black 1.76:1 (Fail)

• text

  #1D1224

  #1D1224 color page →

  RGB

  rgb(29 18 36)

  HSL

  hsl(277 33% 11%)

  OKLCH

  oklch(0.206 0.038 311.4)

  WCAG contrast: on white 18.03:1 (AAA) · on black 1.16:1 (Fail)

Export Pure Grape Candy Circuit: CSS variables, Tailwind & JSON

:root {
  --bg: #f5e9fd;
  --surface: #c2aedc;
  --muted: #a67cc3;
  --primary: #8d528f;
  --accent: #502851;
  --text: #1d1224;
}

@theme {
  --color-bg: #f5e9fd;
  --color-surface: #c2aedc;
  --color-muted: #a67cc3;
  --color-primary: #8d528f;
  --color-accent: #502851;
  --color-text: #1d1224;
}

{
  "pure-grape-candy-circuit-rq": {
    "bg": {
      "$type": "color",
      "$value": "#f5e9fd"
    },
    "surface": {
      "$type": "color",
      "$value": "#c2aedc"
    },
    "muted": {
      "$type": "color",
      "$value": "#a67cc3"
    },
    "primary": {
      "$type": "color",
      "$value": "#8d528f"
    },
    "accent": {
      "$type": "color",
      "$value": "#502851"
    },
    "text": {
      "$type": "color",
      "$value": "#1d1224"
    }
  }
}