Vicious Violet Meadow palette

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

• bg

  #F4E5FF

  #F4E5FF color page →

  RGB

  rgb(244 229 255)

  HSL

  hsl(275 100% 95%)

  OKLCH

  oklch(0.942 0.038 311.1)

  WCAG contrast: on white 1.20:1 (Fail) · on black 17.49:1 (AAA)

• surface

  #C398EB

  #C398EB color page →

  RGB

  rgb(195 152 235)

  HSL

  hsl(271 67% 76%)

  OKLCH

  oklch(0.75 0.124 307.4)

  WCAG contrast: on white 2.33:1 (Fail) · on black 9.01:1 (AAA)

• primary

  #9048A7

  #9048A7 color page →

  RGB

  rgb(144 72 167)

  HSL

  hsl(285 40% 47%)

  OKLCH

  oklch(0.53 0.159 317.3)

  WCAG contrast: on white 5.72:1 (AA) · on black 3.67:1 (Fail)

• accent

  #582465

  #582465 color page →

  RGB

  rgb(88 36 101)

  HSL

  hsl(288 47% 27%)

  OKLCH

  oklch(0.365 0.119 319.1)

  WCAG contrast: on white 11.31:1 (AAA) · on black 1.85:1 (Fail)

• text

  #120417

  #120417 color page →

  RGB

  rgb(18 4 23)

  HSL

  hsl(284 70% 5%)

  OKLCH

  oklch(0.146 0.047 317.2)

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

Export Vicious Violet Meadow: CSS variables, Tailwind & JSON

:root {
  --bg: #f4e5ff;
  --surface: #c398eb;
  --primary: #9048a7;
  --accent: #582465;
  --text: #120417;
}

@theme {
  --color-bg: #f4e5ff;
  --color-surface: #c398eb;
  --color-primary: #9048a7;
  --color-accent: #582465;
  --color-text: #120417;
}

{
  "vicious-violet-meadow-1qw": {
    "bg": {
      "$type": "color",
      "$value": "#f4e5ff"
    },
    "surface": {
      "$type": "color",
      "$value": "#c398eb"
    },
    "primary": {
      "$type": "color",
      "$value": "#9048a7"
    },
    "accent": {
      "$type": "color",
      "$value": "#582465"
    },
    "text": {
      "$type": "color",
      "$value": "#120417"
    }
  }
}