True Cherry Bomb Garden palette

Colors in True Cherry Bomb Garden: HEX, RGB, HSL & OKLCH

• bg

  #DDF5F8

  #DDF5F8 color page →

  RGB

  rgb(221 245 248)

  HSL

  hsl(187 66% 92%)

  OKLCH

  oklch(0.954 0.025 205.8)

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

• surface

  #0098A6

  #0098A6 color page →

  RGB

  rgb(0 152 166)

  HSL

  hsl(185 100% 33%)

  OKLCH

  oklch(0.621 0.106 206.3)

  WCAG contrast: on white 3.47:1 (Fail) · on black 6.04:1 (AA)

• primary

  #B63539

  #B63539 color page →

  RGB

  rgb(182 53 57)

  HSL

  hsl(358 55% 46%)

  OKLCH

  oklch(0.524 0.165 23.3)

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

• accent

  #00373E

  #00373E color page →

  RGB

  rgb(0 55 62)

  HSL

  hsl(187 100% 12%)

  OKLCH

  oklch(0.308 0.053 208.6)

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

• text

  #010E10

  #010E10 color page →

  RGB

  rgb(1 14 16)

  HSL

  hsl(188 88% 3%)

  OKLCH

  oklch(0.151 0.023 205.6)

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

Export True Cherry Bomb Garden: CSS variables, Tailwind & JSON

:root {
  --bg: #ddf5f8;
  --surface: #0098a6;
  --primary: #b63539;
  --accent: #00373e;
  --text: #010e10;
}

@theme {
  --color-bg: #ddf5f8;
  --color-surface: #0098a6;
  --color-primary: #b63539;
  --color-accent: #00373e;
  --color-text: #010e10;
}

{
  "true-cherry-bomb-garden-2bp": {
    "bg": {
      "$type": "color",
      "$value": "#ddf5f8"
    },
    "surface": {
      "$type": "color",
      "$value": "#0098a6"
    },
    "primary": {
      "$type": "color",
      "$value": "#b63539"
    },
    "accent": {
      "$type": "color",
      "$value": "#00373e"
    },
    "text": {
      "$type": "color",
      "$value": "#010e10"
    }
  }
}