Classic Fruit of Passion Canvas palette

Colors in Classic Fruit of Passion Canvas: HEX, RGB, HSL & OKLCH

• bg

  #E9E7E8

  #E9E7E8 color page →

  RGB

  rgb(233 231 232)

  HSL

  hsl(330 4% 91%)

  OKLCH

  oklch(0.93 0.003 345.2)

  WCAG contrast: on white 1.23:1 (Fail) · on black 17.06:1 (AAA)

• surface

  #8C6683

  #8C6683 color page →

  RGB

  rgb(140 102 131)

  HSL

  hsl(314 16% 47%)

  OKLCH

  oklch(0.559 0.064 335.1)

  WCAG contrast: on white 4.83:1 (AA) · on black 4.34:1 (Fail)

• primary

  #496E5B

  #496E5B color page →

  RGB

  rgb(73 110 91)

  HSL

  hsl(149 20% 36%)

  OKLCH

  oklch(0.504 0.052 161.4)

  WCAG contrast: on white 5.73:1 (AA) · on black 3.66:1 (Fail)

• accent

  #373235

  #373235 color page →

  RGB

  rgb(55 50 53)

  HSL

  hsl(324 5% 21%)

  OKLCH

  oklch(0.323 0.009 340.8)

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

• text

  #120A10

  #120A10 color page →

  RGB

  rgb(18 10 16)

  HSL

  hsl(315 29% 5%)

  OKLCH

  oklch(0.159 0.018 335.7)

  WCAG contrast: on white 19.50:1 (AAA) · on black 1.07:1 (Fail)

Export Classic Fruit of Passion Canvas: CSS variables, Tailwind & JSON

:root {
  --bg: #e9e7e8;
  --surface: #8c6683;
  --primary: #496e5b;
  --accent: #373235;
  --text: #120a10;
}

@theme {
  --color-bg: #e9e7e8;
  --color-surface: #8c6683;
  --color-primary: #496e5b;
  --color-accent: #373235;
  --color-text: #120a10;
}

{
  "classic-fruit-of-passion-canvas-4gj": {
    "bg": {
      "$type": "color",
      "$value": "#e9e7e8"
    },
    "surface": {
      "$type": "color",
      "$value": "#8c6683"
    },
    "primary": {
      "$type": "color",
      "$value": "#496e5b"
    },
    "accent": {
      "$type": "color",
      "$value": "#373235"
    },
    "text": {
      "$type": "color",
      "$value": "#120a10"
    }
  }
}