Palette

Teal Ocean Depths

A tranquil descent into the cooler, deeper shades of the ocean, from shadowy depths to sparkling surfaces.

CoolCalm5 colors

More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#003049#026077#0A98AD#0DC1C2#4DDAE4

Palette guide

How to use Teal Ocean Depths

Overview

The Teal Ocean Depths palette presents a captivating journey from the profound stillness of deep blues to the vibrant clarity of aqua. With colors ranging from the intense #003049 to the bright #4DDAE4, this collection offers designers and developers a rich spectrum for conveying tranquility, professionalism, and freshness. The deliberate progression through shades like #026077 and #0A98AD allows for the creation of dynamic visual experiences, whether for corporate branding, digital interfaces, or compelling content. This palette is particularly effective for projects aiming to evoke the serene yet powerful essence of the ocean.

Best used for

Marine biology educational platforms
Eco-tourism websites and apps
Technology company branding (clean, modern feel)
Financial services interfaces (trustworthy)
Health and wellness digital products
Underwater photography portfolios

Suggested color roles

primary

#026077 serves as a strong, reliable primary color, suitable for main headings, navigation, or brand logos, embodying depth.

secondary

#0A98AD offers a vibrant secondary option, great for interactive elements, sub-sections, or data visualization.

accent

#4DDAE4 provides a brilliant, eye-catching accent, perfect for calls-to-action, key notifications, or energetic highlights.

background

#003049 creates a deep, sophisticated background, allowing lighter elements to truly stand out with elegance.

text

Use #4DDAE4 or #0DC1C2 for text on darker backgrounds. For lighter elements, a very dark grey or black would be appropriate.

Accessibility notes

#4DDAE4 and #0DC1C2 offer excellent contrast against #003049 for primary text and interactive elements.
Ensure that #0A98AD on #026077 has sufficient contrast for readability, especially for smaller font sizes.
The use of lighter shades like #4DDAE4 for text on dark backgrounds like #003049 is highly recommended for accessibility.
Always verify contrast ratios using a WCAG checker for all text and UI components.

Recommended combinations

Deep Horizon

Creates a powerful visual impact, ideal for hero sections or brand identity with strong contrast.

#003049 · #0A98AD · #4DDAE4

Aqua Flow

Excellent for smooth transitions, gradients, or subtle interactive states within an interface.

#026077 · #0A98AD · #0DC1C2

Luminous Spark

Use for vibrant calls-to-action, highlighted information, or striking graphical elements on a dark base.

#4DDAE4 · #0DC1C2 · #003049

CSS variables

:root {
  --teal-ocean-depths-1: #003049;
  --teal-ocean-depths-2: #026077;
  --teal-ocean-depths-3: #0A98AD;
  --teal-ocean-depths-4: #0DC1C2;
  --teal-ocean-depths-5: #4DDAE4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "teal-ocean-depths": {
        1: "#003049",
        2: "#026077",
        3: "#0A98AD",
        4: "#0DC1C2",
        5: "#4DDAE4",
      }
    }
  }
}

Hex values

Color 1#003049

Color 2#026077

Color 3#0A98AD

Color 4#0DC1C2

Color 5#4DDAE4

Accessibility

Contrast checker

1.9:1Fail

4:1AA18

6.2:1AA

8.2:1AAA

1.9:1Fail

2.1:1Fail

3.2:1AA18

4.2:1AA18

4:1AA18

2.1:1Fail

1.5:1Fail

2:1Fail

6.2:1AA

3.2:1AA18

1.5:1Fail

1.3:1Fail

8.2:1AAA

4.2:1AA18

2:1Fail

1.3:1Fail

Similar palettes

More like Teal Ocean Depths

Aegean Coastline Muse

Celestial Ocean Twilight

Muted Ocean Depth