Pure Bambino Canvas palette

Colors in Pure Bambino Canvas: HEX, RGB, HSL & OKLCH

• bg

  #ECF0ED

  #ECF0ED color page →

  RGB

  rgb(236 240 237)

  HSL

  hsl(135 12% 93%)

  OKLCH

  oklch(0.951 0.006 153.8)

  WCAG contrast: on white 1.15:1 (Fail) · on black 18.25:1 (AAA)

• surface

  #CFF0D6

  #CFF0D6 color page →

  RGB

  rgb(207 240 214)

  HSL

  hsl(133 52% 88%)

  OKLCH

  oklch(0.924 0.049 151.6)

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

• primary

  #93D6C9

  #93D6C9 color page →

  RGB

  rgb(147 214 201)

  HSL

  hsl(168 45% 71%)

  OKLCH

  oklch(0.828 0.07 181)

  WCAG contrast: on white 1.65:1 (Fail) · on black 12.70:1 (AAA)

• accent

  #B9C8A6

  #B9C8A6 color page →

  RGB

  rgb(185 200 166)

  HSL

  hsl(86 24% 72%)

  OKLCH

  oklch(0.812 0.049 126.9)

  WCAG contrast: on white 1.76:1 (Fail) · on black 11.87:1 (AAA)

• text

  #193727

  #193727 color page →

  RGB

  rgb(25 55 39)

  HSL

  hsl(148 38% 16%)

  OKLCH

  oklch(0.308 0.047 158.7)

  WCAG contrast: on white 12.98:1 (AAA) · on black 1.61:1 (Fail)

Export Pure Bambino Canvas: CSS variables, Tailwind & JSON

:root {
  --bg: #ecf0ed;
  --surface: #cff0d6;
  --primary: #93d6c9;
  --accent: #b9c8a6;
  --text: #193727;
}

@theme {
  --color-bg: #ecf0ed;
  --color-surface: #cff0d6;
  --color-primary: #93d6c9;
  --color-accent: #b9c8a6;
  --color-text: #193727;
}

{
  "pure-bambino-canvas-601": {
    "bg": {
      "$type": "color",
      "$value": "#ecf0ed"
    },
    "surface": {
      "$type": "color",
      "$value": "#cff0d6"
    },
    "primary": {
      "$type": "color",
      "$value": "#93d6c9"
    },
    "accent": {
      "$type": "color",
      "$value": "#b9c8a6"
    },
    "text": {
      "$type": "color",
      "$value": "#193727"
    }
  }
}