Classic Lusty Lavender Brief palette

Colors in Classic Lusty Lavender Brief: HEX, RGB, HSL & OKLCH

• bg

  #F8F7F9

  #F8F7F9 color page →

  RGB

  rgb(248 247 249)

  HSL

  hsl(270 14% 97%)

  OKLCH

  oklch(0.977 0.003 308.4)

  WCAG contrast: on white 1.06:1 (Fail) · on black 19.66:1 (AAA)

• surface

  #F0E2F5

  #F0E2F5 color page →

  RGB

  rgb(240 226 245)

  HSL

  hsl(284 49% 92%)

  OKLCH

  oklch(0.929 0.029 317.2)

  WCAG contrast: on white 1.24:1 (Fail) · on black 16.90:1 (AAA)

• primary

  #965DAD

  #965DAD color page →

  RGB

  rgb(150 93 173)

  HSL

  hsl(283 33% 52%)

  OKLCH

  oklch(0.573 0.133 315.6)

  WCAG contrast: on white 4.70:1 (AA) · on black 4.46:1 (Fail)

• accent

  #703A5A

  #703A5A color page →

  RGB

  rgb(112 58 90)

  HSL

  hsl(324 32% 33%)

  OKLCH

  oklch(0.427 0.087 344.9)

  WCAG contrast: on white 8.60:1 (AAA) · on black 2.44:1 (Fail)

• text

  #1A0C1D

  #1A0C1D color page →

  RGB

  rgb(26 12 29)

  HSL

  hsl(289 41% 8%)

  OKLCH

  oklch(0.183 0.039 320.4)

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

Export Classic Lusty Lavender Brief: CSS variables, Tailwind & JSON

:root {
  --bg: #f8f7f9;
  --surface: #f0e2f5;
  --primary: #965dad;
  --accent: #703a5a;
  --text: #1a0c1d;
}

@theme {
  --color-bg: #f8f7f9;
  --color-surface: #f0e2f5;
  --color-primary: #965dad;
  --color-accent: #703a5a;
  --color-text: #1a0c1d;
}

{
  "classic-lusty-lavender-brief-5x6": {
    "bg": {
      "$type": "color",
      "$value": "#f8f7f9"
    },
    "surface": {
      "$type": "color",
      "$value": "#f0e2f5"
    },
    "primary": {
      "$type": "color",
      "$value": "#965dad"
    },
    "accent": {
      "$type": "color",
      "$value": "#703a5a"
    },
    "text": {
      "$type": "color",
      "$value": "#1a0c1d"
    }
  }
}