Steady Lavish Spending Delta palette

Colors in Steady Lavish Spending Delta: HEX, RGB, HSL & OKLCH

• bg

  #F5F3FF

  #F5F3FF color page →

  RGB

  rgb(245 243 255)

  HSL

  hsl(250 100% 98%)

  OKLCH

  oklch(0.969 0.016 293.8)

  WCAG contrast: on white 1.09:1 (Fail) · on black 19.14:1 (AAA)

• surface

  #B6A0FC

  #B6A0FC color page →

  RGB

  rgb(182 160 252)

  HSL

  hsl(254 94% 81%)

  OKLCH

  oklch(0.76 0.131 294)

  WCAG contrast: on white 2.22:1 (Fail) · on black 9.42:1 (AAA)

• primary

  #7F5ECC

  #7F5ECC color page →

  RGB

  rgb(127 94 204)

  HSL

  hsl(258 52% 58%)

  OKLCH

  oklch(0.568 0.164 294.4)

  WCAG contrast: on white 4.79:1 (AA) · on black 4.37:1 (Fail)

• accent

  #3B1E6C

  #3B1E6C color page →

  RGB

  rgb(59 30 108)

  HSL

  hsl(262 57% 27%)

  OKLCH

  oklch(0.323 0.128 295.4)

  WCAG contrast: on white 13.22:1 (AAA) · on black 1.58:1 (Fail)

• text

  #100519

  #100519 color page →

  RGB

  rgb(16 5 25)

  HSL

  hsl(273 67% 6%)

  OKLCH

  oklch(0.148 0.046 308.2)

  WCAG contrast: on white 19.85:1 (AAA) · on black 1.05:1 (Fail)

Export Steady Lavish Spending Delta: CSS variables, Tailwind & JSON

:root {
  --bg: #f5f3ff;
  --surface: #b6a0fc;
  --primary: #7f5ecc;
  --accent: #3b1e6c;
  --text: #100519;
}

@theme {
  --color-bg: #f5f3ff;
  --color-surface: #b6a0fc;
  --color-primary: #7f5ecc;
  --color-accent: #3b1e6c;
  --color-text: #100519;
}

{
  "steady-lavish-spending-delta-1rr": {
    "bg": {
      "$type": "color",
      "$value": "#f5f3ff"
    },
    "surface": {
      "$type": "color",
      "$value": "#b6a0fc"
    },
    "primary": {
      "$type": "color",
      "$value": "#7f5ecc"
    },
    "accent": {
      "$type": "color",
      "$value": "#3b1e6c"
    },
    "text": {
      "$type": "color",
      "$value": "#100519"
    }
  }
}