Palette

Teal Ocean Depths

A journey into the serene and mysterious depths of the ocean, transitioning from dark to light teal.

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

#0A2229#0E3B43#155B68#267E96#4FB4CF

Palette guide

How to use Teal Ocean Depths

Overview

The Teal Ocean Depths palette plunges into a spectrum of profound teal and blue-green hues, reflecting the mysterious beauty of the deep sea. Anchored by the near-black #0A2229 and ascending to the vibrant #4FB4CF, this collection offers a sophisticated and immersive experience. Designers and developers can leverage this palette to evoke feelings of calm, depth, and discovery. The transition from dark, rich tones like #0E3B43 to lighter, more luminous shades like #267E96 provides excellent opportunities for creating dramatic visual narratives, ideal for projects requiring a sense of elegance, tranquility, or exploration in their UI and branding.

Best used for

Maritime and aquatic themed websites
Environmental conservation digital campaigns
Luxury product interfaces
Scientific data visualization tools
Documentary film branding
Sophisticated corporate presentations

Suggested color roles

primary

#155B68 serves as a robust primary color, excellent for main content areas or brand identity, suggesting stability and depth.

secondary

#267E96 offers a brighter, engaging secondary color, perfect for interactive elements, subheadings, or featured sections.

accent

#4FB4CF stands out as a luminous accent, ideal for calls-to-action, highlights, or graphical elements that need to pop.

background

#0A2229 provides a very dark, immersive background, creating a dramatic canvas for lighter elements and text.

text

For dark backgrounds, #4FB4CF or #267E96 offers excellent readability. For lighter elements, a deep charcoal would work well.

Accessibility notes

Ensure sufficient contrast when using #0E3B43 or #155B68 for text on the #0A2229 background.
#4FB4CF provides strong contrast against the darkest colors, making it suitable for primary text on dark backgrounds.
Avoid placing #267E96 text directly on #155B68 without checking contrast ratios.
All interactive elements should meet WCAG AA or AAA contrast requirements.

Recommended combinations

Deep Sea Glow

Creates a dramatic visual hierarchy, great for dark mode interfaces or powerful brand statements.

#0A2229 · #155B68 · #4FB4CF

Oceanic Gradient

Excellent for subtle background gradients, visual storytelling, or atmospheric design elements.

#0E3B43 · #155B68 · #267E96

Surface Sparkle

Use for bright, inviting calls-to-action against a deep background, guiding user attention effectively.

#4FB4CF · #267E96 · #0A2229

CSS variables

:root {
  --teal-ocean-depths-2-1: #0A2229;
  --teal-ocean-depths-2-2: #0E3B43;
  --teal-ocean-depths-2-3: #155B68;
  --teal-ocean-depths-2-4: #267E96;
  --teal-ocean-depths-2-5: #4FB4CF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "teal-ocean-depths-2": {
        1: "#0A2229",
        2: "#0E3B43",
        3: "#155B68",
        4: "#267E96",
        5: "#4FB4CF",
      }
    }
  }
}

Hex values

Color 1#0A2229

Color 2#0E3B43

Color 3#155B68

Color 4#267E96

Color 5#4FB4CF

Accessibility

Contrast checker

1.4:1Fail

2.1:1Fail

3.5:1AA18

6.9:1AA

1.4:1Fail

1.6:1Fail

2.6:1Fail

5.1:1AA

2.1:1Fail

1.6:1Fail

1.7:1Fail

3.2:1AA18

3.5:1AA18

2.6:1Fail

1.7:1Fail

1.9:1Fail

6.9:1AA

5.1:1AA

3.2:1AA18

1.9:1Fail

Similar palettes

More like Teal Ocean Depths

View all cool

Azure Canopy Light

Abyssal Blue Descent

Abyssal Current Glide

Azure Abyss Calm

Azure Lagoon Dream

Azure Ocean Current