Steady Clouded Pine Canvas palette

Colors in Steady Clouded Pine Canvas: HEX, RGB, HSL & OKLCH

• bg

  #DAE1DE

  #DAE1DE color page →

  RGB

  rgb(218 225 222)

  HSL

  hsl(154 10% 87%)

  OKLCH

  oklch(0.904 0.009 168.7)

  WCAG contrast: on white 1.32:1 (Fail) · on black 15.80:1 (AAA)

• surface

  #538168

  #538168 color page →

  RGB

  rgb(83 129 104)

  HSL

  hsl(147 22% 42%)

  OKLCH

  oklch(0.562 0.064 159.7)

  WCAG contrast: on white 4.46:1 (Fail) · on black 4.70:1 (AA)

• primary

  #725463

  #725463 color page →

  RGB

  rgb(114 84 99)

  HSL

  hsl(330 15% 39%)

  OKLCH

  oklch(0.482 0.045 347.5)

  WCAG contrast: on white 6.63:1 (AA) · on black 3.16:1 (Fail)

• accent

  #68553E

  #68553E color page →

  RGB

  rgb(104 85 62)

  HSL

  hsl(33 25% 33%)

  OKLCH

  oklch(0.462 0.043 71.8)

  WCAG contrast: on white 7.10:1 (AAA) · on black 2.95:1 (Fail)

• text

  #070F0B

  #070F0B color page →

  RGB

  rgb(7 15 11)

  HSL

  hsl(150 36% 4%)

  OKLCH

  oklch(0.158 0.015 163.2)

  WCAG contrast: on white 19.40:1 (AAA) · on black 1.08:1 (Fail)

Export Steady Clouded Pine Canvas: CSS variables, Tailwind & JSON

:root {
  --bg: #dae1de;
  --surface: #538168;
  --primary: #725463;
  --accent: #68553e;
  --text: #070f0b;
}

@theme {
  --color-bg: #dae1de;
  --color-surface: #538168;
  --color-primary: #725463;
  --color-accent: #68553e;
  --color-text: #070f0b;
}

{
  "steady-clouded-pine-canvas-589": {
    "bg": {
      "$type": "color",
      "$value": "#dae1de"
    },
    "surface": {
      "$type": "color",
      "$value": "#538168"
    },
    "primary": {
      "$type": "color",
      "$value": "#725463"
    },
    "accent": {
      "$type": "color",
      "$value": "#68553e"
    },
    "text": {
      "$type": "color",
      "$value": "#070f0b"
    }
  }
}