Palette

Aegean Coast Breeze

Reflects the stunning, crystal-clear blue waters and white villages of the Mediterranean coast.

coolnatural5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2B6D7A#4BA1B3#7ECEDA#B0E3ED#D8F2F5

Palette guide

How to use Aegean Coast Breeze

Overview

The Aegean Coast Breeze palette reflects the stunning, crystal-clear blue waters and white villages of the Mediterranean coast. This collection, featuring shades from the deep #2B6D7A to the airy #D8F2F5, is perfect for designs seeking a cool, tranquil, or marine aesthetic. The intense progression through #4BA1B3, #7ECEDA, and #B0E3ED offers incredible depth and versatility for creating captivating visual experiences. Developers can leverage these refreshing blues for striking digital interfaces, travel branding, or any project that benefits from a fresh, invigorating, and energetic presence, ensuring a memorable and immersive user experience.

Best used for

Coastal travel and tourism websites
Marine conservation and oceanography branding
Spa and wellness industry designs
Summer fashion and swimwear e-commerce
Clean, modern app interfaces
Environmental awareness campaigns

Suggested color roles

primary

Use #2B6D7A as a deep, anchoring primary for backgrounds or foundational elements, evoking the ocean's depths.

secondary

Apply #4BA1B3 or #7ECEDA for content blocks or secondary sections, offering vibrant depth and clarity.

accent

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

background

The lightest #D8F2F5 provides an excellent clean, airy background, while #2B6D7A offers a profound dark base.

text

For dark backgrounds, use a crisp white or very light blue like #D8F2F5. For #D8F2F5, a dark blue like #2B6D7A ensures readability.

Accessibility notes

Ensure strong contrast for text on dark shades like #2B6D7A and #4BA1B3; white text is crucial.
When pairing mid-tones like #7ECEDA and #B0E3ED, verify text contrast carefully, especially for smaller fonts.
The lightest color, #D8F2F5, offers excellent contrast with the darkest #2B6D7A for primary text.
Use sufficient line height and clear typography to enhance readability within this cool, refreshing blue scheme.

Recommended combinations

Sea Gradient

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

#2B6D7A · #7ECEDA · #D8F2F5

Azure Clarity

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

#4BA1B3 · #D8F2F5 · #7ECEDA

Layered Water

Ideal for creating layered UI elements or subtle transitions, evoking the movement and clarity of water.

#2B6D7A · #4BA1B3 · #7ECEDA

CSS variables

:root {
  --aegean-coast-breeze-1: #2B6D7A;
  --aegean-coast-breeze-2: #4BA1B3;
  --aegean-coast-breeze-3: #7ECEDA;
  --aegean-coast-breeze-4: #B0E3ED;
  --aegean-coast-breeze-5: #D8F2F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "aegean-coast-breeze": {
        1: "#2B6D7A",
        2: "#4BA1B3",
        3: "#7ECEDA",
        4: "#B0E3ED",
        5: "#D8F2F5",
      }
    }
  }
}

Hex values

Color 1#2B6D7A

Color 2#4BA1B3

Color 3#7ECEDA

Color 4#B0E3ED

Color 5#D8F2F5

Accessibility

Contrast checker

2:1Fail

3.3:1AA18

4.2:1AA18

5:1AA

2:1Fail

1.7:1Fail

2.1:1Fail

2.5:1Fail

3.3:1AA18

1.7:1Fail

1.3:1Fail

1.5:1Fail

4.2:1AA18

2.1:1Fail

1.3:1Fail

1.2:1Fail

5:1AA

2.5:1Fail

1.5:1Fail

1.2:1Fail

Similar palettes

More like Aegean Coast Breeze

View all cool

Coastal Seagrass Whisper

Mediterranean Tilework