Palette

Aegean Isle Horizon

Serene blues and whites reflecting the iconic beauty of the Greek Aegean Sea and island architecture.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Aegean Isle Horizon 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 Isle Horizon.

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

Data visualization

#F0F8FF#ADD8E6#6495ED#4169E1#A9A9A9

Palette guide

How to use Aegean Isle Horizon

Overview

The Aegean Isle Horizon palette captures the serene blues and crisp whites reflecting the iconic beauty of the Greek Aegean Sea and island architecture. This refreshing collection features a pure white #F0F8FF, a light sky blue #ADD8E6, a royal blue #6495ED, a deeper medium blue #4169E1, and a cool grey #A9A9A9. It's perfect for designers aiming to evoke a sense of calm, cleanliness, and classic Mediterranean charm. Developers will find these versatile hex codes excellent for creating airy interfaces, striking branding, and content that conveys clarity and tranquility.

Best used for

Greek island travel blogs
Minimalist website designs
Coastal home decor brands
Clean tech interfaces
Summer resort branding
Photography portfolios (light & airy)

Suggested color roles

primary

Use #6495ED as a vibrant primary for main calls to action or key information, symbolizing the clear sea.

secondary

Employ #ADD8E6 for secondary backgrounds or subtle design elements, providing a soft, open feel.

accent

Apply #4169E1 sparingly for impactful highlights or important interactive elements, adding depth.

background

Utilize #F0F8FF for immaculate, spacious backgrounds, echoing whitewashed island buildings.

text

A strong contrast is achieved with black or very dark grey (e.g., #333333) on #F0F8FF, or white text on #4169E1.

Accessibility notes

Text in #ADD8E6 on #F0F8FF will fail contrast standards; always use dark text on light backgrounds.
Ensure sufficient contrast for #A9A9A9 when used for text against light blues like #ADD8E6.
White text on #4169E1 should meet WCAG AA; verify with an accessibility checker.
Provide clear visual focus indicators for interactive elements, especially if using similar light blues.

Recommended combinations

Island Whiteout

For clean, minimalist layouts, blending bright white with subtle cool tones.

#F0F8FF · #ADD8E6 · #A9A9A9

Deep Sea Contrast

Ideal for hero sections, showcasing a striking contrast of deep blues against white.

#F0F8FF · #6495ED · #4169E1

Coastal Path

Effective for navigation bars or footers, offering a balanced cool scheme.

#ADD8E6 · #A9A9A9 · #6495ED

CSS variables

:root {
  --aegean-isle-horizon-1: #F0F8FF;
  --aegean-isle-horizon-2: #ADD8E6;
  --aegean-isle-horizon-3: #6495ED;
  --aegean-isle-horizon-4: #4169E1;
  --aegean-isle-horizon-5: #A9A9A9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "aegean-isle-horizon": {
        1: "#F0F8FF",
        2: "#ADD8E6",
        3: "#6495ED",
        4: "#4169E1",
        5: "#A9A9A9",
      }
    }
  }
}

Hex values

Color 1#F0F8FF

Color 2#ADD8E6

Color 3#6495ED

Color 4#4169E1

Color 5#A9A9A9

Accessibility

Contrast checker

1.4:1Fail

2.8:1Fail

4.5:1AA

2.2:1Fail

1.4:1Fail

1.9:1Fail

3.2:1AA18

1.5:1Fail

2.8:1Fail

1.9:1Fail

1.6:1Fail

1.3:1Fail

4.5:1AA

3.2:1AA18

1.6:1Fail

2.1:1Fail

2.2:1Fail

1.5:1Fail

1.3:1Fail

2.1:1Fail

Similar palettes

More like Aegean Isle Horizon

View all cool

Arctic Glacier Melt

Azure Coast Serenity

Calm Lake Reflections

Coastal Breeze Mist

Coastal Cliff Retreat

Coastal Fog Drift