Palette

Gentle Harbor Tide

Light, refreshing blues that mirror the calm ebb and flow of a harbor's gentle tide.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Gentle Harbor Tide 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 Gentle Harbor Tide.

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

Data visualization

#ADD9E6#80C8DE#53B6D6#26A4CE#007DAF

Palette guide

How to use Gentle Harbor Tide

Overview

The "Gentle Harbor Tide" palette captures the serene and refreshing essence of coastal waters with its range of blues. From the light, airy sky blue "#ADD9E6" to the deep, anchoring navy "#007DAF", this collection offers versatility for designs seeking a calm yet vibrant aquatic feel. The mid-tones like "#80C8DE", "#53B6D6", and "#26A4CE" provide excellent transitions, allowing for depth and visual interest without overwhelming the senses. This palette is especially effective for projects related to marine themes, relaxation, or clean, modern aesthetics, evoking a sense of clarity and peaceful movement.

Best used for

Coastal resort branding
Marine conservation websites
Relaxation apps or interfaces
Water-themed product packaging
Travel agency marketing (oceanic focus)
Clean, modern tech interfaces

Suggested color roles

primary

"#007DAF" serves as a strong, deep anchor for primary calls to action, headers, or significant brand elements.

secondary

"#26A4CE" is excellent for subheadings, important links, or graphical accents, providing a clear, engaging blue.

accent

Use "#53B6D6" for interactive elements, highlights, or to add a refreshing pop without being too dominant.

background

"#ADD9E6" offers a very light, airy base, ensuring content stands out while maintaining a soft ambiance.

text

A dark charcoal or black ensures readability on lighter blues; "#007DAF" works well for text on "#ADD9E6".

Accessibility notes

"#ADD9E6" is very light; ensure dark text (e.g., black) has sufficient contrast on it.
"#80C8DE" and "#ADD9E6" may not provide enough contrast for text unless paired with very dark colors.
The darkest blue, "#007DAF", offers good contrast for text on lighter shades like "#ADD9E6".
Always verify WCAG contrast ratios for all text and interactive elements, especially for body copy.

Recommended combinations

Deep Waters

For impactful branding and clear hierarchy in UI components or data visualization.

#007DAF · #26A4CE · #53B6D6

Horizon Line

Ideal for serene backgrounds, banners, or decorative elements that need a light, open feel.

#80C8DE · #ADD9E6 · #26A4CE

Gentle Current

A balanced set for interactive states, subtle data visualization, or layered design elements.

#53B6D6 · #ADD9E6 · #007DAF

CSS variables

:root {
  --gentle-harbor-tide-1: #ADD9E6;
  --gentle-harbor-tide-2: #80C8DE;
  --gentle-harbor-tide-3: #53B6D6;
  --gentle-harbor-tide-4: #26A4CE;
  --gentle-harbor-tide-5: #007DAF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gentle-harbor-tide": {
        1: "#ADD9E6",
        2: "#80C8DE",
        3: "#53B6D6",
        4: "#26A4CE",
        5: "#007DAF",
      }
    }
  }
}

Hex values

Color 1#ADD9E6

Color 2#80C8DE

Color 3#53B6D6

Color 4#26A4CE

Color 5#007DAF

Accessibility

Contrast checker

1.2:1Fail

1.5:1Fail

1.9:1Fail

3:1AA18

1.2:1Fail

1.5:1Fail

2.5:1Fail

1.5:1Fail

1.2:1Fail

2:1Fail

1.9:1Fail

1.5:1Fail

1.2:1Fail

1.6:1Fail

3:1AA18

2.5:1Fail

2:1Fail

1.6:1Fail

Similar palettes

More like Gentle Harbor Tide

Gentle Harbor Tide

See it in context.

Ready when you are.

Built with Gentle Harbor Tide.

How to use Gentle Harbor Tide

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Waters

Horizon Line

Gentle Current

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Gentle Harbor Tide