Steady Twinkle Night Dune palette

Colors in Steady Twinkle Night Dune: HEX, RGB, HSL & OKLCH

• bg

  #F0F2FB

  #F0F2FB color page →

  RGB

  rgb(240 242 251)

  HSL

  hsl(229 58% 96%)

  OKLCH

  oklch(0.962 0.012 276.1)

  WCAG contrast: on white 1.11:1 (Fail) · on black 18.79:1 (AAA)

• surface

  #606DA7

  #606DA7 color page →

  RGB

  rgb(96 109 167)

  HSL

  hsl(229 29% 52%)

  OKLCH

  oklch(0.549 0.092 273.4)

  WCAG contrast: on white 4.94:1 (AA) · on black 4.24:1 (Fail)

• primary

  #695C27

  #695C27 color page →

  RGB

  rgb(105 92 39)

  HSL

  hsl(48 46% 28%)

  OKLCH

  oklch(0.476 0.074 95.7)

  WCAG contrast: on white 6.64:1 (AA) · on black 3.16:1 (Fail)

• accent

  #282D3F

  #282D3F color page →

  RGB

  rgb(40 45 63)

  HSL

  hsl(227 22% 20%)

  OKLCH

  oklch(0.301 0.033 272.3)

  WCAG contrast: on white 13.65:1 (AAA) · on black 1.53:1 (Fail)

• text

  #07080B

  #07080B color page →

  RGB

  rgb(7 8 11)

  HSL

  hsl(225 22% 4%)

  OKLCH

  oklch(0.135 0.007 269)

  WCAG contrast: on white 20.02:1 (AAA) · on black 1.04:1 (Fail)

Export Steady Twinkle Night Dune: CSS variables, Tailwind & JSON

:root {
  --bg: #f0f2fb;
  --surface: #606da7;
  --primary: #695c27;
  --accent: #282d3f;
  --text: #07080b;
}

@theme {
  --color-bg: #f0f2fb;
  --color-surface: #606da7;
  --color-primary: #695c27;
  --color-accent: #282d3f;
  --color-text: #07080b;
}

{
  "steady-twinkle-night-dune-k9": {
    "bg": {
      "$type": "color",
      "$value": "#f0f2fb"
    },
    "surface": {
      "$type": "color",
      "$value": "#606da7"
    },
    "primary": {
      "$type": "color",
      "$value": "#695c27"
    },
    "accent": {
      "$type": "color",
      "$value": "#282d3f"
    },
    "text": {
      "$type": "color",
      "$value": "#07080b"
    }
  }
}