Back to palettes

Palette

Mediterranean Coastal Tile

Bright, refreshing blues reminiscent of sun-drenched coastal towns and patterned ceramic tiles.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#427AA1#76A2BB#ACCBE1#C4DEEA#E0EDF5

Palette guide

How to use Mediterranean Coastal Tile

Overview

The Mediterranean Coastal Tile palette offers a refreshing gradient of blues, perfect for evoking a serene, sun-drenched seaside atmosphere. Featuring deep ocean tones like #427AA1, through tranquil mid-blues such as #76A2BB and #ACCBE1, to airy light shades like #C4DEEA and #E0EDF5, this collection is ideal for capturing the essence of patterned ceramic tiles and clear waters. Designers can leverage its cool harmony for a cohesive visual experience, while developers will find these distinct shades easy to implement for UI elements that require clear visual hierarchy and a calming aesthetic.

Best used for

  • Coastal-themed websites and applications
  • Spa and wellness branding
  • Summer product packaging and marketing
  • Travel agency promotional materials
  • Interior design inspiration for bathrooms or kitchens
  • Children's book illustrations with a water theme

Suggested color roles

primary

Use #427AA1 for strong brand elements, primary call-to-action buttons, or main headings to ground the design with a deep, authoritative blue.

secondary

Ideal for subheadings, navigation links, or prominent data visualizations, #76A2BB offers a softer yet still impactful presence.

accent

Perfect for interactive elements like hover states, progress bars, or subtle highlights that need to pop without overwhelming, use #C4DEEA.

background

A clean, airy base for content areas, #E0EDF5 provides a sense of spaciousness and lightness, reminiscent of clear skies.

text

For body text, use a dark charcoal like #333333 or #427AA1 for headings on light backgrounds to ensure excellent readability.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using lighter blues for text on #E0EDF5.
  • #427AA1 provides strong contrast against #E0EDF5 and #C4DEEA for crucial UI elements.
  • Avoid placing #C4DEEA or #ACCBE1 text directly on #E0EDF5 for body copy due to potential low contrast.
  • Use #76A2BB or #427AA1 for interactive elements to ensure they are easily distinguishable.

Recommended combinations

Deep Sea Contrast

Excellent for high-contrast headers (#427AA1) on a light background (#E0EDF5), with supporting text in #76A2BB.

#427AA1 · #E0EDF5 · #76A2BB

Tile Harmony

A subtle, harmonious gradient for background sections, infographics, or layered UI components, creating depth.

#76A2BB · #ACCBE1 · #C4DEEA

Bright Accents

Use #427AA1 for primary text, #C4DEEA for interactive elements, and #E0EDF5 as a clean canvas.

#427AA1 · #C4DEEA · #E0EDF5

CSS variables

:root {
  --mediterranean-coastal-tile-1: #427AA1;
  --mediterranean-coastal-tile-2: #76A2BB;
  --mediterranean-coastal-tile-3: #ACCBE1;
  --mediterranean-coastal-tile-4: #C4DEEA;
  --mediterranean-coastal-tile-5: #E0EDF5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mediterranean-coastal-tile": {
        1: "#427AA1",
        2: "#76A2BB",
        3: "#ACCBE1",
        4: "#C4DEEA",
        5: "#E0EDF5",
      }
    }
  }
}

Related searches

coastal blue color schememediterranean tile colorsserene blue paletteocean inspired designcool blue web colors

Palette colors

Hex values

Color 1#427AA1
·
Color 2#76A2BB
·
Color 3#ACCBE1
·
Color 4#C4DEEA
·
Color 5#E0EDF5
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.7:1Fail
3.3:1AA18
3.9:1AA18
2
1.7:1Fail
1.6:1Fail
2:1Fail
2.3:1Fail
3
2.7:1Fail
1.6:1Fail
1.2:1Fail
1.4:1Fail
4
3.3:1AA18
2:1Fail
1.2:1Fail
1.2:1Fail
5
3.9:1AA18
2.3:1Fail
1.4:1Fail
1.2:1Fail

Similar palettes

More like Mediterranean Coastal Tile

View all cool
Azure Coastline Calm
Coastal Cerulean Hues
Mediterranean Harbor Charm
Seaside Village Charm
Abyssal Blue Descent
Abyssal Current Glide