Steady Prunella Canvas palette

Colors in Steady Prunella Canvas: HEX, RGB, HSL & OKLCH

• bg

  #D1EAEB

  #D1EAEB color page →

  RGB

  rgb(209 234 235)

  HSL

  hsl(182 39% 87%)

  OKLCH

  oklch(0.919 0.026 199.6)

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

• surface

  #008492

  #008492 color page →

  RGB

  rgb(0 132 146)

  HSL

  hsl(186 100% 29%)

  OKLCH

  oklch(0.561 0.096 207.8)

  WCAG contrast: on white 4.45:1 (Fail) · on black 4.71:1 (AA)

• primary

  #86528B

  #86528B color page →

  RGB

  rgb(134 82 139)

  HSL

  hsl(295 26% 43%)

  OKLCH

  oklch(0.519 0.106 323.8)

  WCAG contrast: on white 5.84:1 (AA) · on black 3.59:1 (Fail)

• accent

  #825100

  #825100 color page →

  RGB

  rgb(130 81 0)

  HSL

  hsl(37 100% 25%)

  OKLCH

  oklch(0.479 0.104 69.9)

  WCAG contrast: on white 6.71:1 (AA) · on black 3.12:1 (Fail)

• text

  #040F0E

  #040F0E color page →

  RGB

  rgb(4 15 14)

  HSL

  hsl(175 58% 4%)

  OKLCH

  oklch(0.156 0.018 188.8)

  WCAG contrast: on white 19.44:1 (AAA) · on black 1.07:1 (Fail)

Export Steady Prunella Canvas: CSS variables, Tailwind & JSON

:root {
  --bg: #d1eaeb;
  --surface: #008492;
  --primary: #86528b;
  --accent: #825100;
  --text: #040f0e;
}

@theme {
  --color-bg: #d1eaeb;
  --color-surface: #008492;
  --color-primary: #86528b;
  --color-accent: #825100;
  --color-text: #040f0e;
}

{
  "steady-prunella-canvas-2fj": {
    "bg": {
      "$type": "color",
      "$value": "#d1eaeb"
    },
    "surface": {
      "$type": "color",
      "$value": "#008492"
    },
    "primary": {
      "$type": "color",
      "$value": "#86528b"
    },
    "accent": {
      "$type": "color",
      "$value": "#825100"
    },
    "text": {
      "$type": "color",
      "$value": "#040f0e"
    }
  }
}