Classic Bucolic Studio palette

Colors in Classic Bucolic Studio: HEX, RGB, HSL & OKLCH

• bg

  #EDF5EF

  #EDF5EF color page →

  RGB

  rgb(237 245 239)

  HSL

  hsl(135 29% 95%)

  OKLCH

  oklch(0.962 0.012 153.7)

  WCAG contrast: on white 1.11:1 (Fail) · on black 18.90:1 (AAA)

• surface

  #87AB78

  #87AB78 color page →

  RGB

  rgb(135 171 120)

  HSL

  hsl(102 23% 57%)

  OKLCH

  oklch(0.701 0.082 136.7)

  WCAG contrast: on white 2.58:1 (Fail) · on black 8.12:1 (AAA)

• primary

  #1D6F3A

  #1D6F3A color page →

  RGB

  rgb(29 111 58)

  HSL

  hsl(141 59% 27%)

  OKLCH

  oklch(0.48 0.114 150.9)

  WCAG contrast: on white 6.19:1 (AA) · on black 3.38:1 (Fail)

• accent

  #004A32

  #004A32 color page →

  RGB

  rgb(0 74 50)

  HSL

  hsl(161 100% 15%)

  OKLCH

  oklch(0.362 0.078 163.5)

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

• text

  #061107

  #061107 color page →

  RGB

  rgb(6 17 7)

  HSL

  hsl(125 48% 5%)

  OKLCH

  oklch(0.163 0.027 146.7)

  WCAG contrast: on white 19.24:1 (AAA) · on black 1.09:1 (Fail)

Export Classic Bucolic Studio: CSS variables, Tailwind & JSON

:root {
  --bg: #edf5ef;
  --surface: #87ab78;
  --primary: #1d6f3a;
  --accent: #004a32;
  --text: #061107;
}

@theme {
  --color-bg: #edf5ef;
  --color-surface: #87ab78;
  --color-primary: #1d6f3a;
  --color-accent: #004a32;
  --color-text: #061107;
}

{
  "classic-bucolic-studio-46n": {
    "bg": {
      "$type": "color",
      "$value": "#edf5ef"
    },
    "surface": {
      "$type": "color",
      "$value": "#87ab78"
    },
    "primary": {
      "$type": "color",
      "$value": "#1d6f3a"
    },
    "accent": {
      "$type": "color",
      "$value": "#004a32"
    },
    "text": {
      "$type": "color",
      "$value": "#061107"
    }
  }
}