Steady Clouded Pine Circuit palette

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

• bg

  #D7E9E1

  #D7E9E1 color page →

  RGB

  rgb(215 233 225)

  HSL

  hsl(153 29% 88%)

  OKLCH

  oklch(0.918 0.022 167.4)

  WCAG contrast: on white 1.26:1 (Fail) · on black 16.63:1 (AAA)

• surface

  #A5BEA9

  #A5BEA9 color page →

  RGB

  rgb(165 190 169)

  HSL

  hsl(130 16% 70%)

  OKLCH

  oklch(0.777 0.04 149.9)

  WCAG contrast: on white 1.99:1 (Fail) · on black 10.53:1 (AAA)

• primary

  #4F8570

  #4F8570 color page →

  RGB

  rgb(79 133 112)

  HSL

  hsl(157 25% 42%)

  OKLCH

  oklch(0.573 0.067 167.2)

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

• accent

  #274F46

  #274F46 color page →

  RGB

  rgb(39 79 70)

  HSL

  hsl(167 34% 23%)

  OKLCH

  oklch(0.395 0.048 177.3)

  WCAG contrast: on white 9.15:1 (AAA) · on black 2.29:1 (Fail)

• text

  #0E1613

  #0E1613 color page →

  RGB

  rgb(14 22 19)

  HSL

  hsl(158 22% 7%)

  OKLCH

  oklch(0.191 0.013 169.8)

  WCAG contrast: on white 18.37:1 (AAA) · on black 1.14:1 (Fail)

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

:root {
  --bg: #d7e9e1;
  --surface: #a5bea9;
  --primary: #4f8570;
  --accent: #274f46;
  --text: #0e1613;
}

@theme {
  --color-bg: #d7e9e1;
  --color-surface: #a5bea9;
  --color-primary: #4f8570;
  --color-accent: #274f46;
  --color-text: #0e1613;
}

{
  "steady-clouded-pine-circuit-3ts": {
    "bg": {
      "$type": "color",
      "$value": "#d7e9e1"
    },
    "surface": {
      "$type": "color",
      "$value": "#a5bea9"
    },
    "primary": {
      "$type": "color",
      "$value": "#4f8570"
    },
    "accent": {
      "$type": "color",
      "$value": "#274f46"
    },
    "text": {
      "$type": "color",
      "$value": "#0e1613"
    }
  }
}