Palette

Oceanic Teal Depths

Refreshing teals and cool blues transitioning to soft sand, capturing coastal serenity.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#003D4A#006D77#83C5BE#EDF6F9#FFDDD2

Palette guide

How to use Oceanic Teal Depths

Overview

The Oceanic Teal Depths palette offers a serene journey through cool, refreshing tones, perfect for designs aiming for tranquility and sophistication. Anchored by the deep, contemplative #003D4A and the vibrant #006D77, this scheme evokes the calming essence of the ocean. A lighter, airy #83C5BE provides a gentle transition, while the near-white #EDF6F9 offers expansive clarity. The soft, warm #FFDDD2 introduces a grounding, sandy contrast, preventing the palette from feeling too cold. Developers and designers can leverage these hex codes to craft digital interfaces, branding, or print materials that communicate peace, reliability, and natural elegance, ensuring a harmonious user experience.

Best used for

Spa and wellness branding
Eco-friendly product packaging
Travel and tourism websites
Calming mobile app interfaces
Healthcare and mental wellness platforms
Coastal home decor themes

Suggested color roles

primary

#003D4A - Use this deep teal for strong brand presence, primary headings, and critical UI elements like navigation bars or main buttons, conveying stability and depth.

secondary

#006D77 - Ideal for subheadings, active states, secondary buttons, and data visualization. It provides a vibrant yet harmonious support to the primary color.

accent

#FFDDD2 - Deploy this soft peach for calls to action, highlights, or interactive elements where a warm, inviting contrast is desired without being overly bright.

background

#EDF6F9 - A clean, almost white base for body text, spacious layouts, and modal backgrounds, ensuring excellent readability and a sense of openness.

text

For primary text, use #003D4A or a very dark charcoal for optimal contrast against #EDF6F9. For secondary or subtle text, #006D77 works well on light backgrounds.

Accessibility notes

Ensure #003D4A and #006D77 have sufficient contrast when used for text on the #EDF6F9 background to meet WCAG AA standards.
The accent #FFDDD2 provides low contrast against #EDF6F9; avoid using it for small text or critical information unless combined with a darker outline or background.
When using #83C5BE for UI elements or text, verify its contrast against both #EDF6F9 and #003D4A backgrounds for readability.
Consider using a slightly darker shade for large blocks of text if #003D4A feels too saturated for extended reading on light backgrounds.

Recommended combinations

Coastal Calm

Excellent for primary UI layouts, body text on a serene background, and clear interactive elements.

#EDF6F9 · #003D4A · #83C5BE

Warm Accent

Perfect for call-to-action buttons, highlighted content blocks, or visual elements needing a soft, inviting pop.

#006D77 · #FFDDD2 · #003D4A

Gradient Depth

Ideal for creating subtle visual gradients, layered backgrounds, or decorative graphic elements that evoke depth.

#003D4A · #006D77 · #83C5BE

CSS variables

:root {
  --oceanic-teal-depths-1: #003D4A;
  --oceanic-teal-depths-2: #006D77;
  --oceanic-teal-depths-3: #83C5BE;
  --oceanic-teal-depths-4: #EDF6F9;
  --oceanic-teal-depths-5: #FFDDD2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-teal-depths": {
        1: "#003D4A",
        2: "#006D77",
        3: "#83C5BE",
        4: "#EDF6F9",
        5: "#FFDDD2",
      }
    }
  }
}

Hex values

Color 1#003D4A

Color 2#006D77

Color 3#83C5BE

Color 4#EDF6F9

Color 5#FFDDD2

Accessibility

Contrast checker

2:1Fail

6.1:1AA

10.8:1AAA

9.4:1AAA

2:1Fail

3.1:1AA18

5.5:1AA

4.8:1AA

6.1:1AA

3.1:1AA18

1.8:1Fail

1.5:1Fail

10.8:1AAA

5.5:1AA

1.8:1Fail

1.2:1Fail

9.4:1AAA

4.8:1AA

1.5:1Fail

1.2:1Fail

Similar palettes

More like Oceanic Teal Depths