Twinkle Night Atelier palette

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

• bg

  #DFE0EB

  #DFE0EB color page →

  RGB

  rgb(223 224 235)

  HSL

  hsl(235 23% 90%)

  OKLCH

  oklch(0.909 0.015 281.9)

  WCAG contrast: on white 1.31:1 (Fail) · on black 15.99:1 (AAA)

• surface

  #6A6FA0

  #6A6FA0 color page →

  RGB

  rgb(106 111 160)

  HSL

  hsl(234 22% 52%)

  OKLCH

  oklch(0.557 0.076 279.1)

  WCAG contrast: on white 4.77:1 (AA) · on black 4.39:1 (Fail)

• primary

  #716730

  #716730 color page →

  RGB

  rgb(113 103 48)

  HSL

  hsl(51 40% 32%)

  OKLCH

  oklch(0.511 0.076 99.2)

  WCAG contrast: on white 5.69:1 (AA) · on black 3.68:1 (Fail)

• accent

  #256C67

  #256C67 color page →

  RGB

  rgb(37 108 103)

  HSL

  hsl(176 49% 28%)

  OKLCH

  oklch(0.486 0.07 188.6)

  WCAG contrast: on white 6.14:1 (AA) · on black 3.41:1 (Fail)

• text

  #050512

  #050512 color page →

  RGB

  rgb(5 5 18)

  HSL

  hsl(240 57% 5%)

  OKLCH

  oklch(0.125 0.031 280.9)

  WCAG contrast: on white 20.25:1 (AAA) · on black 1.03:1 (Fail)

Export Twinkle Night Atelier: CSS variables, Tailwind & JSON

:root {
  --bg: #dfe0eb;
  --surface: #6a6fa0;
  --primary: #716730;
  --accent: #256c67;
  --text: #050512;
}

@theme {
  --color-bg: #dfe0eb;
  --color-surface: #6a6fa0;
  --color-primary: #716730;
  --color-accent: #256c67;
  --color-text: #050512;
}

{
  "twinkle-night-atelier-1sq": {
    "bg": {
      "$type": "color",
      "$value": "#dfe0eb"
    },
    "surface": {
      "$type": "color",
      "$value": "#6a6fa0"
    },
    "primary": {
      "$type": "color",
      "$value": "#716730"
    },
    "accent": {
      "$type": "color",
      "$value": "#256c67"
    },
    "text": {
      "$type": "color",
      "$value": "#050512"
    }
  }
}