Cucumber Queen Cascade palette

Colors in Cucumber Queen Cascade: HEX, RGB, HSL & OKLCH

• bg

  #ECF2E8

  #ECF2E8 color page →

  RGB

  rgb(236 242 232)

  HSL

  hsl(96 28% 93%)

  OKLCH

  oklch(0.954 0.015 132.5)

  WCAG contrast: on white 1.13:1 (Fail) · on black 18.43:1 (AAA)

• surface

  #96AA73

  #96AA73 color page →

  RGB

  rgb(150 170 115)

  HSL

  hsl(82 24% 56%)

  OKLCH

  oklch(0.709 0.079 124.6)

  WCAG contrast: on white 2.53:1 (Fail) · on black 8.29:1 (AAA)

• primary

  #3B6E2F

  #3B6E2F color page →

  RGB

  rgb(59 110 47)

  HSL

  hsl(109 40% 31%)

  OKLCH

  oklch(0.487 0.109 139.9)

  WCAG contrast: on white 6.07:1 (AA) · on black 3.45:1 (Fail)

• accent

  #0E471F

  #0E471F color page →

  RGB

  rgb(14 71 31)

  HSL

  hsl(138 67% 17%)

  OKLCH

  oklch(0.351 0.089 149)

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

• text

  #040F03

  #040F03 color page →

  RGB

  rgb(4 15 3)

  HSL

  hsl(115 67% 4%)

  OKLCH

  oklch(0.152 0.034 141.2)

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

Export Cucumber Queen Cascade: CSS variables, Tailwind & JSON

:root {
  --bg: #ecf2e8;
  --surface: #96aa73;
  --primary: #3b6e2f;
  --accent: #0e471f;
  --text: #040f03;
}

@theme {
  --color-bg: #ecf2e8;
  --color-surface: #96aa73;
  --color-primary: #3b6e2f;
  --color-accent: #0e471f;
  --color-text: #040f03;
}

{
  "cucumber-queen-cascade-d9": {
    "bg": {
      "$type": "color",
      "$value": "#ecf2e8"
    },
    "surface": {
      "$type": "color",
      "$value": "#96aa73"
    },
    "primary": {
      "$type": "color",
      "$value": "#3b6e2f"
    },
    "accent": {
      "$type": "color",
      "$value": "#0e471f"
    },
    "text": {
      "$type": "color",
      "$value": "#040f03"
    }
  }
}