Palette

Deep Ocean Abyss

A mysterious descent into oceanic depths, from midnight blue to illuminating azure.

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

#0A0F1E#1C2E4A#2F4A70#486B9C#608CD2

Palette guide

How to use Deep Ocean Abyss

Overview

The Deep Ocean Abyss palette (version 4) offers a captivating descent into oceanic depths, moving from midnight blue to illuminating azure. With foundational shades like #0A0F1E and #1C2E4A, it progresses beautifully through #2F4A70 and #486B9C to the bright and clear #608CD2. This palette is perfect for designs that aim to convey a sense of depth, clarity, and modern sophistication. Designers and developers can utilize its natural gradient for compelling data visualizations, dynamic website backgrounds, or sleek user interfaces that require a progressive blue aesthetic.

Best used for

Data visualization and dashboards
Environmental awareness campaigns
Science and technology platforms
Modern app UI and UX
Educational content design
Architectural firm branding

Suggested color roles

primary

Use #0A0F1E as the deepest, foundational blue for robust sections and immersive backgrounds.

secondary

Employ #1C2E4A for supportive elements, adding a rich, dark layer that complements the primary hue.

accent

Leverage #608CD2 for bright highlights, calls to action, or interactive elements, providing clarity and focus.

background

Set #0A0F1E as a dark, expansive background to create an immersive and sophisticated canvas.

text

For primary text on dark backgrounds, #608CD2 or a crisp white ensures excellent readability. #486B9C can be used for secondary text.

Accessibility notes

Ensure #608CD2 text provides sufficient contrast against all darker blues, especially for small font sizes.
Be cautious when pairing #2F4A70 text on #1C2E4A backgrounds; always check contrast ratios.
Use the lightest color, #608CD2, for key interactive elements to ensure visibility.
Consider using a very light grey or white for body text to maintain high legibility across the darker blues.

Recommended combinations

Depth Progression

Creates a strong visual hierarchy, moving from deep foundations to bright focal points.

#0A0F1E · #2F4A70 · #608CD2

Clear Data

Excellent for presenting data, with distinct steps for different information levels.

#1C2E4A · #486B9C · #608CD2

Elegant Dark

Provides a rich, sophisticated dark mode aesthetic with subtle blue variations.

#0A0F1E · #1C2E4A · #486B9C

CSS variables

:root {
  --deep-ocean-abyss-4-1: #0A0F1E;
  --deep-ocean-abyss-4-2: #1C2E4A;
  --deep-ocean-abyss-4-3: #2F4A70;
  --deep-ocean-abyss-4-4: #486B9C;
  --deep-ocean-abyss-4-5: #608CD2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-abyss-4": {
        1: "#0A0F1E",
        2: "#1C2E4A",
        3: "#2F4A70",
        4: "#486B9C",
        5: "#608CD2",
      }
    }
  }
}

Hex values

Color 1#0A0F1E

Color 2#1C2E4A

Color 3#2F4A70

Color 4#486B9C

Color 5#608CD2

Accessibility

Contrast checker

1.4:1Fail

2.1:1Fail

3.5:1AA18

5.6:1AA

1.4:1Fail

1.5:1Fail

2.5:1Fail

4:1AA18

2.1:1Fail

1.5:1Fail

1.7:1Fail

2.6:1Fail