Palette

Aegean Blue Depths

A captivating journey into the deep and luminous blues of the Aegean Sea, sparkling under the Mediterranean sun.

coolenergetic5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000080#0000cd#4169e1#6495ed#87ceeb

Palette guide

How to use Aegean Blue Depths

Overview

The Aegean Blue Depths palette takes designers on a captivating journey into the deep and luminous blues of the Aegean Sea. Featuring shades from the profound #000080 to the airy #87ceeb, this collection is perfect for designs seeking a cool, vibrant, or marine aesthetic. The intense progression through #0000cd, #4169e1, and #6495ed offers incredible depth and versatility for creating captivating visual experiences. Developers can leverage these rich blues for striking digital interfaces, ocean-themed branding, or any project that benefits from a fresh, invigorating, and energetic presence, ensuring a memorable and immersive user experience.

Best used for

Marine conservation and oceanography websites
Travel agencies specializing in Mediterranean cruises
Luxury yacht and boating services branding
Aquatic sports and recreation apps
Summer fashion and swimwear e-commerce
Environmental awareness campaigns

Suggested color roles

primary

Use #000080 as a deep, anchoring primary for backgrounds or foundational elements, evoking the ocean floor.

secondary

Apply #0000cd or #4169e1 for content blocks or secondary sections, offering vibrant depth.

accent

Introduce #87ceeb as a bright, luminous accent for interactive elements, highlights, or a touch of sky-like brilliance.

background

The deepest #000080 offers a truly immersive background, while #6495ed can provide a lighter, more open feel.

text

For dark backgrounds, use a crisp white or very light blue like #87ceeb. For #87ceeb, a dark blue like #000080 ensures readability.

Accessibility notes

Ensure strong contrast for text on dark shades like #000080 and #0000cd; white text is crucial.
When pairing mid-tones like #4169e1 and #6495ed, verify text contrast carefully, especially for smaller fonts.
The lightest color, #87ceeb, offers excellent contrast with the darkest #000080 for primary text.
Use sufficient line height and clear typography to enhance readability within this vibrant blue scheme.

Recommended combinations

Oceanic Gradient

Creates a smooth, deep-to-light gradient for backgrounds or hero sections, mimicking the ocean's depths.

#000080 · #4169E1 · #87CEEB

Sea and Sky

Pairs a vibrant blue with a light accent and crisp white text for a fresh, energetic, and readable design.

#0000CD · #87CEEB · #4169E1

Layered Waves

Ideal for creating layered UI elements or subtle transitions, evoking the movement and depth of ocean waves.

#000080 · #0000CD · #4169E1

CSS variables

:root {
  --aegean-blue-depths-1: #000080;
  --aegean-blue-depths-2: #0000cd;
  --aegean-blue-depths-3: #4169e1;
  --aegean-blue-depths-4: #6495ed;
  --aegean-blue-depths-5: #87ceeb;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "aegean-blue-depths": {
        1: "#000080",
        2: "#0000cd",
        3: "#4169e1",
        4: "#6495ed",
        5: "#87ceeb",
      }
    }
  }
}

Hex values

Color 1#000080

Color 2#0000cd

Color 3#4169e1

Color 4#6495ed

Color 5#87ceeb

Accessibility

Contrast checker

1.4:1Fail

3.3:1AA18

5.4:1AA

9.2:1AAA

1.4:1Fail

2.3:1Fail

3.8:1AA18

6.4:1AA

3.3:1AA18

2.3:1Fail

1.6:1Fail

2.8:1Fail

5.4:1AA

3.8:1AA18

1.6:1Fail

1.7:1Fail

9.2:1AAA

6.4:1AA

2.8:1Fail

1.7:1Fail

Similar palettes

More like Aegean Blue Depths

Abstract Ocean Currents