Glacier Ops palette

Colors in Glacier Ops: HEX, RGB, HSL & OKLCH

• bg

  #0F172A

  #0F172A color page →

  RGB

  rgb(15 23 42)

  HSL

  hsl(222 47% 11%)

  OKLCH

  oklch(0.208 0.04 265.8)

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

• surface

  #1E293B

  #1E293B color page →

  RGB

  rgb(30 41 59)

  HSL

  hsl(217 33% 17%)

  OKLCH

  oklch(0.279 0.037 260)

  WCAG contrast: on white 14.62:1 (AAA) · on black 1.43:1 (Fail)

• signal

  #38BDF8

  #38BDF8 color page →

  RGB

  rgb(56 189 248)

  HSL

  hsl(198 93% 60%)

  OKLCH

  oklch(0.754 0.139 232.7)

  WCAG contrast: on white 2.14:1 (Fail) · on black 9.80:1 (AAA)

• muted

  #94A3B8

  #94A3B8 color page →

  RGB

  rgb(148 163 184)

  HSL

  hsl(215 20% 65%)

  OKLCH

  oklch(0.711 0.035 256.8)

  WCAG contrast: on white 2.56:1 (Fail) · on black 8.19:1 (AAA)

• text

  #F1F5F9

  #F1F5F9 color page →

  RGB

  rgb(241 245 249)

  HSL

  hsl(210 40% 96%)

  OKLCH

  oklch(0.968 0.007 247.9)

  WCAG contrast: on white 1.09:1 (Fail) · on black 19.16:1 (AAA)

Export Glacier Ops: CSS variables, Tailwind & JSON

:root {
  --bg: #0f172a;
  --surface: #1e293b;
  --signal: #38bdf8;
  --muted: #94a3b8;
  --text: #f1f5f9;
}

@theme {
  --color-bg: #0f172a;
  --color-surface: #1e293b;
  --color-signal: #38bdf8;
  --color-muted: #94a3b8;
  --color-text: #f1f5f9;
}

{
  "glacier-ops": {
    "bg": {
      "$type": "color",
      "$value": "#0f172a"
    },
    "surface": {
      "$type": "color",
      "$value": "#1e293b"
    },
    "signal": {
      "$type": "color",
      "$value": "#38bdf8"
    },
    "muted": {
      "$type": "color",
      "$value": "#94a3b8"
    },
    "text": {
      "$type": "color",
      "$value": "#f1f5f9"
    }
  }
}