Muted Royal Nightcore Beacon palette

Colors in Muted Royal Nightcore Beacon: HEX, RGB, HSL & OKLCH

• bg

  #100721

  #100721 color page →

  RGB

  rgb(16 7 33)

  HSL

  hsl(261 65% 8%)

  OKLCH

  oklch(0.16 0.053 296.2)

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

• surface

  #37226E

  #37226E color page →

  RGB

  rgb(55 34 110)

  HSL

  hsl(257 53% 28%)

  OKLCH

  oklch(0.327 0.125 290.5)

  WCAG contrast: on white 12.99:1 (AAA) · on black 1.61:1 (Fail)

• muted

  #4B37BC

  #4B37BC color page →

  RGB

  rgb(75 55 188)

  HSL

  hsl(249 55% 48%)

  OKLCH

  oklch(0.448 0.197 281.8)

  WCAG contrast: on white 8.16:1 (AAA) · on black 2.57:1 (Fail)

• primary

  #7878FB

  #7878FB color page →

  RGB

  rgb(120 120 251)

  HSL

  hsl(240 94% 73%)

  OKLCH

  oklch(0.639 0.19 279.6)

  WCAG contrast: on white 3.57:1 (Fail) · on black 5.87:1 (AA)

• accent

  #AFB4FF

  #AFB4FF color page →

  RGB

  rgb(175 180 255)

  HSL

  hsl(236 100% 84%)

  OKLCH

  oklch(0.794 0.106 280.7)

  WCAG contrast: on white 1.94:1 (Fail) · on black 10.79:1 (AAA)

• text

  #E8F5FF

  #E8F5FF color page →

  RGB

  rgb(232 245 255)

  HSL

  hsl(206 100% 95%)

  OKLCH

  oklch(0.963 0.019 240.7)

  WCAG contrast: on white 1.10:1 (Fail) · on black 18.93:1 (AAA)

Export Muted Royal Nightcore Beacon: CSS variables, Tailwind & JSON

:root {
  --bg: #100721;
  --surface: #37226e;
  --muted: #4b37bc;
  --primary: #7878fb;
  --accent: #afb4ff;
  --text: #e8f5ff;
}

@theme {
  --color-bg: #100721;
  --color-surface: #37226e;
  --color-muted: #4b37bc;
  --color-primary: #7878fb;
  --color-accent: #afb4ff;
  --color-text: #e8f5ff;
}

{
  "muted-royal-nightcore-beacon-2tk": {
    "bg": {
      "$type": "color",
      "$value": "#100721"
    },
    "surface": {
      "$type": "color",
      "$value": "#37226e"
    },
    "muted": {
      "$type": "color",
      "$value": "#4b37bc"
    },
    "primary": {
      "$type": "color",
      "$value": "#7878fb"
    },
    "accent": {
      "$type": "color",
      "$value": "#afb4ff"
    },
    "text": {
      "$type": "color",
      "$value": "#e8f5ff"
    }
  }
}