Palette

Coastal Tide Pool

Shifting blues and greys reflecting the calm and mysterious depths of a serene coastal tide pool.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Tide Pool 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 Coastal Tide Pool.

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

Data visualization

#2F4F4F#4682B4#6A5ACD#ADD8E6#F0F8FF

Palette guide

How to use Coastal Tide Pool

Overview

The Coastal Tide Pool palette is a captivating collection of shifting blues and grays, reflecting the calm and mysterious depths of a serene coastal tide pool. Ranging from the deep, anchoring #2F4F4F to the classic #4682B4 and the intriguing #6A5ACD, this palette offers a unique blend of cool, sophisticated tones. The lighter #ADD8E6 and #F0F8FF introduce an airy, expansive quality, reminiscent of sunlight on clear water. This harmonious blend is ideal for designers seeking to create a tranquil, sophisticated, and slightly mysterious aesthetic. It's especially suited for projects that aim to evoke clarity, depth, and a quiet, contemplative atmosphere, perfect for elegant, nature-inspired branding.

Best used for

Marine and aquatic research organizations
Luxury spa and wellness branding
High-end jewelry and accessory design
Art gallery websites focusing on abstract art
Mindfulness and meditation app interfaces
Sophisticated home decor and textiles

Suggested color roles

primary

Utilize #4682B4 as a dominant, calming blue for main sections or branding elements.

secondary

Employ #6A5ACD for secondary content blocks, navigation, or subtle graphical elements, adding a unique depth.

accent

Introduce #ADD8E6 as a light, refreshing accent for highlights, icons, or delicate decorative touches.

background

Choose #F0F8FF for a light, airy background, or #ADD8E6 for a slightly more saturated yet soft canvas.

text

Use #2F4F4F for body text and headings for excellent readability against lighter palette colors, or crisp white.

Accessibility notes

The dark #2F4F4F provides excellent contrast for text on #ADD8E6 and #F0F8FF.
Ensure sufficient contrast when using #F0F8FF for text on any background, as it is extremely light.
Avoid using #ADD8E6 for text on #4682B4 backgrounds; opt for a darker or lighter contrasting color.
White text on #2F4F4F or #6A5ACD offers excellent readability and a striking visual impact.

Recommended combinations

Tide Pool Depths

Create a sophisticated, deep-to-light gradient for headers, main content, and bright accents in web design.

#2F4F4F · #4682B4 · #ADD8E6

Aqua Mystery

Ideal for clean, minimalist interfaces with a very light background, a unique accent, and strong dark text.

#F0F8FF · #6A5ACD · #2F4F4F

Ocean Layers

Use for subtle visual layering, combining mid-tone blues for depth and a lighter one for highlights, with a unique purple hint.

#4682B4 · #ADD8E6 · #6A5ACD

CSS variables

:root {
  --coastal-tide-pool-1: #2F4F4F;
  --coastal-tide-pool-2: #4682B4;
  --coastal-tide-pool-3: #6A5ACD;
  --coastal-tide-pool-4: #ADD8E6;
  --coastal-tide-pool-5: #F0F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-tide-pool": {
        1: "#2F4F4F",
        2: "#4682B4",
        3: "#6A5ACD",
        4: "#ADD8E6",
        5: "#F0F8FF",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#4682B4

Color 3#6A5ACD

Color 4#ADD8E6

Color 5#F0F8FF

Accessibility

Contrast checker

2.2:1Fail

1.7:1Fail

5.8:1AA

8.3:1AAA

2.2:1Fail

1.3:1Fail

2.7:1Fail

3.8:1AA18

1.7:1Fail

1.3:1Fail

3.5:1AA18

4.9:1AA

5.8:1AA

2.7:1Fail

3.5:1AA18

1.4:1Fail

8.3:1AAA

3.8:1AA18

4.9:1AA

1.4:1Fail

Similar palettes

More like Coastal Tide Pool

Cerulean Coastline Calm