Back to palettes

Palette

Aegean Coastline Calm

Captures the serene blues and muted whites of the Greek islands at sunrise.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#EAF4F4#C6DDE1#9EC8D0#7AB0BE#5E98AE

Palette guide

How to use Aegean Coastline Calm

Overview

The Aegean Coastline Calm palette evokes the serene blues and muted whites of Greek islands at sunrise. This cool-toned collection is perfect for projects aiming for tranquility and a refreshing feel. Featuring light aqua #EAF4F4, soft seafoam #C6DDE1, tranquil turquoise #9EC8D0, a deeper ocean blue #7AB0BE, and a rich teal #5E98AE, it provides a harmonious gradient. Designers can leverage these shades to create a peaceful atmosphere, while developers will find the distinct hex codes easy to implement for UI elements, backgrounds, and subtle branding. It's ideal for conveying openness and relaxation.

Best used for

  • Spa and wellness branding
  • Travel agency websites (especially Greek islands)
  • Coastal-themed interior design mockups
  • Relaxation app interfaces
  • Children's book illustrations
  • Nature photography portfolios

Suggested color roles

primary

Use #7AB0BE as the dominant color for main headings or large sections, embodying the clear Aegean Sea.

secondary

Employ #9EC8D0 for supporting elements like subheadings or secondary buttons, offering a slightly lighter contrast.

accent

Apply #5E98AE sparingly for calls to action or key interactive elements to draw attention with its deeper hue.

background

Utilize #EAF4F4 for clean, airy backgrounds, reminiscent of a bright sky or whitewashed walls.

text

Pair with a dark charcoal like #333333 on #EAF4F4, or a crisp white on #5E98AE for readability.

Accessibility notes

  • Ensure sufficient contrast between #5E98AE and lighter text colors like #EAF4F4 (likely fails, use white).
  • Text set in #9EC8D0 against #C6DDE1 will likely not meet WCAG AA standards; opt for darker text.
  • For backgrounds using #EAF4F4, use dark text like black or a very dark grey for optimal readability.
  • Consider providing users with a high-contrast mode if using multiple light blues for interactive elements.

Recommended combinations

Coastal Horizon

For headers or hero sections, blending sky, sea, and deep ocean.

#EAF4F4 · #7AB0BE · #5E98AE

Gentle Waves

Ideal for gradients or layered elements, offering smooth transitions.

#C6DDE1 · #9EC8D0 · #7AB0BE

Sunrise Mist

Use for subtle backgrounds or delicate UI components, creating an ethereal feel.

#EAF4F4 · #C6DDE1 · #9EC8D0

CSS variables

:root {
  --aegean-coastline-calm-1: #EAF4F4;
  --aegean-coastline-calm-2: #C6DDE1;
  --aegean-coastline-calm-3: #9EC8D0;
  --aegean-coastline-calm-4: #7AB0BE;
  --aegean-coastline-calm-5: #5E98AE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "aegean-coastline-calm": {
        1: "#EAF4F4",
        2: "#C6DDE1",
        3: "#9EC8D0",
        4: "#7AB0BE",
        5: "#5E98AE",
      }
    }
  }
}

Related searches

calm blue color schemeaegean sea palettegreek island colorstranquil cool huessunrise ocean palette

Palette colors

Hex values

Color 1#EAF4F4
·
Color 2#C6DDE1
·
Color 3#9EC8D0
·
Color 4#7AB0BE
·
Color 5#5E98AE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.6:1Fail
2.1:1Fail
2.8:1Fail
2
1.3:1Fail
1.3:1Fail
1.7:1Fail
2.3:1Fail
3
1.6:1Fail
1.3:1Fail
1.3:1Fail
1.8:1Fail
4
2.1:1Fail
1.7:1Fail
1.3:1Fail
1.3:1Fail
5
2.8:1Fail
2.3:1Fail
1.8:1Fail
1.3:1Fail

Similar palettes

More like Aegean Coastline Calm

View all cool
Morning Coastal Bluff
Aegean Horizon
Aegean Sea Serene
Aegean Village Dream
Azure Coastline Calm
Coastal Breeze Hues