Palette

Shallow Reef Calm

Tranquil tones reminiscent of clear shallow waters and peaceful coral reefs.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Shallow Reef Calm 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 Shallow Reef Calm.

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

Data visualization

#E6F4F1#A8DADC#68B0AB#4A8C8E#2E5E6E

Palette guide

How to use Shallow Reef Calm

Overview

The Shallow Reef Calm palette evokes serene underwater landscapes, perfect for designs requiring a tranquil, refreshing feel. Dominated by cool, aquatic tones, it ranges from the lightest, airy #E6F4F1 to the deep, grounding #2E5E6E. Mid-tones like the clear #A8DADC and the lush #68B0AB offer excellent versatility for blending and layering. This palette is ideal for creating a sense of peace and natural beauty, making it a strong choice for wellness brands, eco-conscious projects, or any digital interface aiming for a soothing user experience. Its harmonious blend of teals and turquoises, including the striking #4A8C8E, ensures a cohesive and visually appealing aesthetic.

Best used for

Spa and wellness brand websites
Eco-friendly product packaging
Coastal-themed interior design concepts
Mobile app interfaces for meditation or relaxation
Travel agency branding focused on beach destinations
Nature photography portfolios

Suggested color roles

primary

Use #4A8C8E for calls to action or key interactive elements to provide a calm yet distinct focus.

secondary

Apply #68B0AB for subheadings, active states, or supporting graphics, offering depth without overwhelming.

accent

#A8DADC works beautifully for subtle highlights, hover effects, or decorative elements, adding a gentle sparkle.

background

#E6F4F1 provides an airy, clean canvas, ensuring readability and a sense of open space.

text

For primary text, use #2E5E6E to ensure strong contrast against lighter backgrounds. Consider a near-black for body copy if #2E5E6E is too light on specific elements.

Accessibility notes

Ensure sufficient contrast between #2E5E6E text and #E6F4F1 background for body copy.
Avoid using #A8DADC as text on #E6F4F1 as the contrast will be insufficient.
For interactive elements, ensure hover states use colors with good contrast against both normal and active states.
Consider a slightly darker text color than #2E5E6E for very small font sizes to maintain legibility.

Recommended combinations

Ocean Depths

Ideal for hero sections or brand logos, leveraging deep contrast for impact.

#2E5E6E · #4A8C8E · #E6F4F1

Reef Glow

Perfect for light, airy interfaces, backgrounds, and subtle graphic elements.

#A8DADC · #68B0AB · #E6F4F1

Teal Harmony

Effective for gradients, data visualizations, or layered UI components.

#68B0AB · #4A8C8E · #2E5E6E

CSS variables

:root {
  --shallow-reef-calm-1: #E6F4F1;
  --shallow-reef-calm-2: #A8DADC;
  --shallow-reef-calm-3: #68B0AB;
  --shallow-reef-calm-4: #4A8C8E;
  --shallow-reef-calm-5: #2E5E6E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "shallow-reef-calm": {
        1: "#E6F4F1",
        2: "#A8DADC",
        3: "#68B0AB",
        4: "#4A8C8E",
        5: "#2E5E6E",
      }
    }
  }
}

Hex values

Color 1#E6F4F1

Color 2#A8DADC

Color 3#68B0AB

Color 4#4A8C8E

Color 5#2E5E6E

Accessibility

Contrast checker

1.4:1Fail

2.2:1Fail

3.4:1AA18

6.3:1AA

1.4:1Fail

1.6:1Fail

2.5:1Fail

4.7:1AA

2.2:1Fail

1.6:1Fail

1.5:1Fail

2.9:1Fail

3.4:1AA18

2.5:1Fail

1.5:1Fail

1.8:1Fail

6.3:1AA

4.7:1AA

2.9:1Fail

1.8:1Fail

Similar palettes

More like Shallow Reef Calm