Grape Riot Archive palette

Colors in Grape Riot Archive: HEX, RGB, HSL & OKLCH

• bg

  #EDE6EC

  #EDE6EC color page →

  RGB

  rgb(237 230 236)

  HSL

  hsl(309 16% 92%)

  OKLCH

  oklch(0.932 0.011 330.2)

  WCAG contrast: on white 1.22:1 (Fail) · on black 17.13:1 (AAA)

• surface

  #BD8EC4

  #BD8EC4 color page →

  RGB

  rgb(189 142 196)

  HSL

  hsl(292 31% 66%)

  OKLCH

  oklch(0.71 0.093 322.1)

  WCAG contrast: on white 2.68:1 (Fail) · on black 7.83:1 (AAA)

• primary

  #984185

  #984185 color page →

  RGB

  rgb(152 65 133)

  HSL

  hsl(313 40% 43%)

  OKLCH

  oklch(0.514 0.143 336.7)

  WCAG contrast: on white 6.12:1 (AA) · on black 3.42:1 (Fail)

• accent

  #692044

  #692044 color page →

  RGB

  rgb(105 32 68)

  HSL

  hsl(330 53% 27%)

  OKLCH

  oklch(0.369 0.111 353.5)

  WCAG contrast: on white 11.10:1 (AAA) · on black 1.89:1 (Fail)

• text

  #160C16

  #160C16 color page →

  RGB

  rgb(22 12 22)

  HSL

  hsl(300 29% 7%)

  OKLCH

  oklch(0.173 0.026 326.6)

  WCAG contrast: on white 19.12:1 (AAA) · on black 1.09:1 (Fail)

Export Grape Riot Archive: CSS variables, Tailwind & JSON

:root {
  --bg: #ede6ec;
  --surface: #bd8ec4;
  --primary: #984185;
  --accent: #692044;
  --text: #160c16;
}

@theme {
  --color-bg: #ede6ec;
  --color-surface: #bd8ec4;
  --color-primary: #984185;
  --color-accent: #692044;
  --color-text: #160c16;
}

{
  "grape-riot-archive-2eh": {
    "bg": {
      "$type": "color",
      "$value": "#ede6ec"
    },
    "surface": {
      "$type": "color",
      "$value": "#bd8ec4"
    },
    "primary": {
      "$type": "color",
      "$value": "#984185"
    },
    "accent": {
      "$type": "color",
      "$value": "#692044"
    },
    "text": {
      "$type": "color",
      "$value": "#160c16"
    }
  }
}