Classic Clouded Pine Cascade palette

Colors in Classic Clouded Pine Cascade: HEX, RGB, HSL & OKLCH

• bg

  #DAE3DC

  #DAE3DC color page →

  RGB

  rgb(218 227 220)

  HSL

  hsl(133 14% 87%)

  OKLCH

  oklch(0.907 0.013 152.6)

  WCAG contrast: on white 1.31:1 (Fail) · on black 16.00:1 (AAA)

• surface

  #96B69C

  #96B69C color page →

  RGB

  rgb(150 182 156)

  HSL

  hsl(131 18% 65%)

  OKLCH

  oklch(0.745 0.051 150.5)

  WCAG contrast: on white 2.21:1 (Fail) · on black 9.46:1 (AAA)

• primary

  #548566

  #548566 color page →

  RGB

  rgb(84 133 102)

  HSL

  hsl(142 23% 43%)

  OKLCH

  oklch(0.573 0.072 155.6)

  WCAG contrast: on white 4.26:1 (Fail) · on black 4.92:1 (AA)

• accent

  #26442C

  #26442C color page →

  RGB

  rgb(38 68 44)

  HSL

  hsl(132 28% 21%)

  OKLCH

  oklch(0.356 0.055 149.3)

  WCAG contrast: on white 10.79:1 (AAA) · on black 1.94:1 (Fail)

• text

  #021407

  #021407 color page →

  RGB

  rgb(2 20 7)

  HSL

  hsl(137 82% 4%)

  OKLCH

  oklch(0.17 0.039 152.3)

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

Export Classic Clouded Pine Cascade: CSS variables, Tailwind & JSON

:root {
  --bg: #dae3dc;
  --surface: #96b69c;
  --primary: #548566;
  --accent: #26442c;
  --text: #021407;
}

@theme {
  --color-bg: #dae3dc;
  --color-surface: #96b69c;
  --color-primary: #548566;
  --color-accent: #26442c;
  --color-text: #021407;
}

{
  "classic-clouded-pine-cascade-zl": {
    "bg": {
      "$type": "color",
      "$value": "#dae3dc"
    },
    "surface": {
      "$type": "color",
      "$value": "#96b69c"
    },
    "primary": {
      "$type": "color",
      "$value": "#548566"
    },
    "accent": {
      "$type": "color",
      "$value": "#26442c"
    },
    "text": {
      "$type": "color",
      "$value": "#021407"
    }
  }
}