Back to palettes

Palette

Mediterranean Azure Dream

Bright and serene blues, reminiscent of the crystal-clear waters and sun-drenched skies of the Mediterranean coast.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mediterranean Azure Dream 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 Azure Dream.

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

Data visualization

#008B8B#4682B4#6A5ACD#4169E1#87CEEB

Palette guide

How to use Mediterranean Azure Dream

Overview

The Mediterranean Azure Dream palette captures the essence of crystal-clear waters and sun-drenched skies with its bright and serene blues. Featuring a range from the deep #008B8B (dark cyan) to the light, airy #87CEEB (sky blue), this collection is perfect for designers and developers aiming to evoke a sense of calm, clarity, and vibrancy. Key colors like #4169E1 (royal blue) provide a strong, energetic anchor, while #4682B4 (steel blue) offers robust support. The inclusion of #6A5ACD (slate blue) adds a touch of sophisticated depth, making this palette versatile for projects requiring a fresh, inviting, and distinctly Mediterranean feel.

Best used for

  • Travel and tourism websites (especially coastal destinations)
  • Coastal resort branding and marketing
  • Summer fashion and apparel collections
  • Aquatic sports or product designs
  • Clean technology interfaces and branding
  • Event branding for outdoor or summer themes

Suggested color roles

primary

Assign #4169E1 as the bold primary for calls-to-action, main navigation, or crucial branding elements, signifying importance and energy.

secondary

Use #4682B4 for secondary buttons, subheadings, or background sections to provide depth and stability without overpowering.

accent

Leverage #008B8B for refreshing highlights, icons, or subtle design flourishes, adding a vibrant touch of the sea.

background

Apply #87CEEB for light, expansive backgrounds, creating an open, airy feel reminiscent of clear skies.

text

For main body text, #6A5ACD offers excellent readability and a sophisticated tone against lighter backgrounds, or use a classic black for maximum contrast.

Accessibility notes

  • Ensure high contrast ratios for text placed on #87CEEB, opting for darker blues or black.
  • Use #4169E1 for interactive elements to ensure visibility and clickable distinction.
  • Avoid placing light text directly on #008B8B unless the contrast is verified (WCAG AA).
  • Consider text size and weight when using medium tones like #6A5ACD to maintain readability.

Recommended combinations

Clear Skies

Ideal for web headers or hero sections, with #87CEEB as background, #4169E1 for prominent titles, and #4682B4 for descriptive text.

#87CEEB · #4169E1 · #4682B4

Deep Waters

Create depth in sections using #4682B4 as a base, #008B8B for vivid accents or icons, and #6A5ACD for sub-elements.

#4682B4 · #008B8B · #6A5ACD

Vibrant Contrast

Use #87CEEB for background, #6A5ACD for body text, and #008B8B for striking buttons or interactive elements.

#87CEEB · #6A5ACD · #008B8B

CSS variables

:root {
  --mediterranean-azure-dream-1: #008B8B;
  --mediterranean-azure-dream-2: #4682B4;
  --mediterranean-azure-dream-3: #6A5ACD;
  --mediterranean-azure-dream-4: #4169E1;
  --mediterranean-azure-dream-5: #87CEEB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mediterranean-azure-dream": {
        1: "#008B8B",
        2: "#4682B4",
        3: "#6A5ACD",
        4: "#4169E1",
        5: "#87CEEB",
      }
    }
  }
}

Related searches

mediterranean blue paletteazure color scheme designclear water colors uiserene blue brandingocean inspired web colors

Palette colors

Hex values

Color 1#008B8B
·
Color 2#4682B4
·
Color 3#6A5ACD
·
Color 4#4169E1
·
Color 5#87CEEB
·

Accessibility

Contrast checker

1
2
3
4
5
1
1:1Fail
1.3:1Fail
1.2:1Fail
2.4:1Fail
2
1:1Fail
1.3:1Fail
1.2:1Fail
2.4:1Fail
3
1.3:1Fail
1.3:1Fail
1.1:1Fail
3:1AA18
4
1.2:1Fail
1.2:1Fail
1.1:1Fail
2.8:1Fail
5
2.4:1Fail
2.4:1Fail
3:1AA18
2.8:1Fail

Similar palettes

More like Mediterranean Azure Dream

View all cool
Azure Coast Breeze
Ceramic Glaze Ocean
Abyssal Blue Descent
Abyssal Current Glide
Aegean Coast Serenity
Aegean Coast Whisper