Atomic Voluptuous Violet Atelier palette

Colors in Atomic Voluptuous Violet Atelier: HEX, RGB, HSL & OKLCH

• bg

  #F3E9FF

  #F3E9FF color page →

  RGB

  rgb(243 233 255)

  HSL

  hsl(267 100% 96%)

  OKLCH

  oklch(0.948 0.031 306.2)

  WCAG contrast: on white 1.17:1 (Fail) · on black 17.91:1 (AAA)

• surface

  #AC94F5

  #AC94F5 color page →

  RGB

  rgb(172 148 245)

  HSL

  hsl(255 83% 77%)

  OKLCH

  oklch(0.727 0.139 294)

  WCAG contrast: on white 2.52:1 (Fail) · on black 8.30:1 (AAA)

• primary

  #741EC5

  #741EC5 color page →

  RGB

  rgb(116 30 197)

  HSL

  hsl(271 74% 45%)

  OKLCH

  oklch(0.473 0.23 300.3)

  WCAG contrast: on white 7.67:1 (AAA) · on black 2.73:1 (Fail)

• accent

  #4E2679

  #4E2679 color page →

  RGB

  rgb(78 38 121)

  HSL

  hsl(269 52% 31%)

  OKLCH

  oklch(0.368 0.136 302.3)

  WCAG contrast: on white 11.18:1 (AAA) · on black 1.87:1 (Fail)

• text

  #1E1827

  #1E1827 color page →

  RGB

  rgb(30 24 39)

  HSL

  hsl(264 24% 12%)

  OKLCH

  oklch(0.223 0.03 302.4)

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

Export Atomic Voluptuous Violet Atelier: CSS variables, Tailwind & JSON

:root {
  --bg: #f3e9ff;
  --surface: #ac94f5;
  --primary: #741ec5;
  --accent: #4e2679;
  --text: #1e1827;
}

@theme {
  --color-bg: #f3e9ff;
  --color-surface: #ac94f5;
  --color-primary: #741ec5;
  --color-accent: #4e2679;
  --color-text: #1e1827;
}

{
  "atomic-voluptuous-violet-atelier-3jl": {
    "bg": {
      "$type": "color",
      "$value": "#f3e9ff"
    },
    "surface": {
      "$type": "color",
      "$value": "#ac94f5"
    },
    "primary": {
      "$type": "color",
      "$value": "#741ec5"
    },
    "accent": {
      "$type": "color",
      "$value": "#4e2679"
    },
    "text": {
      "$type": "color",
      "$value": "#1e1827"
    }
  }
}