Deep Horizon UI palette

Colors in Deep Horizon UI: HEX, RGB, HSL & OKLCH

• bg

  #0B1220

  #0B1220 color page →

  RGB

  rgb(11 18 32)

  HSL

  hsl(220 49% 8%)

  OKLCH

  oklch(0.183 0.031 263.4)

  WCAG contrast: on white 18.72:1 (AAA) · on black 1.12:1 (Fail)

• surface

  #1E3A5F

  #1E3A5F color page →

  RGB

  rgb(30 58 95)

  HSL

  hsl(214 52% 25%)

  OKLCH

  oklch(0.346 0.074 256)

  WCAG contrast: on white 11.50:1 (AAA) · on black 1.82:1 (Fail)

• primary

  #3B82F6

  #3B82F6 color page →

  RGB

  rgb(59 130 246)

  HSL

  hsl(217 91% 60%)

  OKLCH

  oklch(0.623 0.188 259.8)

  WCAG contrast: on white 3.67:1 (Fail) · on black 5.70:1 (AA)

• accent

  #93C5FD

  #93C5FD color page →

  RGB

  rgb(147 197 253)

  HSL

  hsl(212 96% 78%)

  OKLCH

  oklch(0.809 0.096 251.8)

  WCAG contrast: on white 1.80:1 (Fail) · on black 11.64:1 (AAA)

• text

  #F8FAFC

  #F8FAFC color page →

  RGB

  rgb(248 250 252)

  HSL

  hsl(210 40% 98%)

  OKLCH

  oklch(0.984 0.003 247.9)

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

Export Deep Horizon UI: CSS variables, Tailwind & JSON

:root {
  --bg: #0b1220;
  --surface: #1e3a5f;
  --primary: #3b82f6;
  --accent: #93c5fd;
  --text: #f8fafc;
}

@theme {
  --color-bg: #0b1220;
  --color-surface: #1e3a5f;
  --color-primary: #3b82f6;
  --color-accent: #93c5fd;
  --color-text: #f8fafc;
}

{
  "deep-horizon": {
    "bg": {
      "$type": "color",
      "$value": "#0b1220"
    },
    "surface": {
      "$type": "color",
      "$value": "#1e3a5f"
    },
    "primary": {
      "$type": "color",
      "$value": "#3b82f6"
    },
    "accent": {
      "$type": "color",
      "$value": "#93c5fd"
    },
    "text": {
      "$type": "color",
      "$value": "#f8fafc"
    }
  }
}