Back to palettes

Palette

Azure Coast Breeze

The crisp, clean feeling of a breezy day by the azure coast, blending sky and sea with a touch of sand.

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

#007FFF#87CEEB#B0E0E6#F5F5DC#D3D3D3

Palette guide

How to use Azure Coast Breeze

Overview

The Azure Coast Breeze palette evokes the crisp, clean feeling of a breezy day by the azure coast, blending sky and sea with a touch of sand. It features a vibrant azure (#007FFF) and a serene light sky blue (#87CEEB), providing energetic clarity. A delicate pale turquoise (#B0E0E6) adds a softer touch, while a very light beige (#F5F5DC) provides an expansive, airy base. A subtle light grey (#D3D3D3) offers a grounding, neutral accent. This palette is exceptionally useful for designers and developers aiming to create projects that exude calm, freshness, and a sense of peaceful openness. From coastal travel and hospitality branding to refreshing website designs and tranquil digital artwork, these hex codes offer a versatile range for visually compelling experiences that inspire relaxation.

Best used for

  • Coastal travel and tourism branding
  • Wellness and spa retreat marketing
  • Refreshing website and app design
  • Ocean-themed digital art and illustrations
  • Serene interior design concepts
  • Environmental conservation campaigns

Suggested color roles

primary

Utilize #007FFF as a vibrant primary color for foundational elements or significant calls-to-action, conveying clarity and openness.

secondary

Employ #87CEEB for secondary headings or important content blocks, adding a serene, trustworthy blue hue.

accent

Highlight interactive elements or key information with #B0E0E6 to ensure they pop with gentle yet effective appeal.

background

A light, expansive background of #F5F5DC creates a clean, serene canvas, allowing darker elements to stand out beautifully.

text

For optimal readability, use a deep navy or charcoal on lighter backgrounds, or a crisp white on #007FFF.

Accessibility notes

  • Ensure sufficient contrast between dark text (e.g., navy) and #F5F5DC or #D3D3D3 backgrounds for WCAG AA compliance.
  • Avoid using #B0E0E6 or #87CEEB for small text on #F5F5DC backgrounds due to potential readability issues.
  • Test color combinations for users with color vision deficiencies, especially within the blue-grey spectrum.
  • Provide clear visual cues beyond color for interactive states, particularly between #87CEEB and #B0E0E6.

Recommended combinations

Coast Clarity

Creates a vibrant, clear base with a soft highlight, excellent for headers, navigation, or refreshing brand statements.

#007FFF · #87CEEB · #F5F5DC

Breezy Flow

Ideal for subtle background gradients, tranquil content blocks, or graphic elements that evoke calm waters and sand.

#B0E0E6 · #D3D3D3 · #87CEEB

Light Horizon

Use for a light, expansive background with vibrant text and a gentle supporting color, suitable for content cards or alerts.

#F5F5DC · #007FFF · #B0E0E6

CSS variables

:root {
  --azure-coast-breeze-2-1: #007FFF;
  --azure-coast-breeze-2-2: #87CEEB;
  --azure-coast-breeze-2-3: #B0E0E6;
  --azure-coast-breeze-2-4: #F5F5DC;
  --azure-coast-breeze-2-5: #D3D3D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "azure-coast-breeze-2": {
        1: "#007FFF",
        2: "#87CEEB",
        3: "#B0E0E6",
        4: "#F5F5DC",
        5: "#D3D3D3",
      }
    }
  }
}

Related searches

azure blue color schemecoastal breeze paletterefreshing blue hex codescalm water designbeach aesthetic colors

Palette colors

Hex values

Color 1#007FFF
·
Color 2#87CEEB
·
Color 3#B0E0E6
·
Color 4#F5F5DC
·
Color 5#D3D3D3
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
2.7:1Fail
3.5:1AA18
2.6:1Fail
2
2.2:1Fail
1.2:1Fail
1.6:1Fail
1.2:1Fail
3
2.7:1Fail
1.2:1Fail
1.3:1Fail
1:1Fail
4
3.5:1AA18
1.6:1Fail
1.3:1Fail
1.4:1Fail
5
2.6:1Fail
1.2:1Fail
1:1Fail
1.4:1Fail

Similar palettes

More like Azure Coast Breeze

View all cool
Cerulean Coast Dream
Coastal Breeze Hues
Mediterranean Sea Breeze
Aegean Coastline Calm
Aqua Marine Vista
Aqua Tidal Pool