Palette

Mediterranean Harbor Day

Bright and airy, reminiscent of a peaceful Mediterranean harbor under clear skies.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#41606D#6792A6#ADC7D8#D8E5F0#F3F7F8

Palette guide

How to use Mediterranean Harbor Day

Overview

The Mediterranean Harbor Day palette captures the bright, airy essence of a peaceful harbor under clear skies. This collection transitions from the deep, grounding blue-grey of #41606D, through the serene mid-tones of #6792A6 and #ADC7D8, to the luminous, near-white #D8E5F0 and #F3F7F8. It offers a refreshing and calming aesthetic, perfect for designs seeking a sense of clarity and openness. Designers will find this palette excellent for creating tranquil and professional environments, while developers can utilize its subtle progression of cool tones to build intuitive interfaces with clear visual hierarchy and a sophisticated feel.

Best used for

Corporate websites needing a calm, professional look
Spa and wellness applications
Nautical-themed lifestyle brands
Photography portfolios (especially landscape/travel)
Clean, minimalist UI designs
Real estate websites for coastal properties

Suggested color roles

primary

A deep, anchoring blue-grey, #41606D is suitable for main headings, brand logos, or primary call-to-action buttons, conveying professionalism.

secondary

A balanced, mid-tone blue, #6792A6 is ideal for subheadings, navigation links, or important data points, ensuring good readability.

accent

A softer, airy blue, #ADC7D8 is perfect for interactive elements like hover states, progress indicators, or subtle graphical highlights.

background

A very light, almost white base, #F3F7F8 provides a crisp, expansive canvas, enhancing the palette's bright and open feel.

text

Use a dark charcoal like #2C3E50 or the primary blue-grey #41606D for body text on light backgrounds to ensure optimal readability.

Accessibility notes

Ensure sufficient contrast for any text placed on #D8E5F0 or #F3F7F8, especially with lighter blues.
#41606D offers excellent contrast against #F3F7F8, making it a reliable choice for primary text.
Avoid using #ADC7D8 or #D8E5F0 for small body text when placed on the background #F3F7F8.
For interactive elements, use #6792A6 or #41606D to ensure discoverability and accessibility.

Recommended combinations

Clear Sky

Dark blue-grey for prominent text on a light background, with a mid-blue for supporting elements or links.

#41606D · #F3F7F8 · #6792A6

Horizon Gradient

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

#6792A6 · #ADC7D8 · #D8E5F0

Nautical Touch

A clean white canvas with strong primary text and a lighter blue for interactive elements or visual cues.

#F3F7F8 · #41606D · #ADC7D8

CSS variables

:root {
  --mediterranean-harbor-day-1: #41606D;
  --mediterranean-harbor-day-2: #6792A6;
  --mediterranean-harbor-day-3: #ADC7D8;
  --mediterranean-harbor-day-4: #D8E5F0;
  --mediterranean-harbor-day-5: #F3F7F8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mediterranean-harbor-day": {
        1: "#41606D",
        2: "#6792A6",
        3: "#ADC7D8",
        4: "#D8E5F0",
        5: "#F3F7F8",
      }
    }
  }
}

Hex values

Color 1#41606D

Color 2#6792A6

Color 3#ADC7D8

Color 4#D8E5F0

Color 5#F3F7F8

Accessibility

Contrast checker

2:1Fail

3.8:1AA18

5.3:1AA

6.2:1AA

2:1Fail

1.9:1Fail

2.6:1Fail

3.1:1AA18

3.8:1AA18

1.9:1Fail

1.4:1Fail

1.6:1Fail

5.3:1AA

2.6:1Fail

1.4:1Fail

1.2:1Fail

6.2:1AA

3.1:1AA18

1.6:1Fail

1.2:1Fail

Similar palettes

More like Mediterranean Harbor Day

View all cool

Azure Coast Serenity

Coastal Breeze Mist

Coastal Seafoam Spray

Ocean Driftwood Calm

Ocean Spray Whispers

Seagull Sky Gaze