Classic Simply Purple Ember palette

Colors in Classic Simply Purple Ember: HEX, RGB, HSL & OKLCH

• bg

  #07060E

  #07060E color page →

  RGB

  rgb(7 6 14)

  HSL

  hsl(248 40% 4%)

  OKLCH

  oklch(0.129 0.019 290.3)

  WCAG contrast: on white 20.16:1 (AAA) · on black 1.04:1 (Fail)

• surface

  #1A182B

  #1A182B color page →

  RGB

  rgb(26 24 43)

  HSL

  hsl(246 28% 13%)

  OKLCH

  oklch(0.221 0.037 287.8)

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

• primary

  #7161C1

  #7161C1 color page →

  RGB

  rgb(113 97 193)

  HSL

  hsl(250 44% 57%)

  OKLCH

  oklch(0.554 0.145 288.4)

  WCAG contrast: on white 5.02:1 (AA) · on black 4.18:1 (Fail)

• accent

  #BA9EC4

  #BA9EC4 color page →

  RGB

  rgb(186 158 196)

  HSL

  hsl(284 24% 69%)

  OKLCH

  oklch(0.736 0.062 317.1)

  WCAG contrast: on white 2.39:1 (Fail) · on black 8.77:1 (AAA)

• text

  #E9E8ED

  #E9E8ED color page →

  RGB

  rgb(233 232 237)

  HSL

  hsl(252 12% 92%)

  OKLCH

  oklch(0.933 0.007 295.4)

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

Export Classic Simply Purple Ember: CSS variables, Tailwind & JSON

:root {
  --bg: #07060e;
  --surface: #1a182b;
  --primary: #7161c1;
  --accent: #ba9ec4;
  --text: #e9e8ed;
}

@theme {
  --color-bg: #07060e;
  --color-surface: #1a182b;
  --color-primary: #7161c1;
  --color-accent: #ba9ec4;
  --color-text: #e9e8ed;
}

{
  "classic-simply-purple-ember-4g4": {
    "bg": {
      "$type": "color",
      "$value": "#07060e"
    },
    "surface": {
      "$type": "color",
      "$value": "#1a182b"
    },
    "primary": {
      "$type": "color",
      "$value": "#7161c1"
    },
    "accent": {
      "$type": "color",
      "$value": "#ba9ec4"
    },
    "text": {
      "$type": "color",
      "$value": "#e9e8ed"
    }
  }
}