Back to palettes

Palette

Aegean Sea Serene

Tranquil blues, capturing the peaceful expanse of the Aegean Sea under a clear sky.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Aegean Sea Serene 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 Sea Serene.

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

Data visualization

#3A7CAC#73B1C5#C0DDE8#1F5A7B#5BA3BC

Palette guide

How to use Aegean Sea Serene

Overview

The Aegean Sea Serene palette offers tranquil blues, capturing the peaceful expanse of the Aegean Sea under a clear sky. This harmonious cool collection features a deep teal #1F5A7B, a vibrant ocean blue #3A7CAC, a refreshing cerulean #5BA3BC, a brighter sky blue #73B1C5, and a very pale blue #C0DDE8. It's perfectly suited for designers aiming to create calm, refreshing, and trustworthy digital or print experiences. Developers will find these coherent hex codes useful for building intuitive user interfaces, serene branding, and engaging content that evokes clarity and relaxation.

Best used for

  • Wellness and meditation apps
  • Coastal real estate marketing
  • Eco-friendly product branding
  • Marine biology educational platforms
  • Spa and retreat website design
  • Summer vacation advertisements

Suggested color roles

primary

Use #3A7CAC as a strong primary for main headings or brand elements, symbolizing the deep, clear sea.

secondary

Employ #5BA3BC for subheadings, informational blocks, or secondary buttons, providing a lighter, inviting touch.

accent

Apply #1F5A7B sparingly for impactful calls to action or important details, adding gravitas.

background

Utilize #C0DDE8 for clean, expansive backgrounds, reminiscent of a bright, distant horizon.

text

A deep navy or black on #C0DDE8 ensures readability, while white text contrasts beautifully on #1F5A7B.

Accessibility notes

  • Ensure sufficient contrast for text on #C0DDE8; a dark text color (e.g., #1F5A7B) is recommended.
  • Avoid using #73B1C5 for text on #C0DDE8 as contrast will be too low for readability.
  • White text on #1F5A7B and #3A7CAC should meet WCAG AA contrast requirements.
  • For interactive elements, ensure distinct visual cues beyond color to aid color-blind users.

Recommended combinations

Ocean Depths

For footers, navigation, or areas requiring a sense of depth and stability.

#1F5A7B · #3A7CAC · #5BA3BC

Sky & Shore

Ideal for gradients or large background sections, mimicking a clear sky meeting the water.

#C0DDE8 · #73B1C5 · #5BA3BC

Tranquil Flow

Effective for data visualizations or layered UI components, showing progression.

#3A7CAC · #73B1C5 · #C0DDE8

CSS variables

:root {
  --aegean-sea-serene-1: #3A7CAC;
  --aegean-sea-serene-2: #73B1C5;
  --aegean-sea-serene-3: #C0DDE8;
  --aegean-sea-serene-4: #1F5A7B;
  --aegean-sea-serene-5: #5BA3BC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "aegean-sea-serene": {
        1: "#3A7CAC",
        2: "#73B1C5",
        3: "#C0DDE8",
        4: "#1F5A7B",
        5: "#5BA3BC",
      }
    }
  }
}

Related searches

serene blue color schemecalm ocean palettemediterranean water colorstranquil blue gradientpeaceful sea hues

Palette colors

Hex values

Color 1#3A7CAC
·
Color 2#73B1C5
·
Color 3#C0DDE8
·
Color 4#1F5A7B
·
Color 5#5BA3BC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3.2:1AA18
1.7:1Fail
1.6:1Fail
2
1.9:1Fail
1.7:1Fail
3.1:1AA18
1.2:1Fail
3
3.2:1AA18
1.7:1Fail
5.3:1AA
2:1Fail
4
1.7:1Fail
3.1:1AA18
5.3:1AA
2.6:1Fail
5
1.6:1Fail
1.2:1Fail
2:1Fail
2.6:1Fail

Similar palettes

More like Aegean Sea Serene

View all cool
Aegean Horizon
Aegean Coastline Calm
Ancient Aegean Sea
Azure Coast Serenity
Azure Sky Whisper
Calm Lake Reflections