Classic Aloe Vera Cascade palette

Colors in Classic Aloe Vera Cascade: HEX, RGB, HSL & OKLCH

• bg

  #DBEDE6

  #DBEDE6 color page →

  RGB

  rgb(219 237 230)

  HSL

  hsl(157 33% 89%)

  OKLCH

  oklch(0.931 0.021 170.6)

  WCAG contrast: on white 1.21:1 (Fail) · on black 17.26:1 (AAA)

• surface

  #A7B4A6

  #A7B4A6 color page →

  RGB

  rgb(167 180 166)

  HSL

  hsl(116 9% 68%)

  OKLCH

  oklch(0.756 0.024 143.3)

  WCAG contrast: on white 2.15:1 (Fail) · on black 9.72:1 (AAA)

• primary

  #5C8C7C

  #5C8C7C color page →

  RGB

  rgb(92 140 124)

  HSL

  hsl(160 21% 45%)

  OKLCH

  oklch(0.601 0.058 171.4)

  WCAG contrast: on white 3.82:1 (Fail) · on black 5.49:1 (AA)

• accent

  #295356

  #295356 color page →

  RGB

  rgb(41 83 86)

  HSL

  hsl(184 35% 25%)

  OKLCH

  oklch(0.413 0.047 201.6)

  WCAG contrast: on white 8.51:1 (AAA) · on black 2.46:1 (Fail)

• text

  #0D1211

  #0D1211 color page →

  RGB

  rgb(13 18 17)

  HSL

  hsl(168 16% 6%)

  OKLCH

  oklch(0.176 0.008 181.9)

  WCAG contrast: on white 18.88:1 (AAA) · on black 1.11:1 (Fail)

Export Classic Aloe Vera Cascade: CSS variables, Tailwind & JSON

:root {
  --bg: #dbede6;
  --surface: #a7b4a6;
  --primary: #5c8c7c;
  --accent: #295356;
  --text: #0d1211;
}

@theme {
  --color-bg: #dbede6;
  --color-surface: #a7b4a6;
  --color-primary: #5c8c7c;
  --color-accent: #295356;
  --color-text: #0d1211;
}

{
  "classic-aloe-vera-cascade-4it": {
    "bg": {
      "$type": "color",
      "$value": "#dbede6"
    },
    "surface": {
      "$type": "color",
      "$value": "#a7b4a6"
    },
    "primary": {
      "$type": "color",
      "$value": "#5c8c7c"
    },
    "accent": {
      "$type": "color",
      "$value": "#295356"
    },
    "text": {
      "$type": "color",
      "$value": "#0d1211"
    }
  }
}