Classic Clouded Pine Fog palette

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

• bg

  #D7E7D8

  #D7E7D8 color page →

  RGB

  rgb(215 231 216)

  HSL

  hsl(124 25% 87%)

  OKLCH

  oklch(0.912 0.026 147.1)

  WCAG contrast: on white 1.28:1 (Fail) · on black 16.31:1 (AAA)

• surface

  #518365

  #518365 color page →

  RGB

  rgb(81 131 101)

  HSL

  hsl(144 24% 42%)

  OKLCH

  oklch(0.566 0.072 156.9)

  WCAG contrast: on white 4.38:1 (Fail) · on black 4.78:1 (AA)

• primary

  #646A8C

  #646A8C color page →

  RGB

  rgb(100 106 140)

  HSL

  hsl(231 17% 47%)

  OKLCH

  oklch(0.532 0.054 276.6)

  WCAG contrast: on white 5.27:1 (AA) · on black 3.98:1 (Fail)

• accent

  #895B4F

  #895B4F color page →

  RGB

  rgb(137 91 79)

  HSL

  hsl(12 27% 42%)

  OKLCH

  oklch(0.518 0.064 35.3)

  WCAG contrast: on white 5.71:1 (AA) · on black 3.67:1 (Fail)

• text

  #06150B

  #06150B color page →

  RGB

  rgb(6 21 11)

  HSL

  hsl(140 56% 5%)

  OKLCH

  oklch(0.178 0.03 154)

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

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

:root {
  --bg: #d7e7d8;
  --surface: #518365;
  --primary: #646a8c;
  --accent: #895b4f;
  --text: #06150b;
}

@theme {
  --color-bg: #d7e7d8;
  --color-surface: #518365;
  --color-primary: #646a8c;
  --color-accent: #895b4f;
  --color-text: #06150b;
}

{
  "classic-clouded-pine-fog-1an": {
    "bg": {
      "$type": "color",
      "$value": "#d7e7d8"
    },
    "surface": {
      "$type": "color",
      "$value": "#518365"
    },
    "primary": {
      "$type": "color",
      "$value": "#646a8c"
    },
    "accent": {
      "$type": "color",
      "$value": "#895b4f"
    },
    "text": {
      "$type": "color",
      "$value": "#06150b"
    }
  }
}