Moonraker System palette

Colors in Moonraker System: HEX, RGB, HSL & OKLCH

• bg

  #F8F5F7

  #F8F5F7 color page →

  RGB

  rgb(248 245 247)

  HSL

  hsl(320 18% 97%)

  OKLCH

  oklch(0.973 0.004 337.4)

  WCAG contrast: on white 1.08:1 (Fail) · on black 19.39:1 (AAA)

• surface

  #FADAF9

  #FADAF9 color page →

  RGB

  rgb(250 218 249)

  HSL

  hsl(302 76% 92%)

  OKLCH

  oklch(0.924 0.054 327)

  WCAG contrast: on white 1.27:1 (Fail) · on black 16.46:1 (AAA)

• primary

  #E4B6C9

  #E4B6C9 color page →

  RGB

  rgb(228 182 201)

  HSL

  hsl(335 46% 80%)

  OKLCH

  oklch(0.823 0.058 351.8)

  WCAG contrast: on white 1.77:1 (Fail) · on black 11.83:1 (AAA)

• accent

  #C5B0DF

  #C5B0DF color page →

  RGB

  rgb(197 176 223)

  HSL

  hsl(267 42% 78%)

  OKLCH

  oklch(0.791 0.069 305.2)

  WCAG contrast: on white 1.97:1 (Fail) · on black 10.64:1 (AAA)

• text

  #3F2A3C

  #3F2A3C color page →

  RGB

  rgb(63 42 60)

  HSL

  hsl(309 20% 21%)

  OKLCH

  oklch(0.317 0.043 331.6)

  WCAG contrast: on white 13.06:1 (AAA) · on black 1.60:1 (Fail)

Export Moonraker System: CSS variables, Tailwind & JSON

:root {
  --bg: #f8f5f7;
  --surface: #fadaf9;
  --primary: #e4b6c9;
  --accent: #c5b0df;
  --text: #3f2a3c;
}

@theme {
  --color-bg: #f8f5f7;
  --color-surface: #fadaf9;
  --color-primary: #e4b6c9;
  --color-accent: #c5b0df;
  --color-text: #3f2a3c;
}

{
  "moonraker-system-6zb": {
    "bg": {
      "$type": "color",
      "$value": "#f8f5f7"
    },
    "surface": {
      "$type": "color",
      "$value": "#fadaf9"
    },
    "primary": {
      "$type": "color",
      "$value": "#e4b6c9"
    },
    "accent": {
      "$type": "color",
      "$value": "#c5b0df"
    },
    "text": {
      "$type": "color",
      "$value": "#3f2a3c"
    }
  }
}