Steady Vicious Violet Bloom palette

Colors in Steady Vicious Violet Bloom: HEX, RGB, HSL & OKLCH

• bg

  #F3F1F3

  #F3F1F3 color page →

  RGB

  rgb(243 241 243)

  HSL

  hsl(300 8% 95%)

  OKLCH

  oklch(0.96 0.003 325.6)

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

• surface

  #9B46A0

  #9B46A0 color page →

  RGB

  rgb(155 70 160)

  HSL

  hsl(297 39% 45%)

  OKLCH

  oklch(0.538 0.161 325.4)

  WCAG contrast: on white 5.55:1 (AA) · on black 3.77:1 (Fail)

• primary

  #3C7524

  #3C7524 color page →

  RGB

  rgb(60 117 36)

  HSL

  hsl(102 53% 30%)

  OKLCH

  oklch(0.505 0.128 137.8)

  WCAG contrast: on white 5.58:1 (AA) · on black 3.76:1 (Fail)

• accent

  #36213A

  #36213A color page →

  RGB

  rgb(54 33 58)

  HSL

  hsl(290 27% 18%)

  OKLCH

  oklch(0.285 0.053 321)

  WCAG contrast: on white 14.62:1 (AAA) · on black 1.43:1 (Fail)

• text

  #0E060F

  #0E060F color page →

  RGB

  rgb(14 6 15)

  HSL

  hsl(293 43% 4%)

  OKLCH

  oklch(0.14 0.025 323.1)

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

Export Steady Vicious Violet Bloom: CSS variables, Tailwind & JSON

:root {
  --bg: #f3f1f3;
  --surface: #9b46a0;
  --primary: #3c7524;
  --accent: #36213a;
  --text: #0e060f;
}

@theme {
  --color-bg: #f3f1f3;
  --color-surface: #9b46a0;
  --color-primary: #3c7524;
  --color-accent: #36213a;
  --color-text: #0e060f;
}

{
  "steady-vicious-violet-bloom-j": {
    "bg": {
      "$type": "color",
      "$value": "#f3f1f3"
    },
    "surface": {
      "$type": "color",
      "$value": "#9b46a0"
    },
    "primary": {
      "$type": "color",
      "$value": "#3c7524"
    },
    "accent": {
      "$type": "color",
      "$value": "#36213a"
    },
    "text": {
      "$type": "color",
      "$value": "#0e060f"
    }
  }
}