Palette

Aegean Coast Whisper

Gentle hues reflecting the tranquil blues and seafoam greens of a quiet Aegean coastline at dawn.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Aegean Coast Whisper 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 Coast Whisper.

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

Data visualization

#87CEEB#ADD8E6#6495ED#4682B4#5F9EA0

Palette guide

How to use Aegean Coast Whisper

Overview

The Aegean Coast Whisper palette offers gentle hues reflecting the tranquil blues and seafoam greens of a quiet Aegean coastline at dawn. This collection, featuring shades from the soft #ADD8E6 to the deeper #4682B4, is perfect for designs seeking a calm, serene, or minimalist aesthetic. The inviting #87CEEB and grounding #6495ED provide excellent versatility for creating subtle gradients or defining distinct UI elements without harsh contrasts. Designers and developers can leverage this palette for spa and wellness brands, eco-friendly products, or any project that benefits from a soothing, ethereal, and authentic presence, ensuring a calming and memorable user experience.

Best used for

Spa and wellness retreat branding
Eco-friendly product packaging and websites
Minimalist app interfaces for relaxation
Coastal living and interior design
Meditation and mindfulness platforms
Gentle nature photography portfolios

Suggested color roles

primary

Use #4682B4 as a deep, anchoring primary for backgrounds or foundational elements, evoking deep water.

secondary

Apply #6495ED or #87CEEB for content blocks or secondary sections, offering softer blue depth.

accent

Introduce #ADD8E6 as a light, ethereal accent for interactive elements, highlights, or decorative details, mimicking seafoam.

background

The lightest #ADD8E6 provides an excellent clean, airy background, while #87CEEB offers a soft, sky-like base.

text

For lighter backgrounds, use a dark blue like #4682B4 or charcoal. For #4682B4, a crisp white ensures readability.

Accessibility notes

Ensure good contrast for text when using #6495ED or #87CEEB on backgrounds; dark text is often best.
The lightest color, #ADD8E6, offers excellent contrast with the darkest #4682B4 for primary text.
Avoid using #ADD8E6 for small text on #87CEEB; larger headings might work but verify contrast.
Prioritize clear typography and ample white space to enhance readability and maintain the serene aesthetic.

Recommended combinations

Seafoam Gradient

Creates a smooth, tranquil gradient for backgrounds or banners, transitioning from deep water to light seafoam.

#4682B4 · #6495ED · #ADD8E6

Azure Calm

Pairs a soft blue background with a muted green accent, ensuring legibility with dark text for a calming feel.

#87CEEB · #5F9EA0 · #ADD8E6

Whispering Waves

Ideal for creating soft, atmospheric backgrounds or subtle transitions, evoking gentle waves and a peaceful sky.

#6495ED · #87CEEB · #ADD8E6

CSS variables

:root {
  --aegean-coast-whisper-1: #87CEEB;
  --aegean-coast-whisper-2: #ADD8E6;
  --aegean-coast-whisper-3: #6495ED;
  --aegean-coast-whisper-4: #4682B4;
  --aegean-coast-whisper-5: #5F9EA0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "aegean-coast-whisper": {
        1: "#87CEEB",
        2: "#ADD8E6",
        3: "#6495ED",
        4: "#4682B4",
        5: "#5F9EA0",
      }
    }
  }
}

Hex values

Color 1#87CEEB

Color 2#ADD8E6

Color 3#6495ED

Color 4#4682B4

Color 5#5F9EA0

Accessibility

Contrast checker

1.1:1Fail

1.7:1Fail

2.4:1Fail

1.8:1Fail

1.1:1Fail

1.9:1Fail

2.7:1Fail

2:1Fail

1.7:1Fail

1.9:1Fail

1.4:1Fail

1:1Fail

2.4:1Fail

2.7:1Fail

1.4:1Fail

1.3:1Fail

1.8:1Fail

2:1Fail

1:1Fail

1.3:1Fail

Similar palettes

More like Aegean Coast Whisper

Cerulean Coastline Calm