What are the hex codes in the Deep Ocean Drift palette?

The Deep Ocean Drift color palette consists of Space #0B2447, Lapis #3B5C9E, Cornflower #6E86D6, Powder Blue #A5D7E8.

How should I use the Deep Ocean Drift palette on a website?

Use Powder Blue #A5D7E8 as the background, Space #0B2447 for text, Cornflower #6E86D6 for buttons and links, and Lapis #3B5C9E for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Space on Powder Blue at 9.93:1.

Which colors in Deep Ocean Drift have enough contrast for text?

The highest-contrast pair is #0B2447 on #A5D7E8 with a ratio of 9.93:1, which passes WCAG AA for normal text.

#0B2447Space

#3B5C9ELapis

#6E86D6Cornflower

#A5D7E8Powder Blue

Deep Ocean Drift color palette

Ocean Dark Cold Blue

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Space	`#0B2447`	`rgb(11, 36, 71)`	`hsl(215, 73%, 16%)`	`oklch(26.3% 0.072 258)`
Lapis	`#3B5C9E`	`rgb(59, 92, 158)`	`hsl(220, 46%, 43%)`	`oklch(48.3% 0.113 263)`
Cornflower	`#6E86D6`	`rgb(110, 134, 214)`	`hsl(226, 56%, 64%)`	`oklch(63.6% 0.124 270)`
Powder Blue	`#A5D7E8`	`rgb(165, 215, 232)`	`hsl(195, 59%, 78%)`	`oklch(85.0% 0.057 221)`

Why it works and how to use it

Deep Ocean Drift is an analogous color palette tagged ocean, dark, cold. Analogous neighbors on the wheel (Space, Lapis, Cornflower) give it a natural, low-tension flow. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is cool.

With 4 chromatic colors, Cornflower takes the lead while the rest support. Lightness runs from 16% to 78%. Well suited to websites, presentations and branding.

Background: Powder Blue (#A5D7E8) is the lightest color, so it belongs on large surfaces.
Text: Space (#0B2447) on #A5D7E8 gives 9.93:1, passing WCAG AAA.
Primary: Cornflower (#6E86D6) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Lapis (#3B5C9E) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Space on Powder Blue at 9.93:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Deep Ocean Drift

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#0B2447

#3B5C9E

#6E86D6

#A5D7E8

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#0B2447` on `#A5D7E8`	Aa	9.93:1	AAA
`#0B2447` on `#6E86D6`	Aa	4.45:1	AA large only
`#3B5C9E` on `#A5D7E8`	Aa	4.2:1	AA large only
`#0B2447` on `#3B5C9E`	Aa	2.36:1	Fail
`#6E86D6` on `#A5D7E8`	Aa	2.23:1	Fail
`#3B5C9E` on `#6E86D6`	Aa	1.88:1	Fail

:root {
  --space: #0B2447;
  --lapis: #3B5C9E;
  --cornflower: #6E86D6;
  --powder-blue: #A5D7E8;
}

$space: #0B2447;
$lapis: #3B5C9E;
$cornflower: #6E86D6;
$powder-blue: #A5D7E8;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'space': '#0B2447',
        'lapis': '#3B5C9E',
        'cornflower': '#6E86D6',
        'powder-blue': '#A5D7E8',
      },
    },
  },
};

{
  "name": "Deep Ocean Drift",
  "colors": [
    "#0B2447",
    "#3B5C9E",
    "#6E86D6",
    "#A5D7E8"
  ]
}

background: linear-gradient(135deg, #0B2447, #3B5C9E, #6E86D6, #A5D7E8);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-08-21 · Free for commercial use, no attribution needed.

Similar palettes 36 more in this mood