Vicious Violet Fog palette

Colors in Vicious Violet Fog: HEX, RGB, HSL & OKLCH

• bg

  #ECE7EE

  #ECE7EE color page →

  RGB

  rgb(236 231 238)

  HSL

  hsl(283 17% 92%)

  OKLCH

  oklch(0.934 0.011 316.5)

  WCAG contrast: on white 1.21:1 (Fail) · on black 17.23:1 (AAA)

• surface

  #B48FD3

  #B48FD3 color page →

  RGB

  rgb(180 143 211)

  HSL

  hsl(273 44% 69%)

  OKLCH

  oklch(0.709 0.105 308.8)

  WCAG contrast: on white 2.68:1 (Fail) · on black 7.81:1 (AAA)

• primary

  #994A9E

  #994A9E color page →

  RGB

  rgb(153 74 158)

  HSL

  hsl(296 36% 45%)

  OKLCH

  oklch(0.54 0.151 325.1)

  WCAG contrast: on white 5.48:1 (AA) · on black 3.82:1 (Fail)

• accent

  #592348

  #592348 color page →

  RGB

  rgb(89 35 72)

  HSL

  hsl(319 44% 24%)

  OKLCH

  oklch(0.348 0.093 341.4)

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

• text

  #170817

  #170817 color page →

  RGB

  rgb(23 8 23)

  HSL

  hsl(300 48% 6%)

  OKLCH

  oklch(0.166 0.038 327.1)

  WCAG contrast: on white 19.38:1 (AAA) · on black 1.08:1 (Fail)

Export Vicious Violet Fog: CSS variables, Tailwind & JSON

:root {
  --bg: #ece7ee;
  --surface: #b48fd3;
  --primary: #994a9e;
  --accent: #592348;
  --text: #170817;
}

@theme {
  --color-bg: #ece7ee;
  --color-surface: #b48fd3;
  --color-primary: #994a9e;
  --color-accent: #592348;
  --color-text: #170817;
}

{
  "vicious-violet-fog-5cl": {
    "bg": {
      "$type": "color",
      "$value": "#ece7ee"
    },
    "surface": {
      "$type": "color",
      "$value": "#b48fd3"
    },
    "primary": {
      "$type": "color",
      "$value": "#994a9e"
    },
    "accent": {
      "$type": "color",
      "$value": "#592348"
    },
    "text": {
      "$type": "color",
      "$value": "#170817"
    }
  }
}