Classic Clouded Pine Drift palette

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

• bg

  #E2EAE5

  #E2EAE5 color page →

  RGB

  rgb(226 234 229)

  HSL

  hsl(143 16% 90%)

  OKLCH

  oklch(0.93 0.011 158.8)

  WCAG contrast: on white 1.22:1 (Fail) · on black 17.13:1 (AAA)

• surface

  #99B2A1

  #99B2A1 color page →

  RGB

  rgb(153 178 161)

  HSL

  hsl(139 14% 65%)

  OKLCH

  oklch(0.74 0.037 155.7)

  WCAG contrast: on white 2.27:1 (Fail) · on black 9.23:1 (AAA)

• primary

  #577C65

  #577C65 color page →

  RGB

  rgb(87 124 101)

  HSL

  hsl(143 18% 41%)

  OKLCH

  oklch(0.551 0.055 156.8)

  WCAG contrast: on white 4.69:1 (AA) · on black 4.47:1 (Fail)

• accent

  #2B4835

  #2B4835 color page →

  RGB

  rgb(43 72 53)

  HSL

  hsl(141 25% 23%)

  OKLCH

  oklch(0.372 0.048 154.7)

  WCAG contrast: on white 10.09:1 (AAA) · on black 2.08:1 (Fail)

• text

  #091D13

  #091D13 color page →

  RGB

  rgb(9 29 19)

  HSL

  hsl(150 53% 7%)

  OKLCH

  oklch(0.21 0.033 159.9)

  WCAG contrast: on white 17.54:1 (AAA) · on black 1.19:1 (Fail)

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

:root {
  --bg: #e2eae5;
  --surface: #99b2a1;
  --primary: #577c65;
  --accent: #2b4835;
  --text: #091d13;
}

@theme {
  --color-bg: #e2eae5;
  --color-surface: #99b2a1;
  --color-primary: #577c65;
  --color-accent: #2b4835;
  --color-text: #091d13;
}

{
  "classic-clouded-pine-drift-2g7": {
    "bg": {
      "$type": "color",
      "$value": "#e2eae5"
    },
    "surface": {
      "$type": "color",
      "$value": "#99b2a1"
    },
    "primary": {
      "$type": "color",
      "$value": "#577c65"
    },
    "accent": {
      "$type": "color",
      "$value": "#2b4835"
    },
    "text": {
      "$type": "color",
      "$value": "#091d13"
    }
  }
}