Back to palettes

Palette

Santorini Whitewash Breeze

Reflects the crisp white and stunning azure of the Cycladic islands and Aegean sea breezes.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Santorini Whitewash 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 Santorini Whitewash Breeze.

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

Data visualization

#F7F7F2#DCEAF0#B4D6E0#8EBCC9#4A90AD

Palette guide

How to use Santorini Whitewash Breeze

Overview

The Santorini Whitewash Breeze palette captures the serene essence of the Aegean Sea and the iconic Cycladic architecture. This cool, inviting scheme features a range of blues from the softest `#DCEAF0` to the profound `#4A90AD`, perfectly complemented by a crisp, near-white base of `#F7F7F2`. Ideal for conveying tranquility and elegance, it's a versatile choice for digital and print designs aiming for a clean, refreshing aesthetic. The mid-tones like `#B4D6E0` and `#8EBCC9` provide depth and harmony, making it easy to create balanced visual compositions that evoke peaceful coastal vibes.

Best used for

  • Coastal-themed branding and websites
  • Spa and wellness digital experiences
  • Travel agency marketing materials for Mediterranean destinations
  • Interior design mood boards for serene spaces
  • Sustainable or eco-friendly product packaging
  • E-commerce platforms for artisanal goods

Suggested color roles

primary

Use `#4A90AD` as the main brand color for calls to action, prominent headings, or key graphical elements, representing depth and stability.

secondary

Employ `#8EBCC9` for subheadings, active navigation states, or supporting informational graphics, providing a calm yet present visual weight.

accent

Apply `#B4D6E0` for subtle highlights, interactive elements like hover states, or decorative details, adding a delicate touch of color.

background

Utilize `#F7F7F2` as the primary background color to create a clean, expansive canvas, ensuring excellent legibility for darker text and UI components.

text

For primary body text on light backgrounds like `#F7F7F2`, `#4A90AD` offers excellent readability and maintains the palette's tranquil mood. For maximum contrast, consider a dark charcoal or black.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using lighter blues such as `#DCEAF0` for text against `#F7F7F2`.
  • Use `#4A90AD` for body text on `#F7F7F2` to meet WCAG AA standards for contrast, or a darker neutral for smaller font sizes.
  • Be mindful when combining adjacent blues like `#B4D6E0` and `#DCEAF0` as their low contrast might hinder readability for some users.
  • Reserve `#F7F7F2` as a background for primary content areas to maximize legibility of darker text and interactive elements.

Recommended combinations

Aegean Horizon

Ideal for core branding, website hero sections, and elegant digital presentations, evoking vast skies and deep waters.

#F7F7F2 · #DCEAF0 · #4A90AD

Coastal Retreat

Perfect for user interface elements, infographics, or detailed data visualizations, offering clarity and a calming visual hierarchy.

#F7F7F2 · #8EBCC9 · #B4D6E0

Whitewashed Accent

Suitable for subtle decorative elements, hover states, or secondary call-to-action buttons, providing gentle visual feedback.

#F7F7F2 · #4A90AD · #DCEAF0

CSS variables

:root {
  --santorini-whitewash-breeze-1: #F7F7F2;
  --santorini-whitewash-breeze-2: #DCEAF0;
  --santorini-whitewash-breeze-3: #B4D6E0;
  --santorini-whitewash-breeze-4: #8EBCC9;
  --santorini-whitewash-breeze-5: #4A90AD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "santorini-whitewash-breeze": {
        1: "#F7F7F2",
        2: "#DCEAF0",
        3: "#B4D6E0",
        4: "#8EBCC9",
        5: "#4A90AD",
      }
    }
  }
}

Related searches

mediterranean color schemecoastal blue paletteserene web design colorslight blue brandingcalm UI colors

Palette colors

Hex values

Color 1#F7F7F2
·
Color 2#DCEAF0
·
Color 3#B4D6E0
·
Color 4#8EBCC9
·
Color 5#4A90AD
·

Accessibility

Contrast checker

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

Similar palettes

More like Santorini Whitewash Breeze

View all cool
Aegean Sea Serene
Arctic Blossom Chill
Azure Coast Serenity
Coastal Breeze Mist
Coastal Fog Drift
Coastal Horizon Haze