Back to palettes

Palette

Azure Coast Breeze

Light and airy blues reflect the clear skies and gentle winds of a tranquil azure coast.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E0F2F7#B0E0EF#7DD1E0#4CBFD1#2EAEC1

Palette guide

How to use Azure Coast Breeze

Overview

The Azure Coast Breeze palette offers a refreshingly light and airy collection of cool blues, perfect for evoking a sense of tranquility and openness. Inspired by clear skies and gentle coastal winds, this palette transitions smoothly from the softest sky blue, #E0F2F7, through inviting aquas like #B0E0EF and #7DD1E0, to the more vibrant and engaging #4CBFD1 and #2EAEC1. Designers and developers will find these hues ideal for creating clean, modern interfaces, serene branding, or refreshing digital experiences. The inherent coolness of these shades promotes a calm user experience, making it versatile for various applications where a light, oceanic feel is desired.

Best used for

  • Spa and wellness websites or apps
  • Coastal-themed branding and marketing
  • Clean, minimalist UI designs
  • Travel and tourism brochures for beach destinations
  • Educational platforms focusing on nature or science
  • Eco-friendly product packaging

Suggested color roles

primary

Use #4CBFD1 as a primary brand color for its vibrant yet calming presence, suitable for main calls to action or key headers.

secondary

#7DD1E0 provides a balanced secondary shade, excellent for subheadings, active states, or supporting visual elements without overpowering.

accent

#2EAEC1 offers a slightly deeper, more saturated accent for subtle highlights, interactive elements, or small graphic details.

background

#E0F2F7 delivers a pristine, airy background, ensuring content stands out while maintaining a light and spacious feel.

text

Opt for a deep charcoal or near-black on lighter backgrounds like #E0F2F7 for optimal readability, or use #2EAEC1 for headings on very light backgrounds.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using lighter shades like #B0E0EF for text.
  • Pair #E0F2F7 with darker text colors (e.g., #2EAEC1 or black) to meet WCAG AA standards for readability.
  • Avoid placing #B0E0EF text directly on #E0F2F7 backgrounds; their luminance contrast is likely too low.
  • Use #4CBFD1 or #2EAEC1 for interactive elements to provide clear visual cues for users.

Recommended combinations

Ocean Gradient

Ideal for subtle background gradients or layered visual elements that mimic ocean depths.

#E0F2F7 · #7DD1E0 · #2EAEC1

Fresh UI

Perfect for clean user interfaces, using the light tone for backgrounds and deeper blues for interactive elements.

#E0F2F7 · #4CBFD1 · #2EAEC1

Coastal Highlight

Effective for highlighting key information or calls to action against a slightly muted background.

#B0E0EF · #4CBFD1 · #2EAEC1

CSS variables

:root {
  --azure-coast-breeze-1: #E0F2F7;
  --azure-coast-breeze-2: #B0E0EF;
  --azure-coast-breeze-3: #7DD1E0;
  --azure-coast-breeze-4: #4CBFD1;
  --azure-coast-breeze-5: #2EAEC1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "azure-coast-breeze": {
        1: "#E0F2F7",
        2: "#B0E0EF",
        3: "#7DD1E0",
        4: "#4CBFD1",
        5: "#2EAEC1",
      }
    }
  }
}

Related searches

calm blue color schemelight aqua palettecoastal design colorsfresh blue web designtranquil ocean hues

Palette colors

Hex values

Color 1#E0F2F7
·
Color 2#B0E0EF
·
Color 3#7DD1E0
·
Color 4#4CBFD1
·
Color 5#2EAEC1
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.5:1Fail
1.9:1Fail
2.3:1Fail
2
1.2:1Fail
1.2:1Fail
1.5:1Fail
1.9:1Fail
3
1.5:1Fail
1.2:1Fail
1.2:1Fail
1.5:1Fail
4
1.9:1Fail
1.5:1Fail
1.2:1Fail
1.2:1Fail
5
2.3:1Fail
1.9:1Fail
1.5:1Fail
1.2:1Fail

Similar palettes

More like Azure Coast Breeze

View all cool
Azure Coast Serenity
Coastal Breeze
Coastal Breeze Mist
Coastal Breeze Serene
Coastal Cliff Retreat
Coastal Seafoam Spray