ColorPaletteXYZ Logo
ColorPaletteXYZ
Palettes/Ocean· Curated

Marianas Deep Sea

Immersive oceanic depth palette traversing from deep abyssal midnight to bright sunlit surface waters.

#Ocean#Cool
Open in Generator
COLOR 1
#020B14
Slate 950
COLOR 2
#06283D
Slate 800
COLOR 3
#1363DF
Royal Blue
COLOR 4
#47B5FF
Sky 500
COLOR 5
#DFF6FF
Ice Blue Crystal

Suitable Design Applications

Oceanographic PortalsDeep-Focus Coding ToolsAudio Engineering AppsNighttime Data Visualizations

Visual Psychology & Mood

Immense depth, meditative stillness, and scientific curiosity.

Editorial Application Advice

Layered abyssal blues transitioning to bioluminescent teal. Exceptional for sustained nocturnal work sessions without visual fatigue.

Recommended UI Role Architecture

Optimal visual hierarchy assignment for digital product interfaces:

Primary Canvas Background
#020B14
Card & Elevated Surface
#081E30
Primary Brand CTA Accent
#06B6D4
Secondary Accent & Focus
#0EA5E9
Typography & Headings
#E0F2FE

Color Values & Codes

HEX · RGB · HSL
Slate 950
#020B14
rgb(2, 11, 20)hsl(210, 82%, 4%)Color details →
Slate 800
#06283D
rgb(6, 40, 61)hsl(203, 82%, 13%)Color details →
Royal Blue
#1363DF
rgb(19, 99, 223)hsl(216, 84%, 47%)Color details →
Sky 500
#47B5FF
rgb(71, 181, 255)hsl(204, 100%, 64%)Color details →
rgb(223, 246, 255)hsl(197, 100%, 94%)Color details →

Open In Design Tools

Palette Generator
Lock & shuffle colors
Contrast Checker
Test WCAG compliance
Shades & Tints
Generate tonal steps
Ocean Palettes
Explore category schemes

CSS Variables

Copy & paste directly into your stylesheet
:root {
  --color-1: #020B14;
  --color-2: #06283D;
  --color-3: #1363DF;
  --color-4: #47B5FF;
  --color-5: #DFF6FF;
}

Role-Based WCAG Contrast Audit

Accessibility contrast depends on assigned UI roles. Here are the contrast ratios and WCAG compliance ratings when pairing palette colors as Foreground Text against Background surfaces:

Sample Text
#020B14 on #47B5FF8.79:1
Normal Text AA Pass
Sample Text
#020B14 on #DFF6FF17.69:1
Normal Text AA Pass
Sample Text
#06283D on #47B5FF6.76:1
Normal Text AA Pass
Sample Text
#06283D on #DFF6FF13.61:1
Normal Text AA Pass
Sample Text
#1363DF on #47B5FF2.40:1
Large Text Only (Fail)
Sample Text
#1363DF on #DFF6FF4.84:1
Normal Text AA Pass

Related Palettes in Ocean

Explore Ocean
#0F172ACopy
#1E293BCopy
#2563EBCopy
#38BDF8Copy
#F8FAFCCopy
cp-featured-01Technology
SaaS Velocity Blue
TechModernCool
#005F73Copy
#0A9396Copy
#94D2BDCopy
#E9D8A6Copy
#EE9B00Copy
cp-featured-13Ocean
Caribbean Reef Shallows
OceanFresh
#FDF6E2Copy
#E0B589Copy
#D2885DCopy
#7A9A95Copy
#2B5853Copy
cp-featured-24Aesthetic
Desert Mirage Oasis
AestheticEarthyFresh
#4BE2D7Copy
#4AE8DDCopy
#329F98Copy
#6DD5CECopy
#85F4EDCopy
cp-featured-27Aesthetic
Nordic Turquoise Mirage
AestheticCleanOcean

Frequently Asked Questions About Marianas Deep Sea

Production design guidance and accessibility rules for applying the Marianas Deep Sea (Ocean) color palette.

What is the recommended role hierarchy for the Marianas Deep Sea palette?
In digital interface design, allocate #020B14 and #DFF6FF for structural surface canvas and typography hierarchy (the 60% and 30% layers of the design), while using standout swatches like #06283D or #1363DF as your 10% primary action accent for buttons, badges, and interactive highlights.
Are the colors in Marianas Deep Sea WCAG accessible for web body copy?
Always verify contrast ratios against WCAG 2.2 AA standards (minimum 4.5:1 for regular body copy and 3.0:1 for large text or graphical controls). Consult the Role-Based WCAG Contrast Audit section above to see exact scores for every foreground/background combination in this palette.
How can I export the Marianas Deep Sea palette to my frontend codebase?
You can copy CSS Custom Properties directly from the CSS Variables code block above, export Tailwind CSS configuration tokens, download a high-resolution PNG card, or open the entire palette inside the interactive Palette Generator to experiment with tints and harmonies.