Back to palettes

Palette

Coastal Breeze

A refreshing collection of blues, from light sky to deep sapphire, capturing the crisp air of a tranquil ocean shore.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#ADD8E6#87CEEB#6A5ACD#4682B4#4169E1

Palette guide

How to use Coastal Breeze

Overview

The Coastal Breeze palette (ID: coastal-breeze) offers a refreshing collection of blues, from light sky to deep sapphire, capturing the crisp air of a tranquil ocean shore. This cool and vibrant palette features the soft #ADD8E6, the classic sky blue of #87CEEB, and the striking depth of #6A5ACD (Slate Blue) and #4169E1 (Royal Blue). Designers can leverage these hex codes for dynamic branding, invigorating digital experiences, or clean print materials. Developers will find these harmonious tones excellent for building user interfaces that feel professional, clean, and inviting, with #4682B4 providing a balanced steel blue.

Best used for

  • marine services and products
  • tech and software companies
  • sports and outdoor brands
  • travel and tourism (oceanic)
  • educational institutions
  • corporate identity (modern)

Suggested color roles

primary

#4682B4 - A strong, cool steel blue, excellent for main headings, primary navigation, or prominent brand elements.

secondary

#87CEEB - A vibrant yet soft sky blue, perfect for subheadings, background panels, or supportive graphics.

accent

#6A5ACD - A deep, rich slate blue, ideal for strong accents, important links, or focal points that require high contrast and sophistication.

background

#ADD8E6 - The lightest blue, providing a clean, fresh, and expansive canvas.

text

#4169E1 - This deep royal blue offers excellent readability for body text against the lighter backgrounds like #ADD8E6 or #87CEEB.

Accessibility notes

  • Text in #4169E1 or #6A5ACD on backgrounds like #ADD8E6 or #87CEEB should meet WCAG AA contrast standards.
  • Ensure interactive elements have clear visual feedback beyond just color, especially for mid-tone blues.
  • Avoid using #87CEEB for small text on #ADD8E6 due to potential low contrast.
  • Always verify contrast ratios for all text and interactive elements, particularly for critical information.

Recommended combinations

Ocean Depths

For creating subtle background gradients or layered card designs, evoking depth and calm.

#ADD8E6 · #87CEEB · #4682B4

Dynamic Contrast

Ideal for professional layouts, using the deeper blues for headlines and lighter tones for content.

#4169E1 · #6A5ACD · #ADD8E6

Sky & Sea

For content blocks or subtle dividers, maintaining a refreshing and harmonious visual flow with strong blues.

#87CEEB · #4682B4 · #6A5ACD

CSS variables

:root {
  --coastal-breeze-1: #ADD8E6;
  --coastal-breeze-2: #87CEEB;
  --coastal-breeze-3: #6A5ACD;
  --coastal-breeze-4: #4682B4;
  --coastal-breeze-5: #4169E1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-breeze": {
        1: "#ADD8E6",
        2: "#87CEEB",
        3: "#6A5ACD",
        4: "#4682B4",
        5: "#4169E1",
      }
    }
  }
}

Related searches

coastal blue color paletteocean inspired brandingfresh blue UI designdeep blue web colorsnautical theme palette

Palette colors

Hex values

Color 1#ADD8E6
·
Color 2#87CEEB
·
Color 3#6A5ACD
·
Color 4#4682B4
·
Color 5#4169E1
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
3.5:1AA18
2.7:1Fail
3.2:1AA18
2
1.1:1Fail
3:1AA18
2.4:1Fail
2.8:1Fail
3
3.5:1AA18
3:1AA18
1.3:1Fail
1.1:1Fail
4
2.7:1Fail
2.4:1Fail
1.3:1Fail
1.2:1Fail
5
3.2:1AA18
2.8:1Fail
1.1:1Fail
1.2:1Fail

Similar palettes

More like Coastal Breeze

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