Palette

Aegean Village Dream

A harmonious progression of blues, capturing the serene beauty of the Greek islands and clear Mediterranean waters.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Aegean Village Dream 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 Village Dream.

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

Data visualization

#ADD8E6#87CEEB#6495ED#4169E1#191970

Palette guide

How to use Aegean Village Dream

Overview

The Aegean Village Dream palette presents a harmonious progression of blues, capturing the serene beauty of the Greek islands and clear Mediterranean waters. This cool and vibrant collection features a light sky blue #ADD8E6, a classic light blue #87CEEB, a royal blue #6495ED, a deeper medium blue #4169E1, and a very dark navy #191970. It is perfectly suited for designers aiming to evoke a sense of calm, endless horizons, and classic Greek charm. Developers will find these versatile hex codes excellent for creating dynamic backgrounds, clear UI elements, and impactful branding related to travel, tranquility, or ocean themes.

Best used for

Greek travel agencies
Coastal resort websites
Marine-themed apps
Summer fashion lookbooks
Educational content about oceans
Digital art with water themes

Suggested color roles

primary

Use #6495ED as a confident primary for main headings or calls to action, symbolizing clear waters.

secondary

Employ #87CEEB for subheadings, borders, or secondary information, offering a lighter, refreshing touch.

accent

Apply #4169E1 for key interactive elements or highlights, providing a noticeable pop of deeper blue.

background

Utilize #ADD8E6 for light, airy backgrounds, reminiscent of a clear sky over the islands.

text

A crisp white works perfectly on #191970, while #191970 or black provides excellent contrast on #ADD8E6.

Accessibility notes

Text in #ADD8E6 on #87CEEB will have poor contrast; use darker text for readability.
Ensure white text on #191970 meets WCAG AA contrast ratios (it should).
Avoid placing light blue text (e.g., #ADD8E6) directly on other light blue backgrounds.
For interactive elements, ensure distinct visual cues beyond color, especially for color-blind users.

Recommended combinations

Deep Horizon

For footer sections or elements requiring significant depth and weight.

#6495ED · #4169E1 · #191970

Sky & Sea

Ideal for hero banners or background gradients, mimicking a clear sky meeting the sea.

#ADD8E6 · #87CEEB · #6495ED

Island View

Effective for creating visual separation and defining distinct content blocks.

#ADD8E6 · #6495ED · #191970

CSS variables

:root {
  --aegean-village-dream-1: #ADD8E6;
  --aegean-village-dream-2: #87CEEB;
  --aegean-village-dream-3: #6495ED;
  --aegean-village-dream-4: #4169E1;
  --aegean-village-dream-5: #191970;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "aegean-village-dream": {
        1: "#ADD8E6",
        2: "#87CEEB",
        3: "#6495ED",
        4: "#4169E1",
        5: "#191970",
      }
    }
  }
}

Hex values

Color 1#ADD8E6

Color 2#87CEEB

Color 3#6495ED

Color 4#4169E1

Color 5#191970

Accessibility

Contrast checker

1.1:1Fail

1.9:1Fail

3.2:1AA18

9.7:1AAA

1.1:1Fail

1.7:1Fail

2.8:1Fail

8.5:1AAA

1.9:1Fail

1.7:1Fail

1.6:1Fail

5:1AA

3.2:1AA18

2.8:1Fail

1.6:1Fail

3.1:1AA18

9.7:1AAA

8.5:1AAA

5:1AA

3.1:1AA18

Similar palettes

More like Aegean Village Dream

View all cool

Aegean Coastline Calm