Steel Blue

A cool steel-blue palette: gray-blue canvas, dark navy text, electric blue primary, cyan accent. For SaaS dashboards, fintech, and enterprise tools.

coolmodernprofessionalmoderntechnicalcalm

Enterprise Calm with Steel Blue

Steel Blue is a cool, professional palette for SaaS dashboards, fintech products, and enterprise tools. The gray-blue canvas is softer than white, which reduces glare across long work sessions, and the navy text keeps small labels legible. The electric blue primary is the liveliest color in the system and should stay attached to interactive meaning: buttons, links, active states.

The cyan accent works best for informational highlights, focus rings, and data visualization series, while the slate gray covers secondary text and disabled states. Because every color is cool, the palette can feel flat if spacing is timid; give it generous gaps and clear borders. The muted text token is safe for captions, but keep the primary text and interface labels in the navy tone to hold contrast.

Palette colors

Every color role with HEX, RGB, HSL, and OKLCH values. Click any value to copy.

Background

rgb(220, 227, 234)

hsl(210, 25%, 89%)

oklch(91.3% 0.012 248.0)

Text

rgb(15, 27, 46)

hsl(217, 51%, 12%)

oklch(22.2% 0.041 259.3)

Primary

rgb(30, 64, 175)

hsl(226, 71%, 40%)

oklch(42.4% 0.181 265.6)

Secondary

rgb(107, 126, 148)

hsl(212, 16%, 50%)

oklch(58.6% 0.041 252.3)

Accent

rgb(6, 182, 212)

hsl(189, 94%, 43%)

oklch(71.5% 0.126 215.2)

Surface

rgb(240, 244, 248)

hsl(210, 36%, 96%)

oklch(96.5% 0.007 247.9)

Border

rgb(184, 195, 208)

hsl(213, 20%, 77%)

oklch(81.3% 0.022 252.5)

Muted

rgb(90, 107, 126)

hsl(212, 17%, 42%)

oklch(52.1% 0.036 251.4)

WCAG contrast checks

Three semantic pairs evaluated against WCAG 2.2 AA (4.5:1 for normal text).

Text on background

Ratio 13.33:1

AA pass

Primary on background

Ratio 6.74:1

AA pass

Accent on background

Ratio 1.88:1

Below AA

Export tokens

Six formats covering most design system workflows. Each copies cleanly to your clipboard.

tokens.css

:root {
  --color-background: #DCE3EA;
  --color-foreground: #0F1B2E;
  --color-primary: #1E40AF;
  --color-secondary: #6B7E94;
  --color-accent: #06B6D4;
  --color-surface: #F0F4F8;
  --color-border: #B8C3D0;
  --color-muted: #5A6B7E;
}

Related Palettes

Ocean Deep

A deep ocean palette: midnight-navy canvas, sky-blue primary, amber accent. For premium tech and finance brands.

Midnight Brand

A deep midnight palette for premium SaaS: a near-black canvas, soft periwinkle primary, and amber accent for high-contrast CTAs.

Terminal Green

A terminal-inspired dark palette: deep black-green canvas, phosphor-green primary, amber accent for warnings. Built for developer tools.

Cyber Violet

A vivid cyber palette: deep violet canvas, electric purple primary, cyan accent. For bold creative and Web3 brands.