Palette

Deep Ocean Abyss

Plunge into the mysterious depths of the ocean, where deep blues fade into an unknown void.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Deep Ocean Abyss reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Deep Ocean Abyss.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#0A192A#1E3A5A#3B5F8A#6C91C2#0A111F

Palette guide

How to use Deep Ocean Abyss

Overview

This Deep Ocean Abyss palette (version 3) offers a sophisticated journey into oceanic depths, blending cool, professional blues with a touch of mystery. Starting with the profound #0A111F and #0A192A, it gracefully transitions through #1E3A5A and #3B5F8A to the lighter, more illuminating #6C91C2. This collection provides a clean, yet rich foundation for designs requiring a sense of stability, trust, and understated elegance. Designers and developers will find it versatile for creating professional interfaces, corporate branding, or any project aiming for a deep, contemplative blue aesthetic.

Best used for

Corporate website design
Financial service branding
Educational institution platforms
High-tech product interfaces
Luxury brand presentations
Data analysis dashboards

Suggested color roles

primary

Designate #0A192A as the primary hue, offering a strong, professional anchor for brand identity and main content areas.

secondary

Utilize #1E3A5A for supportive elements, creating depth and consistency without competing with the primary color.

accent

Apply #6C91C2 for subtle highlights, interactive elements, or to draw attention without being overly bold, adding a touch of clarity.

background

Employ #0A111F as a very dark, almost black background to provide an immersive and sophisticated canvas for content.

text

For optimal readability, use #6C91C2 or a crisp white for text on darker backgrounds. #3B5F8A can be used for secondary text.

Accessibility notes

Ensure #6C91C2 text has high contrast against #0A111F or #0A192A backgrounds for legibility.
Avoid using #1E3A5A text on #0A192A backgrounds for small font sizes due to potential low contrast.
Consider using a lighter shade for interactive states to clearly indicate user interaction.
Verify all text and background combinations meet WCAG AA or AAA contrast standards.

Recommended combinations

Corporate Depth

Ideal for creating a serious, trustworthy, and layered professional appearance.

#0A192A · #1E3A5A · #3B5F8A

Soft Illumination

Provides a gentle highlight against a very dark background, suitable for sophisticated UIs.

#0A111F · #6C91C2 · #3B5F8A

Clean Gradient

Offers a smooth visual progression, excellent for data visualization or progress indicators.

#1E3A5A · #3B5F8A · #6C91C2

CSS variables

:root {
  --deep-ocean-abyss-3-1: #0A192A;
  --deep-ocean-abyss-3-2: #1E3A5A;
  --deep-ocean-abyss-3-3: #3B5F8A;
  --deep-ocean-abyss-3-4: #6C91C2;
  --deep-ocean-abyss-3-5: #0A111F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-abyss-3": {
        1: "#0A192A",
        2: "#1E3A5A",
        3: "#3B5F8A",
        4: "#6C91C2",
        5: "#0A111F",
      }
    }
  }
}

Hex values

Color 1#0A192A

Color 2#1E3A5A

Color 3#3B5F8A

Color 4#6C91C2

Color 5#0A111F

Accessibility

Contrast checker

1.5:1Fail

2.7:1Fail

5.5:1AA

1.1:1Fail

1.5:1Fail

1.8:1Fail

3.6:1AA18

1.6:1Fail

2.7:1Fail

1.8:1Fail

2:1Fail

2.9:1Fail

5.5:1AA

3.6:1AA18

2:1Fail

5.8:1AA

1.1:1Fail

1.6:1Fail

2.9:1Fail

5.8:1AA

Similar palettes

More like Deep Ocean Abyss

View all dark

Deep Ocean Trench

Abyss Gaze

Abyssal Bioluminescence

Abyssal Bioluminescent Glow

Abyssal Coral Forms

Abyssal Coral Glow