Twinkle Night System palette

Colors in Twinkle Night System: HEX, RGB, HSL & OKLCH

• bg

  #E6ECFF

  #E6ECFF color page →

  RGB

  rgb(230 236 255)

  HSL

  hsl(226 100% 95%)

  OKLCH

  oklch(0.944 0.026 271.9)

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

• surface

  #656D9C

  #656D9C color page →

  RGB

  rgb(101 109 156)

  HSL

  hsl(231 22% 50%)

  OKLCH

  oklch(0.547 0.074 276.2)

  WCAG contrast: on white 4.97:1 (AA) · on black 4.22:1 (Fail)

• primary

  #6B5F3A

  #6B5F3A color page →

  RGB

  rgb(107 95 58)

  HSL

  hsl(45 30% 32%)

  OKLCH

  oklch(0.488 0.056 92.1)

  WCAG contrast: on white 6.31:1 (AA) · on black 3.32:1 (Fail)

• accent

  #276459

  #276459 color page →

  RGB

  rgb(39 100 89)

  HSL

  hsl(169 44% 27%)

  OKLCH

  oklch(0.46 0.065 179.5)

  WCAG contrast: on white 6.87:1 (AA) · on black 3.05:1 (Fail)

• text

  #0C0F1E

  #0C0F1E color page →

  RGB

  rgb(12 15 30)

  HSL

  hsl(230 43% 8%)

  OKLCH

  oklch(0.174 0.032 274.1)

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

Export Twinkle Night System: CSS variables, Tailwind & JSON

:root {
  --bg: #e6ecff;
  --surface: #656d9c;
  --primary: #6b5f3a;
  --accent: #276459;
  --text: #0c0f1e;
}

@theme {
  --color-bg: #e6ecff;
  --color-surface: #656d9c;
  --color-primary: #6b5f3a;
  --color-accent: #276459;
  --color-text: #0c0f1e;
}

{
  "twinkle-night-system-5ty": {
    "bg": {
      "$type": "color",
      "$value": "#e6ecff"
    },
    "surface": {
      "$type": "color",
      "$value": "#656d9c"
    },
    "primary": {
      "$type": "color",
      "$value": "#6b5f3a"
    },
    "accent": {
      "$type": "color",
      "$value": "#276459"
    },
    "text": {
      "$type": "color",
      "$value": "#0c0f1e"
    }
  }
}