Back to palettes

Palette

Mediterranean Coast Breeze

Fresh and invigorating hues that capture the vibrant beauty of the Mediterranean coastline.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#007B83#20B2AA#66CDAA#ADD8E6#87CEEB

Palette guide

How to use Mediterranean Coast Breeze

Overview

The Mediterranean Coast Breeze palette offers fresh and invigorating hues that capture the vibrant beauty of the Mediterranean coastline. This cool collection features a range of blues and greens, from the deep #007B83 (dark cyan) and #20B2AA (light sea green) to the brighter #66CDAA (medium aquamarine) and the airy #ADD8E6 (light blue) and #87CEEB (sky blue). It's perfect for designers and developers aiming to evoke a sense of tranquility, freshness, and natural beauty. This palette lends itself well to creating serene digital interfaces or packaging that feels clean, refreshing, and inspired by the calming influence of the sea.

Best used for

  • Ecotourism and nature-based travel branding
  • Wellness and spa product packaging
  • Marine conservation initiatives and websites
  • Refreshing digital interfaces and apps
  • Summer fashion and swimwear collections
  • Health and beauty brands with natural ingredients

Suggested color roles

primary

Utilize #20B2AA as a vibrant primary for key calls-to-action, main navigation, or prominent branding elements, signaling freshness.

secondary

Employ #007B83 for supporting information, subheadings, or background sections, providing a deeper, grounding cool tone.

accent

Introduce #66CDAA for bright highlights, interactive elements, or subtle design flourishes to add a lively, aquamarine touch.

background

Choose #ADD8E6 for a light, airy background, creating an expansive and tranquil canvas reminiscent of clear skies.

text

For optimal readability, #007B83 provides a strong contrast on lighter backgrounds like #ADD8E6, or use a dark blue (#1C3F4D) for enhanced legibility.

Accessibility notes

  • Ensure sufficient contrast when pairing text with #ADD8E6 or #87CEEB; darker blues or black are recommended.
  • Avoid using #66CDAA for small text on light backgrounds due to potential low contrast.
  • The contrast between #20B2AA and #ADD8E6 is generally good for headings, but verify for body text.
  • Test color pairings for readability, especially for users with color vision deficiencies, as some blue-green combinations can be challenging.

Recommended combinations

Ocean Fresh

Create a clean layout with #ADD8E6 as background, #007B83 for strong text, and #20B2AA for headings or prominent features.

#ADD8E6 · #007B83 · #20B2AA

Tranquil Shore

Apply #87CEEB for card backgrounds, #66CDAA for borders or subtle details, and #20B2AA for interactive elements within the card.

#87CEEB · #66CDAA · #20B2AA

Cool Harmony

Use #ADD8E6 as a light canvas, #007B83 for calls-to-action, and #66CDAA for navigation items or secondary buttons.

#ADD8E6 · #007B83 · #66CDAA

CSS variables

:root {
  --mediterranean-coast-breeze-1: #007B83;
  --mediterranean-coast-breeze-2: #20B2AA;
  --mediterranean-coast-breeze-3: #66CDAA;
  --mediterranean-coast-breeze-4: #ADD8E6;
  --mediterranean-coast-breeze-5: #87CEEB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mediterranean-coast-breeze": {
        1: "#007B83",
        2: "#20B2AA",
        3: "#66CDAA",
        4: "#ADD8E6",
        5: "#87CEEB",
      }
    }
  }
}

Related searches

mediterranean cool palettecoast breeze colors designblue green tranquil schemerefreshing ui ux designsea inspired color palette

Palette colors

Hex values

Color 1#007B83
·
Color 2#20B2AA
·
Color 3#66CDAA
·
Color 4#ADD8E6
·
Color 5#87CEEB
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
2.6:1Fail
3.3:1AA18
2.9:1Fail
2
1.9:1Fail
1.4:1Fail
1.7:1Fail
1.5:1Fail
3
2.6:1Fail
1.4:1Fail
1.3:1Fail
1.1:1Fail
4
3.3:1AA18
1.7:1Fail
1.3:1Fail
1.1:1Fail
5
2.9:1Fail
1.5:1Fail
1.1:1Fail
1.1:1Fail

Similar palettes

More like Mediterranean Coast Breeze

View all cool
Deep Sea Flora Bed
Frosty Winter Glade
Hidden Cove Shimmer
Mediterranean Sea Breeze
Monsoon Canopy Drip
Silent Lake Mist