Palette

Mediterranean Tile Warmth

Rich reds and blues with accents of golden yellow, reminiscent of sun-drenched Mediterranean tiles.

VibrantEnergetic5 colors

More Vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FFB300#FBC02D#EF5350#E53935#3F51B5

Palette guide

How to use Mediterranean Tile Warmth

Overview

The "Mediterranean Tile Warmth" palette (ID: mediterranean-tile-warmth-2) is a vibrant and energetic collection inspired by sun-drenched, colorful tiles. It combines striking golds like #FFB300 and #FBC02D with robust reds #EF5350 and #E53935, anchored by a deep, sophisticated #3F51B5. This palette is excellent for designers seeking to infuse energy, warmth, and a touch of traditional Mediterranean flair into their projects. It's highly versatile for creating engaging digital interfaces, lively branding, or dynamic print materials that demand attention and convey a sense of rich cultural heritage and vitality, perfect for modern applications.

Best used for

Vibrant e-commerce websites
Event branding and promotions
Food and beverage packaging
Mobile game interfaces
Travel blog or tourism marketing
Youth-oriented fashion branding

Suggested color roles

primary

Use #3F51B5 (Indigo) as a strong, anchoring primary for headers, navigation, or key brand elements, conveying stability and depth.

secondary

Employ #FFB300 (Amber) or #FBC02D (Deep Amber) for subheadings, active states, or graphic elements, providing vibrant energy and warmth.

accent

Apply #EF5350 (Red) or #E53935 (Crimson) sparingly for call-to-action buttons or critical highlights to add powerful emphasis and urgency.

background

Utilize #FBC02D (Deep Amber) or #FFB300 (Amber) sparingly for backgrounds, or pair with a near-white for content areas, ensuring contrast.

text

For primary body text, use #3F51B5 (Indigo) or black on light backgrounds. For headings on #3F51B5, #FFB300 or a crisp white works well.

Accessibility notes

Ensure #3F51B5 or black has sufficient contrast against a light background for body text readability (WCAG AA standard).
The reds (#EF5350, #E53935) and yellows (#FFB300, #FBC02D) will likely have insufficient contrast as text on each other; use them for distinct elements.
When using #FFB300 or #FBC02D as text, ensure the background provides ample contrast, possibly a dark blue or black.
Avoid using red (#EF5350, #E53935) as text on a yellow (#FFB300, #FBC02D) background for critical information due to low contrast and legibility issues.

Recommended combinations

Energetic Contrast

Ideal for high-impact branding, call-to-action sections, or vibrant banners that demand immediate attention and convey excitement.

#3F51B5 · #FFB300 · #EF5350

Sunlit Warmth

Perfect for creating warm, inviting highlights, decorative elements, or backgrounds that evoke a bright, sun-drenched atmosphere.

#FFB300 · #FBC02D · #E53935

Bold Statements

Suitable for strong headlines, interactive buttons, or graphical elements that require a powerful and memorable visual presence.

#E53935 · #3F51B5 · #FFB300

CSS variables

:root {
  --mediterranean-tile-warmth-2-1: #FFB300;
  --mediterranean-tile-warmth-2-2: #FBC02D;
  --mediterranean-tile-warmth-2-3: #EF5350;
  --mediterranean-tile-warmth-2-4: #E53935;
  --mediterranean-tile-warmth-2-5: #3F51B5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mediterranean-tile-warmth-2": {
        1: "#FFB300",
        2: "#FBC02D",
        3: "#EF5350",
        4: "#E53935",
        5: "#3F51B5",
      }
    }
  }
}

Hex values

Color 1#FFB300

Color 2#FBC02D

Color 3#EF5350

Color 4#E53935

Color 5#3F51B5

Accessibility

Contrast checker

1.1:1Fail

1.9:1Fail

2.4:1Fail

3.8:1AA18

1.1:1Fail

2.1:1Fail

2.6:1Fail

4.1:1AA18

1.9:1Fail

2.1:1Fail

1.2:1Fail

2:1Fail

2.4:1Fail

2.6:1Fail

1.2:1Fail

1.6:1Fail

3.8:1AA18

4.1:1AA18

2:1Fail

1.6:1Fail

Similar palettes

More like Mediterranean Tile Warmth

View all Vibrant

City Night Electric

Retro Comic Brights

Aurora Blossom Dreams

Azure Dragon Scales

Bohemian Sunset Sky

Canyon Abstract Sunset