Palette

Aegean Breeze Azure

Evoking whitewashed walls, clear turquoise waters, and the warmth of a sun-kissed island afternoon.

vibrantcalm5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F7F5EA#E0EAE9#A2DCE8#358EA6#E0A086

Palette guide

How to use Aegean Breeze Azure

Overview

The Aegean Breeze Azure palette evokes the serene beauty of a sun-kissed Greek island, blending crisp whites with clear turquoise waters and warm terracotta accents. Featuring the airy #F7F5EA and #E0EAE9, alongside the vibrant #A2DCE8 and deep #358EA6, this collection is perfect for designs seeking a calm, refreshing, or Mediterranean aesthetic. The unexpected #E0A086 provides a grounding, earthy contrast, reminiscent of ancient pottery. Designers and developers can leverage this palette for travel brands, wellness products, or any project that benefits from an inviting, tranquil, and authentic presence, ensuring a soothing and memorable user experience.

Best used for

Mediterranean travel and tourism websites
Spa and wellness retreat branding
Coastal living and interior design
Summer fashion and swimwear e-commerce
Organic food and natural product packaging
Clean, refreshing app interfaces

Suggested color roles

primary

Use #F7F5EA as a clean, airy primary for backgrounds or large content areas, evoking whitewashed walls.

secondary

Apply #A2DCE8 or #E0EAE9 for content blocks or secondary sections, offering a subtle, refreshing contrast.

accent

Introduce #E0A086 as a warm, earthy accent for interactive elements, highlights, or decorative details, adding character.

background

The lightest #F7F5EA provides an excellent clean, airy background, while #A2DCE8 offers a soft, watery base.

text

For lighter backgrounds, use a dark blue like #358EA6 or a deep charcoal. For #358EA6, a crisp white ensures readability.

Accessibility notes

Ensure good contrast for text when using #A2DCE8 or #E0A086 on backgrounds; dark text is often best.
The lightest color, #F7F5EA, offers excellent contrast with the darkest #358EA6 for primary text.
Avoid using #E0EAE9 for small text on #F7F5EA; larger headings might work but verify contrast.
Prioritize clear typography and ample white space to enhance readability and maintain the serene aesthetic.

Recommended combinations

Island Bliss

Pairs a crisp white background with a clear turquoise and warm terracotta accent for a fresh, inviting island feel.

#F7F5EA · #A2DCE8 · #E0A086

Deep Azure

Creates a vibrant blue background with a lighter accent and crisp white text for a refreshing and readable design.

#358EA6 · #A2DCE8 · #E0EAE9

Terracotta Coast

Ideal for creating warm, grounding accents or subtle backgrounds, ensuring legibility with dark text.

#E0A086 · #E0EAE9 · #A2DCE8

CSS variables

:root {
  --aegean-breeze-azure-1: #F7F5EA;
  --aegean-breeze-azure-2: #E0EAE9;
  --aegean-breeze-azure-3: #A2DCE8;
  --aegean-breeze-azure-4: #358EA6;
  --aegean-breeze-azure-5: #E0A086;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "aegean-breeze-azure": {
        1: "#F7F5EA",
        2: "#E0EAE9",
        3: "#A2DCE8",
        4: "#358EA6",
        5: "#E0A086",
      }
    }
  }
}

Hex values

Color 1#F7F5EA

Color 2#E0EAE9

Color 3#A2DCE8

Color 4#358EA6

Color 5#E0A086

Accessibility

Contrast checker

1.1:1Fail

1.4:1Fail

3.4:1AA18

2:1Fail

1.1:1Fail

1.2:1Fail

3.1:1AA18

1.8:1Fail

1.4:1Fail

1.2:1Fail

2.5:1Fail

1.5:1Fail

3.4:1AA18

3.1:1AA18

2.5:1Fail

1.7:1Fail

2:1Fail

1.8:1Fail

1.5:1Fail

1.7:1Fail

Similar palettes

More like Aegean Breeze Azure

View all vibrant

Coral Reef Dawn

Matcha Bloom Zen

Aegean Coastline Bliss

Aegean Horizon

Aegean Sea Serene

Ancient Aegean Sea