Muted Purple Tide palette

Colors in Muted Purple Tide: HEX, RGB, HSL & OKLCH

• bg

  #FEECFF

  #FEECFF color page →

  RGB

  rgb(254 236 255)

  HSL

  hsl(297 100% 96%)

  OKLCH

  oklch(0.963 0.032 324.2)

  WCAG contrast: on white 1.12:1 (Fail) · on black 18.65:1 (AAA)

• surface

  #C2A1C8

  #C2A1C8 color page →

  RGB

  rgb(194 161 200)

  HSL

  hsl(291 26% 71%)

  OKLCH

  oklch(0.751 0.066 321.1)

  WCAG contrast: on white 2.27:1 (Fail) · on black 9.22:1 (AAA)

• primary

  #82578B

  #82578B color page →

  RGB

  rgb(130 87 139)

  HSL

  hsl(290 23% 44%)

  OKLCH

  oklch(0.523 0.094 320.5)

  WCAG contrast: on white 5.69:1 (AA) · on black 3.68:1 (Fail)

• accent

  #4B344E

  #4B344E color page →

  RGB

  rgb(75 52 78)

  HSL

  hsl(293 20% 25%)

  OKLCH

  oklch(0.362 0.053 322.6)

  WCAG contrast: on white 11.05:1 (AAA) · on black 1.90:1 (Fail)

• text

  #160E18

  #160E18 color page →

  RGB

  rgb(22 14 24)

  HSL

  hsl(288 26% 7%)

  OKLCH

  oklch(0.179 0.024 319.5)

  WCAG contrast: on white 18.91:1 (AAA) · on black 1.11:1 (Fail)

Export Muted Purple Tide: CSS variables, Tailwind & JSON

:root {
  --bg: #feecff;
  --surface: #c2a1c8;
  --primary: #82578b;
  --accent: #4b344e;
  --text: #160e18;
}

@theme {
  --color-bg: #feecff;
  --color-surface: #c2a1c8;
  --color-primary: #82578b;
  --color-accent: #4b344e;
  --color-text: #160e18;
}

{
  "muted-purple-tide-1j2": {
    "bg": {
      "$type": "color",
      "$value": "#feecff"
    },
    "surface": {
      "$type": "color",
      "$value": "#c2a1c8"
    },
    "primary": {
      "$type": "color",
      "$value": "#82578b"
    },
    "accent": {
      "$type": "color",
      "$value": "#4b344e"
    },
    "text": {
      "$type": "color",
      "$value": "#160e18"
    }
  }
}