Pure Pink Marshmallow Beacon palette

Colors in Pure Pink Marshmallow Beacon: HEX, RGB, HSL & OKLCH

• bg

  #F0ECEF

  #F0ECEF color page →

  RGB

  rgb(240 236 239)

  HSL

  hsl(315 12% 93%)

  OKLCH

  oklch(0.947 0.006 334)

  WCAG contrast: on white 1.16:1 (Fail) · on black 17.94:1 (AAA)

• surface

  #F1D3EE

  #F1D3EE color page →

  RGB

  rgb(241 211 238)

  HSL

  hsl(306 52% 89%)

  OKLCH

  oklch(0.9 0.049 329.2)

  WCAG contrast: on white 1.37:1 (Fail) · on black 15.29:1 (AAA)

• primary

  #F7B8CF

  #F7B8CF color page →

  RGB

  rgb(247 184 207)

  HSL

  hsl(338 80% 85%)

  OKLCH

  oklch(0.847 0.078 355.2)

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

• accent

  #C8B5DE

  #C8B5DE color page →

  RGB

  rgb(200 181 222)

  HSL

  hsl(268 38% 79%)

  OKLCH

  oklch(0.802 0.061 306)

  WCAG contrast: on white 1.88:1 (Fail) · on black 11.12:1 (AAA)

• text

  #422F3F

  #422F3F color page →

  RGB

  rgb(66 47 63)

  HSL

  hsl(309 17% 22%)

  OKLCH

  oklch(0.333 0.038 331.9)

  WCAG contrast: on white 12.28:1 (AAA) · on black 1.71:1 (Fail)

Export Pure Pink Marshmallow Beacon: CSS variables, Tailwind & JSON

:root {
  --bg: #f0ecef;
  --surface: #f1d3ee;
  --primary: #f7b8cf;
  --accent: #c8b5de;
  --text: #422f3f;
}

@theme {
  --color-bg: #f0ecef;
  --color-surface: #f1d3ee;
  --color-primary: #f7b8cf;
  --color-accent: #c8b5de;
  --color-text: #422f3f;
}

{
  "pure-pink-marshmallow-beacon-24i": {
    "bg": {
      "$type": "color",
      "$value": "#f0ecef"
    },
    "surface": {
      "$type": "color",
      "$value": "#f1d3ee"
    },
    "primary": {
      "$type": "color",
      "$value": "#f7b8cf"
    },
    "accent": {
      "$type": "color",
      "$value": "#c8b5de"
    },
    "text": {
      "$type": "color",
      "$value": "#422f3f"
    }
  }
}