Classic Lavendless Horizon palette

Colors in Classic Lavendless Horizon: HEX, RGB, HSL & OKLCH

• bg

  #140914

  #140914 color page →

  RGB

  rgb(20 9 20)

  HSL

  hsl(300 38% 6%)

  OKLCH

  oklch(0.161 0.029 326.8)

  WCAG contrast: on white 19.46:1 (AAA) · on black 1.07:1 (Fail)

• surface

  #46223D

  #46223D color page →

  RGB

  rgb(70 34 61)

  HSL

  hsl(315 35% 20%)

  OKLCH

  oklch(0.312 0.068 337.3)

  WCAG contrast: on white 13.49:1 (AAA) · on black 1.55:1 (Fail)

• muted

  #7B4880

  #7B4880 color page →

  RGB

  rgb(123 72 128)

  HSL

  hsl(295 28% 39%)

  OKLCH

  oklch(0.483 0.105 323.8)

  WCAG contrast: on white 6.81:1 (AA) · on black 3.08:1 (Fail)

• primary

  #AD70B2

  #AD70B2 color page →

  RGB

  rgb(173 112 178)

  HSL

  hsl(295 30% 57%)

  OKLCH

  oklch(0.633 0.118 324.2)

  WCAG contrast: on white 3.66:1 (Fail) · on black 5.73:1 (AA)

• accent

  #DCB5E3

  #DCB5E3 color page →

  RGB

  rgb(220 181 227)

  HSL

  hsl(291 45% 80%)

  OKLCH

  oklch(0.822 0.076 321.2)

  WCAG contrast: on white 1.78:1 (Fail) · on black 11.76:1 (AAA)

• text

  #FFF0FF

  #FFF0FF color page →

  RGB

  rgb(255 240 255)

  HSL

  hsl(300 100% 97%)

  OKLCH

  oklch(0.971 0.025 325.8)

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

Export Classic Lavendless Horizon: CSS variables, Tailwind & JSON

:root {
  --bg: #140914;
  --surface: #46223d;
  --muted: #7b4880;
  --primary: #ad70b2;
  --accent: #dcb5e3;
  --text: #fff0ff;
}

@theme {
  --color-bg: #140914;
  --color-surface: #46223d;
  --color-muted: #7b4880;
  --color-primary: #ad70b2;
  --color-accent: #dcb5e3;
  --color-text: #fff0ff;
}

{
  "classic-lavendless-horizon-191": {
    "bg": {
      "$type": "color",
      "$value": "#140914"
    },
    "surface": {
      "$type": "color",
      "$value": "#46223d"
    },
    "muted": {
      "$type": "color",
      "$value": "#7b4880"
    },
    "primary": {
      "$type": "color",
      "$value": "#ad70b2"
    },
    "accent": {
      "$type": "color",
      "$value": "#dcb5e3"
    },
    "text": {
      "$type": "color",
      "$value": "#fff0ff"
    }
  }
}