Back to palettes

Palette

Muted Ocean Depth

The tranquil and cool hues found in the mysterious depths of a calm ocean.

CoolCalm5 colors
More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#008080#4682B4#5F9EA0#ADD8E6#6495ED

Palette guide

How to use Muted Ocean Depth

Overview

The Muted Ocean Depth palette evokes the tranquil stillness of deep waters, offering a serene and sophisticated range of cool blues and teals. This collection features a deep teal, #008080, alongside a steel blue, #4682B4, and a muted cadet blue, #5F9EA0. Complementing these are a soft sky blue, #ADD8E6, and a vibrant cornflower blue, #6495ED, which adds a touch of brightness. Designers can leverage this palette to create calming interfaces, elegant branding, or immersive digital environments. Its harmonious blend ensures visual comfort and a sense of depth, making it ideal for projects requiring a soothing yet impactful aesthetic.

Best used for

  • Spa and wellness branding
  • Environmental non-profit websites
  • Coastal resort marketing materials
  • Meditation app UI design
  • Nature documentary graphics
  • Marine conservation educational platforms

Suggested color roles

primary

Use #008080 (Deep Teal) for main headers, prominent buttons, or large background sections to establish a strong, calming foundation.

secondary

Apply #4682B4 (Steel Blue) for subheadings, secondary calls-to-action, or panel backgrounds, providing a solid, supportive tone.

accent

Utilize #6495ED (Cornflower Blue) for interactive elements like links, highlights, or small icons to draw attention with a gentle pop.

background

Employ #ADD8E6 (Light Blue) as a soft, airy base for content areas, offering excellent readability with darker text and a sense of openness.

text

For primary text on lighter backgrounds like #ADD8E6, use a dark charcoal or near-black. For text on darker colors such as #008080, a crisp white or very light gray is recommended.

Accessibility notes

  • Ensure sufficient contrast between #008080 or #4682B4 and white text for readability, aiming for WCAG AA or AAA.
  • Avoid using #ADD8E6 directly with #5F9EA0 for small text, as their proximity in lightness might reduce contrast.
  • Pair #6495ED with a dark background or a very light background to ensure its vibrancy doesn't hinder text readability.
  • Always test color combinations with accessibility checkers for text and UI elements to meet contrast guidelines.

Recommended combinations

Deep Serenity

Perfect for creating a calm, professional website header with #008080 as the dominant background, #ADD8E6 for sub-elements, and #6495ED for interactive links.

#008080 · #ADD8E6 · #6495ED

Ocean Horizon

Great for a visual hierarchy in data dashboards, using #4682B4 for primary charts, #5F9EA0 for secondary data, and #ADD8E6 for background elements.

#4682B4 · #5F9EA0 · #ADD8E6

Subtle Waves

Excellent for subtle branding elements or icons, with #5F9EA0 as the base, #008080 for depth, and #6495ED for a delicate accent.

#5F9EA0 · #008080 · #6495ED

CSS variables

:root {
  --muted-ocean-depth-1: #008080;
  --muted-ocean-depth-2: #4682B4;
  --muted-ocean-depth-3: #5F9EA0;
  --muted-ocean-depth-4: #ADD8E6;
  --muted-ocean-depth-5: #6495ED;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "muted-ocean-depth": {
        1: "#008080",
        2: "#4682B4",
        3: "#5F9EA0",
        4: "#ADD8E6",
        5: "#6495ED",
      }
    }
  }
}

Related searches

calm blue color schemeocean inspired web designmuted teal paletteserene cool colorsdeep water color gradients

Palette colors

Hex values

Color 1#008080
·
Color 2#4682B4
·
Color 3#5F9EA0
·
Color 4#ADD8E6
·
Color 5#6495ED
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.6:1Fail
3.1:1AA18
1.6:1Fail
2
1.2:1Fail
1.3:1Fail
2.7:1Fail
1.4:1Fail
3
1.6:1Fail
1.3:1Fail
2:1Fail
1:1Fail
4
3.1:1AA18
2.7:1Fail
2:1Fail
1.9:1Fail
5
1.6:1Fail
1.4:1Fail
1:1Fail
1.9:1Fail

Similar palettes

More like Muted Ocean Depth

View all Cool
Sea Spray Ocean
Serene Waterfall Mist
Aegean Coastline Muse
Alpine Lake Dawn
Arctic Glacier Melt
Azure Bay Retreat