Back to palettes

Palette

Azure Bay Retreat

A calming gradient of ocean blues, capturing the serenity of a quiet bay at dawn.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Azure Bay Retreat 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 Bay Retreat.

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

Data visualization

#ADD8E6#87CEEB#6A5ACD#4169E1#00008B

Palette guide

How to use Azure Bay Retreat

Overview

The Azure Bay Retreat palette offers a calming gradient of ocean blues, capturing the serenity of a quiet bay at dawn. It features a delicate light blue (#ADD8E6) and a serene light sky blue (#87CEEB), providing an expansive, airy base. A rich slate blue (#6A5ACD) adds depth, transitioning to a vibrant royal blue (#4169E1) and a profound dark blue (#00008B). This palette is exceptionally useful for designers and developers aiming to create projects that exude calm, freshness, and a sense of peaceful openness. From 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 #00008B as a deep, authoritative primary color for foundational elements or significant calls-to-action, conveying stability and trust.

secondary

Employ #4169E1 for secondary headings or important content blocks, adding a vibrant, clear blue hue.

accent

Highlight interactive elements or key information with #6A5ACD to ensure they pop with a sophisticated touch.

background

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

text

For optimal readability, use #00008B or a crisp white on lighter backgrounds, or a light grey on deeper hues.

Accessibility notes

  • Ensure sufficient contrast between #00008B text and #ADD8E6 or #87CEEB backgrounds for WCAG AA compliance.
  • Avoid using #6A5ACD or #4169E1 for small text on #87CEEB backgrounds due to potential readability issues.
  • Test color combinations for users with color vision deficiencies, especially within the blue spectrum.
  • Provide clear visual cues beyond color for interactive states, particularly between #ADD8E6 and #87CEEB.

Recommended combinations

Bay Depth

Creates a deep, stable base with a vibrant accent and serene highlight, excellent for headers or strong brand statements.

#00008B · #4169E1 · #ADD8E6

Serene Gradient

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

#6A5ACD · #87CEEB · #4169E1

Light Horizon

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

#ADD8E6 · #00008B · #6A5ACD

CSS variables

:root {
  --azure-bay-retreat-1: #ADD8E6;
  --azure-bay-retreat-2: #87CEEB;
  --azure-bay-retreat-3: #6A5ACD;
  --azure-bay-retreat-4: #4169E1;
  --azure-bay-retreat-5: #00008B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "azure-bay-retreat": {
        1: "#ADD8E6",
        2: "#87CEEB",
        3: "#6A5ACD",
        4: "#4169E1",
        5: "#00008B",
      }
    }
  }
}

Related searches

azure blue color schemeserene bay palettecalm water hex codespeaceful sky designocean themed aesthetics

Palette colors

Hex values

Color 1#ADD8E6
·
Color 2#87CEEB
·
Color 3#6A5ACD
·
Color 4#4169E1
·
Color 5#00008B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
3.5:1AA18
3.2:1AA18
10:1AAA
2
1.1:1Fail
3:1AA18
2.8:1Fail
8.8:1AAA
3
3.5:1AA18
3:1AA18
1.1:1Fail
2.9:1Fail
4
3.2:1AA18
2.8:1Fail
1.1:1Fail
3.2:1AA18
5
10:1AAA
8.8:1AAA
2.9:1Fail
3.2:1AA18

Similar palettes

More like Azure Bay Retreat

View all cool
Aegean Horizon
Ancient Aegean Sea
Azure Horizon
Cerulean Dream
Coastal Seafoam Dream
Deep Sea Flora Bed