Pure Clouded Pine Kiln palette

Colors in Pure Clouded Pine Kiln: HEX, RGB, HSL & OKLCH

• bg

  #04100B

  #04100B color page →

  RGB

  rgb(4 16 11)

  HSL

  hsl(155 60% 4%)

  OKLCH

  oklch(0.159 0.022 167.4)

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

• surface

  #2C4636

  #2C4636 color page →

  RGB

  rgb(44 70 54)

  HSL

  hsl(143 23% 22%)

  OKLCH

  oklch(0.368 0.042 156.6)

  WCAG contrast: on white 10.31:1 (AAA) · on black 2.03:1 (Fail)

• primary

  #568068

  #568068 color page →

  RGB

  rgb(86 128 104)

  HSL

  hsl(146 20% 42%)

  OKLCH

  oklch(0.562 0.06 158.7)

  WCAG contrast: on white 4.48:1 (Fail) · on black 4.68:1 (AA)

• accent

  #9AB6A5

  #9AB6A5 color page →

  RGB

  rgb(154 182 165)

  HSL

  hsl(144 16% 66%)

  OKLCH

  oklch(0.75 0.039 158.7)

  WCAG contrast: on white 2.18:1 (Fail) · on black 9.60:1 (AAA)

• text

  #EBEDEB

  #EBEDEB color page →

  RGB

  rgb(235 237 235)

  HSL

  hsl(120 5% 93%)

  OKLCH

  oklch(0.944 0.003 145.5)

  WCAG contrast: on white 1.17:1 (Fail) · on black 17.84:1 (AAA)

Export Pure Clouded Pine Kiln: CSS variables, Tailwind & JSON

:root {
  --bg: #04100b;
  --surface: #2c4636;
  --primary: #568068;
  --accent: #9ab6a5;
  --text: #ebedeb;
}

@theme {
  --color-bg: #04100b;
  --color-surface: #2c4636;
  --color-primary: #568068;
  --color-accent: #9ab6a5;
  --color-text: #ebedeb;
}

{
  "pure-clouded-pine-kiln-2ic": {
    "bg": {
      "$type": "color",
      "$value": "#04100b"
    },
    "surface": {
      "$type": "color",
      "$value": "#2c4636"
    },
    "primary": {
      "$type": "color",
      "$value": "#568068"
    },
    "accent": {
      "$type": "color",
      "$value": "#9ab6a5"
    },
    "text": {
      "$type": "color",
      "$value": "#ebedeb"
    }
  }
}