Palette

Muted Ocean Shallows

The gentle, understated beauty of shallow ocean waters meeting a pale, sunlit shore.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5F9EA0#7FFFD4#F5DEB3#A6C1C7#F0F8FF

Palette guide

How to use Muted Ocean Shallows

Overview

The Muted Ocean Shallows palette captures the gentle, sunlit charm of shallow coastal waters and sandy shores. This collection features a soft cadet blue, #5F9EA0, paired with a vibrant aquamarine, #7FFFD4, reminiscent of clear water. A warm, pale peach, #F5DEB3, brings the sandy beach element, while a cool, muted blue-gray, #A6C1C7, grounds the palette. The lightest shade, #F0F8FF, provides an airy, almost white backdrop. This palette is ideal for designs aiming for a light, refreshing, and subtly natural aesthetic, perfect for conveying tranquility and understated beauty.

Best used for

Beach house interior design blogs
Eco-friendly product packaging
Children's book illustrations
Spa and relaxation app interfaces
Coastal wedding invitations
Delicate fashion brand websites

Suggested color roles

primary

Use #5F9EA0 (Cadet Blue) for main sections or headings to establish a gentle, calming presence.

secondary

Apply #A6C1C7 (Blue-Gray) for sub-elements, navigation, or card backgrounds, offering a sophisticated muted tone.

accent

Utilize #7FFFD4 (Aquamarine) for interactive elements, icons, or small highlights to add a refreshing and clear focal point.

background

Employ #F0F8FF (Alice Blue) to provide a clean, bright, and expansive canvas for content, ensuring high readability.

text

A soft charcoal or dark gray works best for primary text on #F0F8FF. For text on #5F9EA0 or #A6C1C7, white or a very light cream is advised.

Accessibility notes

Ensure sufficient contrast when using #5F9EA0 or #A6C1C7 for text against #F0F8FF.
#7FFFD4 is quite light; use it sparingly for text or only against very dark backgrounds to maintain readability.
The warm #F5DEB3 provides good contrast with darker blues but might struggle with lighter shades for text.
Always verify color combinations with accessibility tools, especially for body text and interactive elements.

Recommended combinations

Sandy Shores

Ideal for a website footer or a product card, with #F5DEB3 as the base, #5F9EA0 for headings, and #F0F8FF for descriptive text.

#F5DEB3 · #5F9EA0 · #F0F8FF

Clear Waters

Great for highlighting features in an app, using #7FFFD4 for icons, #A6C1C7 for supporting text, and #5F9EA0 for section titles.

#7FFFD4 · #A6C1C7 · #5F9EA0

Gentle Breeze

Perfect for creating a soft, inviting blog layout, using #A6C1C7 for navigation, #F0F8FF for article backgrounds, and #F5DEB3 for subtle dividing lines.

#A6C1C7 · #F0F8FF · #F5DEB3

CSS variables

:root {
  --muted-ocean-shallows-1: #5F9EA0;
  --muted-ocean-shallows-2: #7FFFD4;
  --muted-ocean-shallows-3: #F5DEB3;
  --muted-ocean-shallows-4: #A6C1C7;
  --muted-ocean-shallows-5: #F0F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "muted-ocean-shallows": {
        1: "#5F9EA0",
        2: "#7FFFD4",
        3: "#F5DEB3",
        4: "#A6C1C7",
        5: "#F0F8FF",
      }
    }
  }
}

Hex values

Color 1#5F9EA0

Color 2#7FFFD4

Color 3#F5DEB3

Color 4#A6C1C7

Color 5#F0F8FF

Accessibility

Contrast checker

2.5:1Fail

2.3:1Fail

1.6:1Fail

2.8:1Fail

2.5:1Fail

1.1:1Fail

1.5:1Fail

1.1:1Fail

2.3:1Fail

1.1:1Fail

1.4:1Fail

1.2:1Fail

1.6:1Fail

1.5:1Fail

1.4:1Fail

1.8:1Fail

2.8:1Fail

1.1:1Fail

1.2:1Fail

1.8:1Fail

Similar palettes

More like Muted Ocean Shallows

Cerulean Shore Breeze

Muted Ocean Shallows

See it in context.

Ready when you are.

Built with Muted Ocean Shallows.

How to use Muted Ocean Shallows

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sandy Shores

Clear Waters

Gentle Breeze

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Muted Ocean Shallows