Sunshone Plum Circuit palette

Colors in Sunshone Plum Circuit: HEX, RGB, HSL & OKLCH

• bg

  #120713

  #120713 color page →

  RGB

  rgb(18 7 19)

  HSL

  hsl(295 46% 5%)

  OKLCH

  oklch(0.152 0.031 324)

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

• surface

  #4A2A56

  #4A2A56 color page →

  RGB

  rgb(74 42 86)

  HSL

  hsl(284 34% 25%)

  OKLCH

  oklch(0.345 0.083 316.2)

  WCAG contrast: on white 11.95:1 (AAA) · on black 1.75:1 (Fail)

• primary

  #8E6898

  #8E6898 color page →

  RGB

  rgb(142 104 152)

  HSL

  hsl(288 19% 50%)

  OKLCH

  oklch(0.573 0.084 319.1)

  WCAG contrast: on white 4.58:1 (AA) · on black 4.58:1 (AA)

• accent

  #C9AAD5

  #C9AAD5 color page →

  RGB

  rgb(201 170 213)

  HSL

  hsl(283 34% 75%)

  OKLCH

  oklch(0.779 0.069 316.5)

  WCAG contrast: on white 2.05:1 (Fail) · on black 10.19:1 (AAA)

• text

  #FDF4FF

  #FDF4FF color page →

  RGB

  rgb(253 244 255)

  HSL

  hsl(289 100% 98%)

  OKLCH

  oklch(0.977 0.017 320.1)

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

Export Sunshone Plum Circuit: CSS variables, Tailwind & JSON

:root {
  --bg: #120713;
  --surface: #4a2a56;
  --primary: #8e6898;
  --accent: #c9aad5;
  --text: #fdf4ff;
}

@theme {
  --color-bg: #120713;
  --color-surface: #4a2a56;
  --color-primary: #8e6898;
  --color-accent: #c9aad5;
  --color-text: #fdf4ff;
}

{
  "sunshone-plum-circuit-2tu": {
    "bg": {
      "$type": "color",
      "$value": "#120713"
    },
    "surface": {
      "$type": "color",
      "$value": "#4a2a56"
    },
    "primary": {
      "$type": "color",
      "$value": "#8e6898"
    },
    "accent": {
      "$type": "color",
      "$value": "#c9aad5"
    },
    "text": {
      "$type": "color",
      "$value": "#fdf4ff"
    }
  }
}