Back to palettes

Palette

Sapphire Tide Pool

A range of blues, from deep to light, mimicking the shimmering waters of a secluded tide pool.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000080#4169E1#1E90FF#00BFFF#87CEEB

Palette guide

How to use Sapphire Tide Pool

Overview

The "Sapphire Tide Pool" palette captures the shimmering waters of a secluded tide pool, offering a range of blues from deep to light. This cool, refreshing collection spans from the profound depth of #000080 (Navy) and the regal vibrancy of #4169E1 (Royal Blue), through the dynamic #1E90FF (Dodger Blue) and #00BFFF (Deep Sky Blue), culminating in the airy lightness of #87CEEB (Sky Blue). It’s an ideal choice for designs seeking to evoke calm, freshness, and natural beauty, perfect for environmental projects, travel agencies, or any interface aiming for a clean, aquatic aesthetic.

Best used for

  • Environmental and conservation websites
  • Coastal tourism branding
  • Aquatic sport or leisure promotions
  • Educational content about marine life
  • Children's book illustrations (calm themes)
  • Health and wellness apps

Suggested color roles

primary

#4169E1 (Royal Blue) - A strong, grounding blue for main headers, navigation, or key brand elements, conveying trust and stability.

secondary

#1E90FF (Dodger Blue) - A vibrant, energetic blue for calls-to-action, interactive elements, or sections needing a dynamic highlight.

accent

#00BFFF (Deep Sky Blue) - A bright, sparkling blue for subtle highlights, icons, or to add a refreshing pop of color.

background

#EBF5F8 (Lightest Blue-White) - A very light, almost white background with a subtle blue tint, providing a fresh, open canvas.

text

#000080 (Navy) - The deepest blue in the palette, ensuring excellent readability for body text against lighter backgrounds, maintaining a cohesive blue theme.

Accessibility notes

  • Ensure sufficient contrast between #87CEEB (Sky Blue) and background colors if used for text or critical information.
  • #000080 text on #EBF5F8 or #87CEEB should meet WCAG AA contrast for readability.
  • Avoid relying solely on color to differentiate interactive elements; use underlines or icons as well.
  • Consider the impact of very light blues on users with visual impairments, especially for smaller font sizes.

Recommended combinations

Deep Water

Navy for a strong footer or title, sky blue for light backgrounds, and royal blue for primary content.

#000080 · #87CEEB · #4169E1

Shimmering Pool

Dodger blue for interactive elements, deep sky blue for subtle highlights, against a navy text.

#1E90FF · #00BFFF · #000080

Tidal Flow

Royal blue for main sections, sky blue for secondary elements, and light blue-white for background.

#4169E1 · #87CEEB · #1E90FF

CSS variables

:root {
  --sapphire-tide-pool-2-1: #000080;
  --sapphire-tide-pool-2-2: #4169E1;
  --sapphire-tide-pool-2-3: #1E90FF;
  --sapphire-tide-pool-2-4: #00BFFF;
  --sapphire-tide-pool-2-5: #87CEEB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sapphire-tide-pool-2": {
        1: "#000080",
        2: "#4169E1",
        3: "#1E90FF",
        4: "#00BFFF",
        5: "#87CEEB",
      }
    }
  }
}

Related searches

ocean blue color schemecalm water paletteaquatic design colorsblue nature aestheticfresh blue branding

Palette colors

Hex values

Color 1#000080
·
Color 2#4169E1
·
Color 3#1E90FF
·
Color 4#00BFFF
·
Color 5#87CEEB
·

Accessibility

Contrast checker

1
2
3
4
5
1
3.3:1AA18
4.9:1AA
7.5:1AAA
9.2:1AAA
2
3.3:1AA18
1.5:1Fail
2.3:1Fail
2.8:1Fail
3
4.9:1AA
1.5:1Fail
1.5:1Fail
1.9:1Fail
4
7.5:1AAA
2.3:1Fail
1.5:1Fail
1.2:1Fail
5
9.2:1AAA
2.8:1Fail
1.9:1Fail
1.2:1Fail

Similar palettes

More like Sapphire Tide Pool

View all cool
Azure Abyss Calm
Azure Lagoon Drift
Azure Reef Currents
Calm Ocean Swell
Cerulean Shore Breeze
Coastal Breeze