Grape Riot Beacon palette

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

• bg

  #FFEFFC

  #FFEFFC color page →

  RGB

  rgb(255 239 252)

  HSL

  hsl(311 100% 97%)

  OKLCH

  oklch(0.968 0.024 331.9)

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

• surface

  #BE8CC8

  #BE8CC8 color page →

  RGB

  rgb(190 140 200)

  HSL

  hsl(290 35% 67%)

  OKLCH

  oklch(0.709 0.102 320.7)

  WCAG contrast: on white 2.70:1 (Fail) · on black 7.77:1 (AAA)

• primary

  #974483

  #974483 color page →

  RGB

  rgb(151 68 131)

  HSL

  hsl(314 38% 43%)

  OKLCH

  oklch(0.516 0.136 337.6)

  WCAG contrast: on white 6.05:1 (AA) · on black 3.47:1 (Fail)

• accent

  #692445

  #692445 color page →

  RGB

  rgb(105 36 69)

  HSL

  hsl(331 49% 28%)

  OKLCH

  oklch(0.375 0.105 353.7)

  WCAG contrast: on white 10.83:1 (AAA) · on black 1.93:1 (Fail)

• text

  #13060F

  #13060F color page →

  RGB

  rgb(19 6 15)

  HSL

  hsl(318 52% 5%)

  OKLCH

  oklch(0.149 0.03 339.1)

  WCAG contrast: on white 19.79:1 (AAA) · on black 1.06:1 (Fail)

Export Grape Riot Beacon: CSS variables, Tailwind & JSON

:root {
  --bg: #ffeffc;
  --surface: #be8cc8;
  --primary: #974483;
  --accent: #692445;
  --text: #13060f;
}

@theme {
  --color-bg: #ffeffc;
  --color-surface: #be8cc8;
  --color-primary: #974483;
  --color-accent: #692445;
  --color-text: #13060f;
}

{
  "grape-riot-beacon-4c7": {
    "bg": {
      "$type": "color",
      "$value": "#ffeffc"
    },
    "surface": {
      "$type": "color",
      "$value": "#be8cc8"
    },
    "primary": {
      "$type": "color",
      "$value": "#974483"
    },
    "accent": {
      "$type": "color",
      "$value": "#692445"
    },
    "text": {
      "$type": "color",
      "$value": "#13060f"
    }
  }
}