Plum Highness Lattice palette

Colors in Plum Highness Lattice: HEX, RGB, HSL & OKLCH

• bg

  #150811

  #150811 color page →

  RGB

  rgb(21 8 17)

  HSL

  hsl(318 45% 6%)

  OKLCH

  oklch(0.159 0.029 339.2)

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

• surface

  #542245

  #542245 color page →

  RGB

  rgb(84 34 69)

  HSL

  hsl(318 42% 23%)

  OKLCH

  oklch(0.337 0.088 340.5)

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

• primary

  #91547C

  #91547C color page →

  RGB

  rgb(145 84 124)

  HSL

  hsl(321 27% 45%)

  OKLCH

  oklch(0.529 0.097 341.2)

  WCAG contrast: on white 5.58:1 (AA) · on black 3.76:1 (Fail)

• accent

  #D59CBA

  #D59CBA color page →

  RGB

  rgb(213 156 186)

  HSL

  hsl(328 40% 72%)

  OKLCH

  oklch(0.756 0.078 346.3)

  WCAG contrast: on white 2.25:1 (Fail) · on black 9.29:1 (AAA)

• text

  #FFF5FB

  #FFF5FB color page →

  RGB

  rgb(255 245 251)

  HSL

  hsl(324 100% 98%)

  OKLCH

  oklch(0.98 0.013 340.5)

  WCAG contrast: on white 1.06:1 (Fail) · on black 19.70:1 (AAA)

Export Plum Highness Lattice: CSS variables, Tailwind & JSON

:root {
  --bg: #150811;
  --surface: #542245;
  --primary: #91547c;
  --accent: #d59cba;
  --text: #fff5fb;
}

@theme {
  --color-bg: #150811;
  --color-surface: #542245;
  --color-primary: #91547c;
  --color-accent: #d59cba;
  --color-text: #fff5fb;
}

{
  "plum-highness-lattice-4mx": {
    "bg": {
      "$type": "color",
      "$value": "#150811"
    },
    "surface": {
      "$type": "color",
      "$value": "#542245"
    },
    "primary": {
      "$type": "color",
      "$value": "#91547c"
    },
    "accent": {
      "$type": "color",
      "$value": "#d59cba"
    },
    "text": {
      "$type": "color",
      "$value": "#fff5fb"
    }
  }
}