Palette

Aegean Horizon

Serene and expansive, like the endless blue skies meeting the deep waters of the Aegean Sea.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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 Horizon

Overview

The Aegean Horizon palette is serene and expansive, like the endless blue skies meeting the deep waters of the Aegean Sea. 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 provides a beautiful gradient from light to deep, perfect for designers aiming to capture the essence of open water and clear skies. Developers will find these distinct hex codes excellent for creating dynamic backgrounds, clear UI elements, and impactful branding related to travel or tranquility.

Best used for

Travel and tourism websites
Ocean conservation initiatives
Marine-themed product design
Educational content about the sea
Summer fashion branding
Digital art and illustration

Suggested color roles

primary

Use #6495ED as a confident primary color for headings or main calls to action, symbolizing depth and clarity.

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 horizon.

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 Ocean

For footer sections or elements requiring significant depth and weight.

#6495ED · #4169E1 · #191970

Sky Gradient

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

#ADD8E6 · #87CEEB · #6495ED

Horizon Line

Effective for creating visual separation and defining distinct content blocks.

#ADD8E6 · #6495ED · #191970

CSS variables

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

Tailwind config

theme: {
  extend: {
    colors: {
      "aegean-horizon": {
        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 Horizon

View all cool

Aegean Sea Serene

Aegean Coastline Calm