Succulents Atelier palette

Colors in Succulents Atelier: HEX, RGB, HSL & OKLCH

• bg

  #EBF2EC

  #EBF2EC color page →

  RGB

  rgb(235 242 236)

  HSL

  hsl(129 21% 94%)

  OKLCH

  oklch(0.954 0.011 149.9)

  WCAG contrast: on white 1.13:1 (Fail) · on black 18.44:1 (AAA)

• surface

  #7BB081

  #7BB081 color page →

  RGB

  rgb(123 176 129)

  HSL

  hsl(127 25% 59%)

  OKLCH

  oklch(0.707 0.088 147.4)

  WCAG contrast: on white 2.50:1 (Fail) · on black 8.36:1 (AAA)

• primary

  #1E7241

  #1E7241 color page →

  RGB

  rgb(30 114 65)

  HSL

  hsl(145 58% 28%)

  OKLCH

  oklch(0.49 0.111 153.2)

  WCAG contrast: on white 5.93:1 (AA) · on black 3.53:1 (Fail)

• accent

  #003E31

  #003E31 color page →

  RGB

  rgb(0 62 49)

  HSL

  hsl(167 100% 12%)

  OKLCH

  oklch(0.324 0.062 173.2)

  WCAG contrast: on white 12.11:1 (AAA) · on black 1.73:1 (Fail)

• text

  #0B150E

  #0B150E color page →

  RGB

  rgb(11 21 14)

  HSL

  hsl(138 31% 6%)

  OKLCH

  oklch(0.183 0.021 153.5)

  WCAG contrast: on white 18.61:1 (AAA) · on black 1.12:1 (Fail)

Export Succulents Atelier: CSS variables, Tailwind & JSON

:root {
  --bg: #ebf2ec;
  --surface: #7bb081;
  --primary: #1e7241;
  --accent: #003e31;
  --text: #0b150e;
}

@theme {
  --color-bg: #ebf2ec;
  --color-surface: #7bb081;
  --color-primary: #1e7241;
  --color-accent: #003e31;
  --color-text: #0b150e;
}

{
  "succulents-atelier-18": {
    "bg": {
      "$type": "color",
      "$value": "#ebf2ec"
    },
    "surface": {
      "$type": "color",
      "$value": "#7bb081"
    },
    "primary": {
      "$type": "color",
      "$value": "#1e7241"
    },
    "accent": {
      "$type": "color",
      "$value": "#003e31"
    },
    "text": {
      "$type": "color",
      "$value": "#0b150e"
    }
  }
}