Clear Vegetation Beacon palette

Colors in Clear Vegetation Beacon: HEX, RGB, HSL & OKLCH

• bg

  #D8ECEA

  #D8ECEA color page →

  RGB

  rgb(216 236 234)

  HSL

  hsl(174 34% 89%)

  OKLCH

  oklch(0.928 0.021 189.5)

  WCAG contrast: on white 1.22:1 (Fail) · on black 17.10:1 (AAA)

• surface

  #50D193

  #50D193 color page →

  RGB

  rgb(80 209 147)

  HSL

  hsl(151 58% 57%)

  OKLCH

  oklch(0.773 0.145 159)

  WCAG contrast: on white 1.92:1 (Fail) · on black 10.88:1 (AAA)

• primary

  #009986

  #009986 color page →

  RGB

  rgb(0 153 134)

  HSL

  hsl(173 100% 30%)

  OKLCH

  oklch(0.612 0.111 179.8)

  WCAG contrast: on white 3.55:1 (Fail) · on black 5.90:1 (AA)

• accent

  #00627F

  #00627F color page →

  RGB

  rgb(0 98 127)

  HSL

  hsl(194 100% 25%)

  OKLCH

  oklch(0.463 0.089 226.8)

  WCAG contrast: on white 6.87:1 (AA) · on black 3.05:1 (Fail)

• text

  #00231B

  #00231B color page →

  RGB

  rgb(0 35 27)

  HSL

  hsl(166 100% 7%)

  OKLCH

  oklch(0.229 0.043 174.1)

  WCAG contrast: on white 16.71:1 (AAA) · on black 1.25:1 (Fail)

Export Clear Vegetation Beacon: CSS variables, Tailwind & JSON

:root {
  --bg: #d8ecea;
  --surface: #50d193;
  --primary: #009986;
  --accent: #00627f;
  --text: #00231b;
}

@theme {
  --color-bg: #d8ecea;
  --color-surface: #50d193;
  --color-primary: #009986;
  --color-accent: #00627f;
  --color-text: #00231b;
}

{
  "clear-vegetation-beacon-2y3": {
    "bg": {
      "$type": "color",
      "$value": "#d8ecea"
    },
    "surface": {
      "$type": "color",
      "$value": "#50d193"
    },
    "primary": {
      "$type": "color",
      "$value": "#009986"
    },
    "accent": {
      "$type": "color",
      "$value": "#00627f"
    },
    "text": {
      "$type": "color",
      "$value": "#00231b"
    }
  }
}