Back to palettes

Palette

Deep Ocean

Intense blues and teals dive deep into the enigmatic allure of the unexplored ocean depths.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F4C5C#2F7C8F#5B99A3#0A3B4A#42838D

Palette guide

How to use Deep Ocean

Overview

The Deep Ocean palette dives into the enigmatic allure of unexplored ocean depths, featuring intense blues and teals. From the rich #0F4C5C to the vibrant #5B99A3, this palette offers a professional yet mysterious aesthetic. Designers can leverage these shades to create sophisticated digital experiences, while developers will find them ideal for branding, data visualization, and modern UI themes that require depth and clarity. The interplay between #2F7C8F and #42838D allows for dynamic layering and visual hierarchy, making it perfect for projects related to marine science, technology, or any brand seeking a strong, calm, and trustworthy presence.

Best used for

  • Professional maritime industry websites
  • High-tech environmental solutions platforms
  • Luxury yacht or boat manufacturers
  • Data analytics dashboards
  • Educational content on oceanography
  • Corporate branding for stable companies

Suggested color roles

primary

Utilize #0F4C5C as the foundational background or primary content color, providing a stable, deep, and professional base.

secondary

Apply #2F7C8F for secondary content areas, panels, or navigation, offering a clear visual distinction and layered effect.

accent

Introduce #5B99A3 as a subtle yet effective accent for interactive elements, key features, or important data points, ensuring visibility.

background

The deepest hue, #0A3B4A, is excellent for expansive backgrounds or header sections, setting an immediate tone of depth and professionalism.

text

For optimal readability, use a crisp white or very light gray. #5B99A3 can be used for larger headings or highlights on the darkest backgrounds.

Accessibility notes

  • Ensure high contrast for text on #0F4C5C, #0A3B4A, and #2F7C8F by using light text (e.g., white or #5B99A3).
  • The lightest color, #5B99A3, provides good contrast for primary text against all darker blues/teals in the palette.
  • Avoid using #0F4C5C and #0A3B4A for small text or critical UI elements in close proximity without careful contrast checks.
  • Always test color combinations with accessibility tools to ensure WCAG compliance for readability.

Recommended combinations

Professional Depth

Ideal for creating a layered background or card system in professional interfaces, conveying stability and depth.

#0A3B4A · #0F4C5C · #2F7C8F

Sea Contrast

Use #0F4C5C as a base, with #42838D for secondary elements and #5B99A3 for subtle, calming highlights.

#0F4C5C · #42838D · #5B99A3

Teal Mystery

Excellent for a dark, mysterious background with a clear, soft accent and a strong mid-tone for supporting details.

#0A3B4A · #5B99A3 · #2F7C8F

CSS variables

:root {
  --deep-ocean-1: #0F4C5C;
  --deep-ocean-2: #2F7C8F;
  --deep-ocean-3: #5B99A3;
  --deep-ocean-4: #0A3B4A;
  --deep-ocean-5: #42838D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean": {
        1: "#0F4C5C",
        2: "#2F7C8F",
        3: "#5B99A3",
        4: "#0A3B4A",
        5: "#42838D",
      }
    }
  }
}

Related searches

deep teal color paletteprofessional blue-green hex codesoceanic branding colorsdark teal UI designsea green color scheme

Palette colors

Hex values

Color 1#0F4C5C
·
Color 2#2F7C8F
·
Color 3#5B99A3
·
Color 4#0A3B4A
·
Color 5#42838D
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
3:1Fail
1.3:1Fail
2.2:1Fail
2
2:1Fail
1.5:1Fail
2.5:1Fail
1.1:1Fail
3
3:1Fail
1.5:1Fail
3.8:1AA18
1.3:1Fail
4
1.3:1Fail
2.5:1Fail
3.8:1AA18
2.8:1Fail
5
2.2:1Fail
1.1:1Fail
1.3:1Fail
2.8:1Fail

Similar palettes

More like Deep Ocean

View all dark
Ocean Depths
Abyssal Sea Depths
Abyssal Trench Mystery
Abyssal Trench Mystery
Bioluminescent Deep Trench
Celestial Abyss Gaze