True Vicious Violet Bloom palette

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

• bg

  #09050A

  #09050A color page →

  RGB

  rgb(9 5 10)

  HSL

  hsl(288 33% 3%)

  OKLCH

  oklch(0.125 0.016 320.5)

  WCAG contrast: on white 20.23:1 (AAA) · on black 1.03:1 (Fail)

• surface

  #4D2551

  #4D2551 color page →

  RGB

  rgb(77 37 81)

  HSL

  hsl(295 37% 23%)

  OKLCH

  oklch(0.338 0.089 323.8)

  WCAG contrast: on white 12.36:1 (AAA) · on black 1.69:1 (Fail)

• primary

  #855494

  #855494 color page →

  RGB

  rgb(133 84 148)

  HSL

  hsl(286 28% 45%)

  OKLCH

  oklch(0.526 0.112 318)

  WCAG contrast: on white 5.68:1 (AA) · on black 3.69:1 (Fail)

• accent

  #C196D3

  #C196D3 color page →

  RGB

  rgb(193 150 211)

  HSL

  hsl(282 41% 71%)

  OKLCH

  oklch(0.734 0.098 315.7)

  WCAG contrast: on white 2.45:1 (Fail) · on black 8.57:1 (AAA)

• text

  #FEF1FF

  #FEF1FF color page →

  RGB

  rgb(254 241 255)

  HSL

  hsl(296 100% 97%)

  OKLCH

  oklch(0.972 0.023 323.6)

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

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

:root {
  --bg: #09050a;
  --surface: #4d2551;
  --primary: #855494;
  --accent: #c196d3;
  --text: #fef1ff;
}

@theme {
  --color-bg: #09050a;
  --color-surface: #4d2551;
  --color-primary: #855494;
  --color-accent: #c196d3;
  --color-text: #fef1ff;
}

{
  "true-vicious-violet-bloom-5y": {
    "bg": {
      "$type": "color",
      "$value": "#09050a"
    },
    "surface": {
      "$type": "color",
      "$value": "#4d2551"
    },
    "primary": {
      "$type": "color",
      "$value": "#855494"
    },
    "accent": {
      "$type": "color",
      "$value": "#c196d3"
    },
    "text": {
      "$type": "color",
      "$value": "#fef1ff"
    }
  }
}