Pure Royal Lavender Drift palette

Colors in Pure Royal Lavender Drift: HEX, RGB, HSL & OKLCH

• bg

  #F6F6FF

  #F6F6FF color page →

  RGB

  rgb(246 246 255)

  HSL

  hsl(240 100% 98%)

  OKLCH

  oklch(0.976 0.012 286.2)

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

• surface

  #B897DC

  #B897DC color page →

  RGB

  rgb(184 151 220)

  HSL

  hsl(269 50% 73%)

  OKLCH

  oklch(0.731 0.104 305.9)

  WCAG contrast: on white 2.47:1 (Fail) · on black 8.49:1 (AAA)

• primary

  #8452B6

  #8452B6 color page →

  RGB

  rgb(132 82 182)

  HSL

  hsl(270 41% 52%)

  OKLCH

  oklch(0.54 0.156 304.8)

  WCAG contrast: on white 5.43:1 (AA) · on black 3.86:1 (Fail)

• accent

  #49256A

  #49256A color page →

  RGB

  rgb(73 37 106)

  HSL

  hsl(271 48% 28%)

  OKLCH

  oklch(0.349 0.117 305.1)

  WCAG contrast: on white 11.95:1 (AAA) · on black 1.75:1 (Fail)

• text

  #0A050F

  #0A050F color page →

  RGB

  rgb(10 5 15)

  HSL

  hsl(270 50% 4%)

  OKLCH

  oklch(0.13 0.026 308.4)

  WCAG contrast: on white 20.16:1 (AAA) · on black 1.04:1 (Fail)

Export Pure Royal Lavender Drift: CSS variables, Tailwind & JSON

:root {
  --bg: #f6f6ff;
  --surface: #b897dc;
  --primary: #8452b6;
  --accent: #49256a;
  --text: #0a050f;
}

@theme {
  --color-bg: #f6f6ff;
  --color-surface: #b897dc;
  --color-primary: #8452b6;
  --color-accent: #49256a;
  --color-text: #0a050f;
}

{
  "pure-royal-lavender-drift-ml": {
    "bg": {
      "$type": "color",
      "$value": "#f6f6ff"
    },
    "surface": {
      "$type": "color",
      "$value": "#b897dc"
    },
    "primary": {
      "$type": "color",
      "$value": "#8452b6"
    },
    "accent": {
      "$type": "color",
      "$value": "#49256a"
    },
    "text": {
      "$type": "color",
      "$value": "#0a050f"
    }
  }
}