Back to palettes

Palette

Aegean Coastline Muse

Inspired by the serene blues and muted tones of the Aegean Sea meeting a rocky, ancient coast.

CoolCalm5 colors
More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5C7E9C#8FAEC2#C7D8E2#3B5F7F#A0B3C4

Palette guide

How to use Aegean Coastline Muse

Overview

The Aegean Coastline Muse palette draws inspiration from the serene blues and muted tones of the Aegean Sea meeting a rocky, ancient coast. This cool and sophisticated collection features deep slate blue #3B5F7F, a slightly lighter ocean blue #5C7E9C, a medium azure #8FAEC2, a soft sky blue #A0B3C4, and a very pale grey-blue #C7D8E2. It offers a balanced range for designers seeking to evoke a sense of calm, timelessness, and natural elegance. Developers will find these hex codes versatile for creating harmonious interfaces and branding that feels both ancient and modern.

Best used for

  • Luxury travel branding
  • Historical museum exhibits
  • High-end interior design
  • Corporate websites with a refined aesthetic
  • Fine art photography portfolios
  • Editorial layouts for sophisticated content

Suggested color roles

primary

Utilize #3B5F7F for dominant elements like navigation or key headings, providing a strong, grounded presence.

secondary

Apply #5C7E9C for subheadings, borders, or secondary interactive elements, maintaining depth and sophistication.

accent

Use #8FAEC2 sparingly for calls to action or highlighted features, offering a gentle yet distinct pop.

background

Employ #C7D8E2 for clean, expansive backgrounds, creating a light and airy canvas.

text

For optimal readability, use a dark charcoal like #333333 on light backgrounds or pure white on darker shades like #3B5F7F.

Accessibility notes

  • Ensure sufficient contrast when using #C7D8E2 for text on lighter backgrounds; a dark text color is crucial.
  • The contrast between #A0B3C4 and #C7D8E2 is low; avoid using them for text/background pairs.
  • When using #3B5F7F for backgrounds, white or very light grey text is recommended for WCAG AA compliance.
  • Test color combinations with accessibility tools to confirm readability for all users, especially with mid-tones.

Recommended combinations

Deep Sea & Sky

For a classic, expansive feel in hero sections or primary branding.

#3B5F7F · #8FAEC2 · #C7D8E2

Coastal Stone

Ideal for UI elements that require subtle layering and a natural stone texture.

#5C7E9C · #A0B3C4 · #C7D8E2

Twilight Shore

Effective for navigation or footer sections, providing depth and a calm transition.

#3B5F7F · #5C7E9C · #A0B3C4

CSS variables

:root {
  --aegean-coastline-muse-1: #5C7E9C;
  --aegean-coastline-muse-2: #8FAEC2;
  --aegean-coastline-muse-3: #C7D8E2;
  --aegean-coastline-muse-4: #3B5F7F;
  --aegean-coastline-muse-5: #A0B3C4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "aegean-coastline-muse": {
        1: "#5C7E9C",
        2: "#8FAEC2",
        3: "#C7D8E2",
        4: "#3B5F7F",
        5: "#A0B3C4",
      }
    }
  }
}

Related searches

mediterranean blue palettecalm coastal colorssophisticated blue greytimeless ocean huesancient sea color scheme

Palette colors

Hex values

Color 1#5C7E9C
·
Color 2#8FAEC2
·
Color 3#C7D8E2
·
Color 4#3B5F7F
·
Color 5#A0B3C4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
2.9:1Fail
1.6:1Fail
2:1Fail
2
1.8:1Fail
1.6:1Fail
2.9:1Fail
1.1:1Fail
3
2.9:1Fail
1.6:1Fail
4.6:1AA
1.5:1Fail
4
1.6:1Fail
2.9:1Fail
4.6:1AA
3.1:1AA18
5
2:1Fail
1.1:1Fail
1.5:1Fail
3.1:1AA18

Similar palettes

More like Aegean Coastline Muse

View all Cool
Celestial Ocean Twilight
Indigo Ocean Depth
Moonlit Ocean Glow
Muted Ocean Depth
Raindrop Serenity
Skyward Gaze