Classic Mana Tree System palette

Colors in Classic Mana Tree System: HEX, RGB, HSL & OKLCH

• bg

  #070D05

  #070D05 color page →

  RGB

  rgb(7 13 5)

  HSL

  hsl(105 44% 4%)

  OKLCH

  oklch(0.149 0.021 136.7)

  WCAG contrast: on white 19.64:1 (AAA) · on black 1.06:1 (Fail)

• surface

  #2F481B

  #2F481B color page →

  RGB

  rgb(47 72 27)

  HSL

  hsl(93 45% 19%)

  OKLCH

  oklch(0.37 0.076 133.2)

  WCAG contrast: on white 10.17:1 (AAA) · on black 2.06:1 (Fail)

• primary

  #547C43

  #547C43 color page →

  RGB

  rgb(84 124 67)

  HSL

  hsl(102 30% 37%)

  OKLCH

  oklch(0.542 0.095 136.9)

  WCAG contrast: on white 4.83:1 (AA) · on black 4.34:1 (Fail)

• accent

  #9DBB89

  #9DBB89 color page →

  RGB

  rgb(157 187 137)

  HSL

  hsl(96 27% 64%)

  OKLCH

  oklch(0.757 0.077 133.2)

  WCAG contrast: on white 2.12:1 (Fail) · on black 9.90:1 (AAA)

• text

  #EEFCEA

  #EEFCEA color page →

  RGB

  rgb(238 252 234)

  HSL

  hsl(107 75% 95%)

  OKLCH

  oklch(0.976 0.028 138.7)

  WCAG contrast: on white 1.06:1 (Fail) · on black 19.74:1 (AAA)

Export Classic Mana Tree System: CSS variables, Tailwind & JSON

:root {
  --bg: #070d05;
  --surface: #2f481b;
  --primary: #547c43;
  --accent: #9dbb89;
  --text: #eefcea;
}

@theme {
  --color-bg: #070d05;
  --color-surface: #2f481b;
  --color-primary: #547c43;
  --color-accent: #9dbb89;
  --color-text: #eefcea;
}

{
  "classic-mana-tree-system-6r8": {
    "bg": {
      "$type": "color",
      "$value": "#070d05"
    },
    "surface": {
      "$type": "color",
      "$value": "#2f481b"
    },
    "primary": {
      "$type": "color",
      "$value": "#547c43"
    },
    "accent": {
      "$type": "color",
      "$value": "#9dbb89"
    },
    "text": {
      "$type": "color",
      "$value": "#eefcea"
    }
  }
}