Back to palettes

Palette

Mediterranean Harbor Charm

A refreshing blend of blues and whites, evoking the serene and picturesque charm of a Mediterranean harbor.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mediterranean Harbor Charm 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 Harbor Charm.

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

Data visualization

#4A6E82#6F8FA1#94B1BF#C8D7DC#F0F2F3

Palette guide

How to use Mediterranean Harbor Charm

Overview

The Mediterranean Harbor Charm palette offers a serene and picturesque blend of cool blues and sophisticated off-whites, perfectly evoking the tranquility of a peaceful harbor. Ranging from the deep, anchoring blue of #4A6E82, through the gentle mid-tones of #6F8FA1 and #94B1BF, to the airy lightness of #C8D7DC and the crisp #F0F2F3, this collection is both refreshing and elegant. Designers can create calming, upscale interfaces, while developers will find these shades ideal for establishing clear visual hierarchies and ensuring a clean, uncluttered user experience across various web and app components.

Best used for

  • High-end travel and hospitality branding
  • Nautical or marine-themed websites
  • Corporate identity with a sophisticated touch
  • Elegant lifestyle blogs and magazines
  • User interfaces requiring a clean, minimalist aesthetic
  • Architectural design portfolios

Suggested color roles

primary

A deep, authoritative blue, #4A6E82 is excellent for main headings, brand logos, or prominent call-to-action buttons, conveying stability.

secondary

A balanced, mid-range blue, #6F8FA1 is suitable for subheadings, navigation links, or secondary information, providing clear readability.

accent

A lighter, refreshing blue, #94B1BF is ideal for interactive elements like buttons, hover states, or subtle graphical accents.

background

A soft, nearly white base, #F0F2F3 offers a clean, expansive canvas, allowing other colors to stand out gracefully.

text

For body text, use a dark grey like #333333 or the primary blue #4A6E82 for optimal contrast and a cohesive look.

Accessibility notes

  • Ensure #94B1BF and #C8D7DC are not used for small text on #F0F2F3 due to potential low contrast.
  • #4A6E82 provides excellent contrast for text on #F0F2F3, making it suitable for primary content.
  • Use #6F8FA1 for larger text elements to maintain readability on lighter backgrounds.
  • Always verify contrast ratios for interactive elements to ensure they meet WCAG guidelines.

Recommended combinations

Deep Harbor

Strong primary blue for headings and buttons on a clean background, with a softer blue for supporting text.

#4A6E82 · #F0F2F3 · #6F8FA1

Coastal Calm

A gentle, layered effect for backgrounds or information panels, creating depth with subtle blue variations.

#6F8FA1 · #C8D7DC · #94B1BF

Clean Navigation

Crisp white background with dark blue navigation items and a lighter blue for active states or selected links.

#F0F2F3 · #4A6E82 · #94B1BF

CSS variables

:root {
  --mediterranean-harbor-charm-1: #4A6E82;
  --mediterranean-harbor-charm-2: #6F8FA1;
  --mediterranean-harbor-charm-3: #94B1BF;
  --mediterranean-harbor-charm-4: #C8D7DC;
  --mediterranean-harbor-charm-5: #F0F2F3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mediterranean-harbor-charm": {
        1: "#4A6E82",
        2: "#6F8FA1",
        3: "#94B1BF",
        4: "#C8D7DC",
        5: "#F0F2F3",
      }
    }
  }
}

Related searches

tranquil blue white palettesophisticated coastal colorsserene harbor color schemeelegant blue grey paletteminimalist nautical design

Palette colors

Hex values

Color 1#4A6E82
·
Color 2#6F8FA1
·
Color 3#94B1BF
·
Color 4#C8D7DC
·
Color 5#F0F2F3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.4:1Fail
3.7:1AA18
4.9:1AA
2
1.6:1Fail
1.5:1Fail
2.3:1Fail
3.1:1AA18
3
2.4:1Fail
1.5:1Fail
1.5:1Fail
2:1Fail
4
3.7:1AA18
2.3:1Fail
1.5:1Fail
1.3:1Fail
5
4.9:1AA
3.1:1AA18
2:1Fail
1.3:1Fail

Similar palettes

More like Mediterranean Harbor Charm

View all cool
Santorini Whitewash Breeze
Seaside Cottage Charm
Aegean Isle Horizon
Arctic Bloom Whisper
Arctic Blossom Chill
Arctic Glacier Edge