Back to palettes

Palette

Coastal Breeze Hues

Light, airy blues and greens capturing the crisp, cool feeling of a seaside breeze.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4682B4#7DA0B7#B2CCE2#DCEBF6#9FC6DE

Palette guide

How to use Coastal Breeze Hues

Overview

The Coastal Breeze Hues palette captures the crisp, cool feeling of a seaside breeze with its light, airy blues and greens. Ranging from the deep steel blue of #4682B4 to the expansive, almost white #DCEBF6, this collection evokes freshness, calm, and clarity. Designers can leverage these hex codes for refreshing digital experiences, clean branding, or soothing print materials. Developers will find these harmonious tones excellent for building user interfaces that feel clean, trustworthy, and inviting, with #7DA0B7 providing a balanced mid-tone and #B2CCE2 offering a soft, expansive background.

Best used for

  • marine conservation organizations
  • water purification services
  • spa and wellness branding
  • tech companies (clean aesthetic)
  • coastal travel agencies
  • educational content on natural sciences

Suggested color roles

primary

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

secondary

#7DA0B7 - A balanced mid-tone blue, perfect for subheadings, background panels, or supportive graphics.

accent

#9FC6DE - A lighter, soft blue that can serve as a subtle accent or for interactive elements that need a gentle highlight.

background

#DCEBF6 - The lightest, almost white blue, providing an expansive, clean, and airy canvas.

text

#4682B4 - This deep blue offers excellent readability for body text against the lighter backgrounds like #DCEBF6 or #B2CCE2.

Accessibility notes

  • Text in #4682B4 or #7DA0B7 on #DCEBF6 or #B2CCE2 backgrounds should meet WCAG AA contrast standards.
  • Avoid using lighter shades like #B2CCE2 or #9FC6DE for small text on the lightest background due to potential low contrast.
  • Ensure interactive elements have clear visual feedback beyond just color, especially for lighter blue shades.
  • Always verify contrast ratios for all text and interactive elements, particularly for critical information.

Recommended combinations

Ocean Layers

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

#DCEBF6 · #B2CCE2 · #7DA0B7

Deep Water

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

#4682B4 · #7DA0B7 · #DCEBF6

Airy Refresh

For subtle highlights or decorative elements where a harmonious, cool blue blend is desired.

#9FC6DE · #B2CCE2 · #4682B4

CSS variables

:root {
  --coastal-breeze-hues-1: #4682B4;
  --coastal-breeze-hues-2: #7DA0B7;
  --coastal-breeze-hues-3: #B2CCE2;
  --coastal-breeze-hues-4: #DCEBF6;
  --coastal-breeze-hues-5: #9FC6DE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-breeze-hues": {
        1: "#4682B4",
        2: "#7DA0B7",
        3: "#B2CCE2",
        4: "#DCEBF6",
        5: "#9FC6DE",
      }
    }
  }
}

Related searches

coastal blue paletteaqua breeze colorsrefreshing UI blueclean ocean brandinglight cool blue scheme

Palette colors

Hex values

Color 1#4682B4
·
Color 2#7DA0B7
·
Color 3#B2CCE2
·
Color 4#DCEBF6
·
Color 5#9FC6DE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.5:1Fail
3.4:1AA18
2.3:1Fail
2
1.5:1Fail
1.7:1Fail
2.3:1Fail
1.5:1Fail
3
2.5:1Fail
1.7:1Fail
1.4:1Fail
1.1:1Fail
4
3.4:1AA18
2.3:1Fail
1.4:1Fail
1.5:1Fail
5
2.3:1Fail
1.5:1Fail
1.1:1Fail
1.5:1Fail

Similar palettes

More like Coastal Breeze Hues

View all cool
Aegean Coastline Calm
Aqua Tidal Pool
Azure Coast Breeze
Azure Coast Dream
Azure Coastline Calm
Azure Tide Pool