Palette

Mediterranean Tilework

Crisp blues and whites inspired by the classic beauty of Mediterranean mosaic tiles and sunlit shores.

coolnatural5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#191970#4682B4#6A5ACD#F0F8FF#FFFFFF

Palette guide

How to use Mediterranean Tilework

Overview

The "Mediterranean Tilework" palette is a sophisticated and refreshing collection inspired by classic Mediterranean mosaic tiles and sunlit shores. It features a spectrum of cool blues, from the deep #191970 (Midnight Blue) to the serene #4682B4 (Steel Blue) and elegant #6A5ACD (Slate Blue), perfectly complemented by crisp whites #F0F8FF (Alice Blue) and #FFFFFF (White). This palette is excellent for designers seeking to evoke a sense of cleanliness, tradition, and timeless elegance. It's ideal for projects that require a fresh, airy, yet grounded aesthetic, perfect for architectural visualization, luxury branding, or clean digital interfaces.

Best used for

Luxury travel and hospitality branding
Architectural visualization and renderings
Clean and minimalist website designs
High-end fashion or jewelry e-commerce
Spa and wellness branding
Coastal property development marketing

Suggested color roles

primary

Use #191970 (Midnight Blue) as a strong, sophisticated primary for headers, navigation, or key brand elements, conveying depth and luxury.

secondary

Employ #4682B4 (Steel Blue) for subheadings, active states, or graphic elements, providing a serene contrast and expanding the cool appeal.

accent

Apply #6A5ACD (Slate Blue) sparingly for subtle highlights, interactive elements, or decorative flourishes to add an elegant touch.

background

Utilize #F0F8FF (Alice Blue) or #FFFFFF (White) as a clean, expansive backdrop for main content areas, ensuring excellent readability and an airy feel.

text

For primary body text, use #191970 (Midnight Blue) or black on light backgrounds like #F0F8FF. For headings on darker backgrounds, #F0F8FF or white works well.

Accessibility notes

Ensure #191970 or a dark charcoal has excellent contrast against #F0F8FF or #FFFFFF for all body text (WCAG AAA standard).
The lighter blues (#4682B4, #6A5ACD) may have insufficient contrast for small text on #F0F8FF; reserve them for larger display text or graphics.
Avoid using #6A5ACD as text on #4682B4 for critical information due to potential low contrast and legibility issues.
Prioritize strong contrast for interactive elements against any background, especially when using lighter blues.

Recommended combinations

Classic Mosaic

Ideal for creating a timeless, elegant aesthetic in web layouts, branding, or architectural design with clear visual hierarchy.

#191970 · #4682B4 · #F0F8FF

Serene Shore

Perfect for backgrounds, subtle illustrations, or elements that require a fresh, airy feel with hints of sophisticated color.

#F0F8FF · #6A5ACD · #4682B4

Deep Blue Contrast

Suitable for bold headlines, strong calls to action, or graphical elements that demand attention with crisp contrast.

#191970 · #FFFFFF · #6A5ACD

CSS variables

:root {
  --mediterranean-tilework-1: #191970;
  --mediterranean-tilework-2: #4682B4;
  --mediterranean-tilework-3: #6A5ACD;
  --mediterranean-tilework-4: #F0F8FF;
  --mediterranean-tilework-5: #FFFFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mediterranean-tilework": {
        1: "#191970",
        2: "#4682B4",
        3: "#6A5ACD",
        4: "#F0F8FF",
        5: "#FFFFFF",
      }
    }
  }
}

Hex values

Color 1#191970

Color 2#4682B4

Color 3#6A5ACD

Color 4#F0F8FF

Color 5#FFFFFF

Accessibility

Contrast checker

3.6:1AA18

2.8:1Fail

13.8:1AAA

14.8:1AAA

3.6:1AA18

1.3:1Fail

3.8:1AA18

4.1:1AA18

2.8:1Fail

1.3:1Fail

4.9:1AA

5.3:1AA

13.8:1AAA

3.8:1AA18

4.9:1AA

1.1:1Fail

14.8:1AAA

4.1:1AA18

5.3:1AA

1.1:1Fail

Similar palettes

More like Mediterranean Tilework

View all cool

Aegean Coast Breeze

Mystical Aurora Borealis