Back to palettes

Palette

Mediterranean Sea Breeze

Cool, crisp blues and greens that capture the refreshing feeling of a Mediterranean sea breeze.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#52B2BF#98D0D6#C4E2E4#2F7C85#72AECB

Palette guide

How to use Mediterranean Sea Breeze

Overview

The Mediterranean Sea Breeze palette encapsulates the refreshing and tranquil feeling of a cool ocean gust. This collection features crisp blues and greens, ranging from the deep, grounding teal of #2F7C85, through the vibrant #52B2BF and serene #72AECB, to the lighter, airy #98D0D6 and #C4E2E4. It's a versatile palette for creating designs that evoke clarity, calmness, and a touch of invigorating freshness. Designers can build sophisticated and refreshing interfaces, while developers will appreciate the distinct yet harmonious shades for establishing clear visual hierarchy and an engaging user experience across web and app components.

Best used for

  • Coastal lifestyle brands and resorts
  • Water-related sports and activities websites
  • Environmental and conservation organizations
  • Health and wellness apps focused on tranquility
  • Refreshing product packaging (e.g., drinks, toiletries)
  • Digital interfaces needing a clean, modern look

Suggested color roles

primary

A deep, authoritative teal, #2F7C85 is perfect for main headings, brand logos, or prominent call-to-action buttons, conveying depth and reliability.

secondary

A vibrant, refreshing blue-green, #52B2BF is excellent for subheadings, navigation links, or important data visualizations, providing clear readability.

accent

A softer, calming blue, #72AECB is ideal for interactive elements like hover states, progress indicators, or subtle graphical highlights.

background

A very light, almost white blue-green, #C4E2E4 provides a crisp, expansive canvas, enhancing the palette's refreshing and open feel.

text

Use the darkest teal, #2F7C85, for body text on the light background #C4E2E4 to ensure optimal contrast and legibility.

Accessibility notes

  • Ensure #98D0D6 is not used for small text on #C4E2E4 due to potential low contrast.
  • #2F7C85 and #52B2BF provide excellent contrast for text on #C4E2E4.
  • For interactive elements, use #52B2BF or #72AECB to ensure they are easily distinguishable.
  • Always check WCAG guidelines for color combinations, especially for text and UI elements.

Recommended combinations

Deep Ocean

Strong teal for headings on a light blue-green background, with a vibrant blue-green for supporting text or links.

#2F7C85 · #C4E2E4 · #52B2BF

Breeze Gradient

Create a subtle, atmospheric background gradient or layered sections, evoking depth and openness.

#52B2BF · #72AECB · #98D0D6

Refreshing UI

Light background with dark teal text, accented by a calming blue for interactive elements or visual cues.

#C4E2E4 · #2F7C85 · #72AECB

CSS variables

:root {
  --mediterranean-sea-breeze-1: #52B2BF;
  --mediterranean-sea-breeze-2: #98D0D6;
  --mediterranean-sea-breeze-3: #C4E2E4;
  --mediterranean-sea-breeze-4: #2F7C85;
  --mediterranean-sea-breeze-5: #72AECB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mediterranean-sea-breeze": {
        1: "#52B2BF",
        2: "#98D0D6",
        3: "#C4E2E4",
        4: "#2F7C85",
        5: "#72AECB",
      }
    }
  }
}

Related searches

sea breeze color palettetranquil blue green schemerefreshing web design colorscoastal teal palettemodern ocean hues

Palette colors

Hex values

Color 1#52B2BF
·
Color 2#98D0D6
·
Color 3#C4E2E4
·
Color 4#2F7C85
·
Color 5#72AECB
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
1.8:1Fail
2:1Fail
1:1Fail
2
1.5:1Fail
1.2:1Fail
2.8:1Fail
1.4:1Fail
3
1.8:1Fail
1.2:1Fail
3.5:1AA18
1.8:1Fail
4
2:1Fail
2.8:1Fail
3.5:1AA18
2:1Fail
5
1:1Fail
1.4:1Fail
1.8:1Fail
2:1Fail

Similar palettes

More like Mediterranean Sea Breeze

View all cool
Azure Coast Breeze
Coastal Seafoam Dream
Crystal Clear Lagoon
Mediterranean Coast Breeze
Aegean Coastline Calm
Aegean Horizon