Ocean Deep

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

darkcoolpremiummoderncalmluxury

Deep-Water Design with Ocean Deep

Ocean Deep is a navy-heavy palette for premium tech, finance, and travel brands that want depth without the flatness of plain black. The sky-blue primary glows against the midnight canvas and pulls double duty as a link color and a button fill. Amber returns as the accent for pricing, savings highlights, and calls to action that must cut through.

Layer the three blue values carefully: canvas, surface, and border are only a few steps apart, so cards get their separation mostly from the border token. If a section should feel recessed, use the canvas tone; for elevated panels, the surface tone. Blue-on-blue combinations at small type sizes can drop below contrast targets, so run the table above before setting secondary text in blue.

Palette colors

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

Background

rgb(7, 18, 31)

hsl(213, 63%, 7%)

oklch(17.9% 0.032 253.0)

Text

rgb(226, 234, 242)

hsl(210, 38%, 92%)

oklch(93.3% 0.014 248.0)

Primary

rgb(56, 189, 248)

hsl(198, 93%, 60%)

oklch(75.4% 0.139 232.7)

Secondary

rgb(14, 116, 144)

hsl(193, 82%, 31%)

oklch(52.0% 0.094 223.1)

Accent

rgb(251, 191, 36)

hsl(43, 96%, 56%)

oklch(83.7% 0.164 84.4)

Surface

rgb(15, 27, 44)

hsl(215, 49%, 12%)

oklch(22.0% 0.038 257.2)

Border

rgb(27, 42, 63)

hsl(215, 40%, 18%)

oklch(28.2% 0.044 256.9)

Muted

rgb(100, 116, 139)

hsl(215, 16%, 47%)

oklch(55.4% 0.041 257.4)

WCAG contrast checks

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

Text on background

Ratio 15.50:1

AA pass

Primary on background

Ratio 8.79:1

AA pass

Accent on background

Ratio 11.28:1

AA pass

Export tokens

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

tokens.css

:root {
  --color-background: #07121F;
  --color-foreground: #E2EAF2;
  --color-primary: #38BDF8;
  --color-secondary: #0E7490;
  --color-accent: #FBBF24;
  --color-surface: #0F1B2C;
  --color-border: #1B2A3F;
  --color-muted: #64748B;
}

Related Palettes

Midnight Brand

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

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.

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.