Palette

Azure Coast Dream

Evokes the tranquil depths and frothy waves of a beautiful, clear blue coastal expanse.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0047AB#4682B4#ADD8E6#B0E0E6#F0F8FF

Palette guide

How to use Azure Coast Dream

Overview

The Azure Coast Dream palette evokes the serene depths and gentle froth of a clear blue coastal expanse. It features a range from the deep, anchoring navy of #0047AB, through the calming mid-blues of #4682B4, to the soft, airy aquas of #ADD8E6 and #B0E0E6, culminating in the near-white #F0F8FF. This collection is ideal for designers and developers aiming to create tranquil, reflective, and spacious digital environments. Its balanced cool tones provide a sense of peace and clarity, perfect for applications requiring a sophisticated yet refreshing aesthetic. The palette's versatility allows for striking contrast or subtle, harmonious blending.

Best used for

Luxury travel branding
Relaxation and meditation apps
Coastal home decor websites
Financial services with a trustworthy image
Spa and wellness marketing
Educational content about marine life

Suggested color roles

primary

#0047AB for a strong, trustworthy foundation, ideal for branding elements, main navigation, or important headers.

secondary

#4682B4 offers a supportive, muted blue, excellent for subheadings, background sections, or less critical information.

accent

#ADD8E6 provides a light, airy accent, perfect for subtle highlights, interactive states, or decorative flourishes.

background

#F0F8FF creates an expansive, clean canvas, ensuring content is prominent and the overall feel is light.

text

Use #0047AB or a deep charcoal for body text on #F0F8FF or #B0E0E6 backgrounds for optimal legibility.

Accessibility notes

Ensure #0047AB text on #F0F8FF or #B0E0E6 backgrounds meets WCAG AA contrast ratios.
Avoid using #ADD8E6 or #B0E0E6 for small text on light backgrounds due to potential low contrast.
Use #0047AB or #4682B4 for critical interactive elements to ensure visibility.
For large text, #4682B4 can be used on #F0F8FF, but check contrast carefully.

Recommended combinations

Deep Sea Calm

Excellent for creating depth in UI elements or gradients, moving from deep to light blue.

#0047AB · #4682B4 · #ADD8E6

Frothy Waves

Ideal for light, airy backgrounds or subtle overlays that mimic foam and sky.

#ADD8E6 · #B0E0E6 · #F0F8FF

Coastal Contrast

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

#0047AB · #F0F8FF · #4682B4

CSS variables

:root {
  --azure-coast-dream-1: #0047AB;
  --azure-coast-dream-2: #4682B4;
  --azure-coast-dream-3: #ADD8E6;
  --azure-coast-dream-4: #B0E0E6;
  --azure-coast-dream-5: #F0F8FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "azure-coast-dream": {
        1: "#0047AB",
        2: "#4682B4",
        3: "#ADD8E6",
        4: "#B0E0E6",
        5: "#F0F8FF",
      }
    }
  }
}

Hex values

Color 1#0047AB

Color 2#4682B4

Color 3#ADD8E6

Color 4#B0E0E6

Color 5#F0F8FF

Accessibility

Contrast checker

2.1:1Fail

5.5:1AA

5.9:1AA

7.9:1AAA

2.1:1Fail

2.7:1Fail

2.9:1Fail

3.8:1AA18

5.5:1AA

2.7:1Fail

1.1:1Fail

1.4:1Fail

5.9:1AA

2.9:1Fail

1.1:1Fail

1.3:1Fail

7.9:1AAA

3.8:1AA18

1.4:1Fail

1.3:1Fail

Similar palettes

More like Azure Coast Dream

Overcast Coast Serene

Aqua Marine Vista

Azure Abyss Calm