Back to palettes

Palette

Azure Coastline Calm

Tranquil blues echoing the clear, sparkling waters and skies of a peaceful azure coast.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Azure Coastline Calm 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 Coastline Calm.

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

Data visualization

#87CEEB#6495ED#4169E1#1E90FF#00BFFF

Palette guide

How to use Azure Coastline Calm

Overview

The Azure Coastline Calm palette captures the essence of tranquil blues, mirroring the clear, sparkling waters and skies of a peaceful azure coast. This collection spans from the vibrant sky blue of #87CEEB, through the classic blues of #6495ED and #4169E1, to the deeper, more intense #1E90FF and #00BFFF. Designers and developers will find these hues highly versatile for creating engaging yet soothing digital experiences. The palette's strong blue presence evokes trust, reliability, and serenity, making it suitable for a wide array of applications that aim for a refreshing and professional aesthetic.

Best used for

  • Maritime industry branding
  • Weather forecasting apps
  • Educational platforms on geography
  • Technology company websites (trustworthy)
  • Sports and outdoor activity brands
  • Government or public service interfaces

Suggested color roles

primary

#1E90FF serves as a dynamic and authoritative primary color, excellent for main calls to action, brand logos, or key interactive elements.

secondary

#4169E1 provides a slightly deeper, reliable secondary shade, suitable for subheadings, navigation, or supporting data.

accent

#00BFFF offers a bright, inviting accent, perfect for hover states, subtle highlights, or small graphic details.

background

#87CEEB creates a light, expansive backdrop, ensuring content clarity while maintaining the palette's calm essence.

text

Use a very dark blue like #1E90FF or black for body text on #87CEEB or #6495ED backgrounds for optimal legibility.

Accessibility notes

  • Ensure #1E90FF text on #87CEEB backgrounds meets WCAG AA contrast standards.
  • Avoid using #87CEEB for small text on any other palette color as contrast may be insufficient.
  • Use #1E90FF or #4169E1 for critical interactive elements to ensure clear visibility.
  • For large text, #6495ED on #87CEEB can work, but always verify contrast ratios.

Recommended combinations

Sky & Sea

Creates a gentle gradient from light sky to deep ocean, ideal for backgrounds or headers.

#87CEEB · #6495ED · #1E90FF

Vibrant UI

Perfect for clean user interfaces, using the light tone for backgrounds and vibrant blues for interaction.

#87CEEB · #1E90FF · #00BFFF

Calm Contrast

A balanced combination for clear hierarchy, with a strong primary, light background, and supportive secondary.

#1E90FF · #87CEEB · #4169E1

CSS variables

:root {
  --azure-coastline-calm-1: #87CEEB;
  --azure-coastline-calm-2: #6495ED;
  --azure-coastline-calm-3: #4169E1;
  --azure-coastline-calm-4: #1E90FF;
  --azure-coastline-calm-5: #00BFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "azure-coastline-calm": {
        1: "#87CEEB",
        2: "#6495ED",
        3: "#4169E1",
        4: "#1E90FF",
        5: "#00BFFF",
      }
    }
  }
}

Related searches

calm blue paletteazure seaside colorstranquil blue web designdeep sky blue schemeoceanic blue brand identity

Palette colors

Hex values

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

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.8:1Fail
1.9:1Fail
1.2:1Fail
2
1.7:1Fail
1.6:1Fail
1.1:1Fail
1.4:1Fail
3
2.8:1Fail
1.6:1Fail
1.5:1Fail
2.3:1Fail
4
1.9:1Fail
1.1:1Fail
1.5:1Fail
1.5:1Fail
5
1.2:1Fail
1.4:1Fail
2.3:1Fail
1.5:1Fail

Similar palettes

More like Azure Coastline Calm

View all cool
Misty Coastal Cliffs
Seaside Dusk Dream
Aegean Coastline Calm
Azure Abyss Calm
Azure Coast Dream
Azure Coast Serenity