Plum Highness Nexus palette

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

• bg

  #F3EAF0

  #F3EAF0 color page →

  RGB

  rgb(243 234 240)

  HSL

  hsl(320 27% 94%)

  OKLCH

  oklch(0.946 0.012 337.5)

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

• surface

  #8A577A

  #8A577A color page →

  RGB

  rgb(138 87 122)

  HSL

  hsl(319 23% 44%)

  OKLCH

  oklch(0.525 0.083 339.3)

  WCAG contrast: on white 5.63:1 (AA) · on black 3.72:1 (Fail)

• primary

  #716938

  #716938 color page →

  RGB

  rgb(113 105 56)

  HSL

  hsl(52 34% 33%)

  OKLCH

  oklch(0.517 0.069 100.2)

  WCAG contrast: on white 5.55:1 (AA) · on black 3.77:1 (Fail)

• accent

  #2A7085

  #2A7085 color page →

  RGB

  rgb(42 112 133)

  HSL

  hsl(194 52% 34%)

  OKLCH

  oklch(0.51 0.076 221.2)

  WCAG contrast: on white 5.59:1 (AA) · on black 3.75:1 (Fail)

• text

  #1B0F16

  #1B0F16 color page →

  RGB

  rgb(27 15 22)

  HSL

  hsl(325 29% 8%)

  OKLCH

  oklch(0.188 0.024 343.8)

  WCAG contrast: on white 18.64:1 (AAA) · on black 1.12:1 (Fail)

Export Plum Highness Nexus: CSS variables, Tailwind & JSON

:root {
  --bg: #f3eaf0;
  --surface: #8a577a;
  --primary: #716938;
  --accent: #2a7085;
  --text: #1b0f16;
}

@theme {
  --color-bg: #f3eaf0;
  --color-surface: #8a577a;
  --color-primary: #716938;
  --color-accent: #2a7085;
  --color-text: #1b0f16;
}

{
  "plum-highness-nexus-1zy": {
    "bg": {
      "$type": "color",
      "$value": "#f3eaf0"
    },
    "surface": {
      "$type": "color",
      "$value": "#8a577a"
    },
    "primary": {
      "$type": "color",
      "$value": "#716938"
    },
    "accent": {
      "$type": "color",
      "$value": "#2a7085"
    },
    "text": {
      "$type": "color",
      "$value": "#1b0f16"
    }
  }
}