Back to palettes

Palette

Ocean Depths Dream

A journey into the profound blues of the deep ocean, where dreams and mysteries reside.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ocean Depths Dream 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 Ocean Depths Dream.

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

Data visualization

#000080#191970#001F54#034078#1282A2

Palette guide

How to use Ocean Depths Dream

Overview

The Ocean Depths Dream palette delves into the profound, mysterious blues of the deep sea, offering a sophisticated and tranquil aesthetic. Anchored by a classic Navy (#000080) and a rich Midnight Blue (#191970), this palette exudes elegance and depth. The inclusion of a deep Prussian Blue (#001F54) and a slightly brighter Steel Blue variant (#034078) provides subtle tonal shifts, while the vibrant Dark Cyan (#1282A2) acts as a captivating accent. Designers and developers can utilize these hues to craft immersive digital experiences, convey trustworthiness, or establish a luxurious brand identity, ensuring visual harmony and emotional resonance.

Best used for

  • High-end digital product interfaces
  • Educational content platforms (history, science)
  • Luxury travel and hospitality branding
  • Financial services websites
  • Meditation or mindfulness app design
  • Environmental or marine conservation non-profits

Suggested color roles

primary

Navy (#000080) for foundational elements like headers, footers, or large background sections, conveying authority.

secondary

Midnight Blue (#191970) for secondary content blocks, navigation menus, or card backgrounds, adding richness.

accent

Dark Cyan (#1282A2) to draw attention to interactive elements, calls-to-action, or key information.

background

Prussian Blue (#001F54) for content panels or subtle page backgrounds, providing depth without overwhelming.

text

Use crisp white or a very light grey for optimal readability against these dark blues.

Accessibility notes

  • Most colors in this palette are dark; always ensure light text (e.g., white) has sufficient contrast.
  • #000080 and #191970 are very close; avoid using them for text/background contrast.
  • Dark Cyan (#1282A2) offers the best contrast potential as an accent against the darker blues.
  • Test all text/background pairs against WCAG AA or AAA guidelines, especially for smaller text.

Recommended combinations

Abyssal Calm

A serene combination, using #000080 as a base, #001F54 for content, and #1282A2 for highlights.

#000080 · #001F54 · #1282A2

Elegant Depth

Create a sophisticated look with #191970 as a background, #034078 for elements, and #000080 for strong emphasis.

#191970 · #034078 · #000080

Dreamy Accent

Ideal for interactive components, with #001F54 as background, #1282A2 for buttons, and #034078 for hover states.

#001F54 · #1282A2 · #034078

CSS variables

:root {
  --ocean-depths-dream-1: #000080;
  --ocean-depths-dream-2: #191970;
  --ocean-depths-dream-3: #001F54;
  --ocean-depths-dream-4: #034078;
  --ocean-depths-dream-5: #1282A2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-depths-dream": {
        1: "#000080",
        2: "#191970",
        3: "#001F54",
        4: "#034078",
        5: "#1282A2",
      }
    }
  }
}

Related searches

deep sea color schemestranquil dark blue paletteelegant navy and tealmysterious blue brandingocean inspired ui colors

Palette colors

Hex values

Color 1#000080
·
Color 2#191970
·
Color 3#001F54
·
Color 4#034078
·
Color 5#1282A2
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1:1Fail
1.5:1Fail
3.6:1AA18
2
1.1:1Fail
1.1:1Fail
1.4:1Fail
3.4:1AA18
3
1:1Fail
1.1:1Fail
1.5:1Fail
3.6:1AA18
4
1.5:1Fail
1.4:1Fail
1.5:1Fail
2.4:1Fail
5
3.6:1AA18
3.4:1AA18
3.6:1AA18
2.4:1Fail

Similar palettes

More like Ocean Depths Dream

View all dark