Pure Beefy Pink Circuit palette

Colors in Pure Beefy Pink Circuit: HEX, RGB, HSL & OKLCH

• bg

  #F5F4FF

  #F5F4FF color page →

  RGB

  rgb(245 244 255)

  HSL

  hsl(245 100% 98%)

  OKLCH

  oklch(0.971 0.015 290.3)

  WCAG contrast: on white 1.08:1 (Fail) · on black 19.26:1 (AAA)

• surface

  #E1DCFE

  #E1DCFE color page →

  RGB

  rgb(225 220 254)

  HSL

  hsl(249 94% 93%)

  OKLCH

  oklch(0.909 0.046 292.2)

  WCAG contrast: on white 1.32:1 (Fail) · on black 15.86:1 (AAA)

• primary

  #DDBAE6

  #DDBAE6 color page →

  RGB

  rgb(221 186 230)

  HSL

  hsl(288 47% 82%)

  OKLCH

  oklch(0.833 0.071 319.3)

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

• accent

  #ACBBDC

  #ACBBDC color page →

  RGB

  rgb(172 187 220)

  HSL

  hsl(221 41% 77%)

  OKLCH

  oklch(0.791 0.05 265.9)

  WCAG contrast: on white 1.92:1 (Fail) · on black 10.89:1 (AAA)

• text

  #383645

  #383645 color page →

  RGB

  rgb(56 54 69)

  HSL

  hsl(248 12% 24%)

  OKLCH

  oklch(0.341 0.026 291.1)

  WCAG contrast: on white 11.78:1 (AAA) · on black 1.78:1 (Fail)

Export Pure Beefy Pink Circuit: CSS variables, Tailwind & JSON

:root {
  --bg: #f5f4ff;
  --surface: #e1dcfe;
  --primary: #ddbae6;
  --accent: #acbbdc;
  --text: #383645;
}

@theme {
  --color-bg: #f5f4ff;
  --color-surface: #e1dcfe;
  --color-primary: #ddbae6;
  --color-accent: #acbbdc;
  --color-text: #383645;
}

{
  "pure-beefy-pink-circuit-6el": {
    "bg": {
      "$type": "color",
      "$value": "#f5f4ff"
    },
    "surface": {
      "$type": "color",
      "$value": "#e1dcfe"
    },
    "primary": {
      "$type": "color",
      "$value": "#ddbae6"
    },
    "accent": {
      "$type": "color",
      "$value": "#acbbdc"
    },
    "text": {
      "$type": "color",
      "$value": "#383645"
    }
  }
}