Forest Empress Circuit palette

Colors in Forest Empress Circuit: HEX, RGB, HSL & OKLCH

• bg

  #DDEEDC

  #DDEEDC color page →

  RGB

  rgb(221 238 220)

  HSL

  hsl(117 35% 90%)

  OKLCH

  oklch(0.932 0.03 143.8)

  WCAG contrast: on white 1.21:1 (Fail) · on black 17.33:1 (AAA)

• surface

  #8EA574

  #8EA574 color page →

  RGB

  rgb(142 165 116)

  HSL

  hsl(88 21% 55%)

  OKLCH

  oklch(0.691 0.073 128.6)

  WCAG contrast: on white 2.69:1 (Fail) · on black 7.78:1 (AAA)

• primary

  #3A712A

  #3A712A color page →

  RGB

  rgb(58 113 42)

  HSL

  hsl(106 46% 30%)

  OKLCH

  oklch(0.494 0.119 139.2)

  WCAG contrast: on white 5.87:1 (AA) · on black 3.57:1 (Fail)

• accent

  #104A24

  #104A24 color page →

  RGB

  rgb(16 74 36)

  HSL

  hsl(141 64% 18%)

  OKLCH

  oklch(0.362 0.087 150.6)

  WCAG contrast: on white 10.36:1 (AAA) · on black 2.02:1 (Fail)

• text

  #030E02

  #030E02 color page →

  RGB

  rgb(3 14 2)

  HSL

  hsl(115 75% 3%)

  OKLCH

  oklch(0.147 0.037 140.9)

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

Export Forest Empress Circuit: CSS variables, Tailwind & JSON

:root {
  --bg: #ddeedc;
  --surface: #8ea574;
  --primary: #3a712a;
  --accent: #104a24;
  --text: #030e02;
}

@theme {
  --color-bg: #ddeedc;
  --color-surface: #8ea574;
  --color-primary: #3a712a;
  --color-accent: #104a24;
  --color-text: #030e02;
}

{
  "forest-empress-circuit-5le": {
    "bg": {
      "$type": "color",
      "$value": "#ddeedc"
    },
    "surface": {
      "$type": "color",
      "$value": "#8ea574"
    },
    "primary": {
      "$type": "color",
      "$value": "#3a712a"
    },
    "accent": {
      "$type": "color",
      "$value": "#104a24"
    },
    "text": {
      "$type": "color",
      "$value": "#030e02"
    }
  }
}