Palette

Mediterranean Zest

A refreshing blend of sun-ripened citrus, fragrant olive groves, and clear coastal waters, full of zest.

warmenergetic5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FFD700#FFA500#6B8E23#4682B4#E0E0B0

Palette guide

How to use Mediterranean Zest

Overview

The Mediterranean Zest palette captures the vibrant essence of sun-drenched coastal regions, blending refreshing citrus with deep ocean and earthy tones. This energetic collection is perfect for projects aiming for a fresh, lively, and natural feel. Key colors include the bright gold of #FFD700, the deep, calming steel blue of #4682B4, and the natural olive drab of #6B8E23. Designers and developers can leverage its crisp contrasts and warm undertones to create inviting and dynamic user experiences, evoking warmth and vitality. The palette also features a zesty orange, #FFA500, and a soft, neutral base, #E0E0B0, providing versatility for various design applications.

Best used for

Summer-themed web design and apps
Food and beverage packaging, especially citrus products
Travel agency branding for Mediterranean destinations
Lifestyle blogs focusing on health and freshness
Event invitations for outdoor or destination weddings
Eco-friendly product branding

Suggested color roles

primary

Use #FFD700 as a bold primary for headers or calls to action to convey energy and optimism.

secondary

Employ #4682B4 for secondary elements like navigation or background sections, offering a calming, stable presence.

accent

Apply #FFA500 as a vibrant accent for buttons, icons, or decorative details to add a pop of zest and draw attention.

background

Utilize #E0E0B0 for clean, soft backgrounds, providing a natural and light canvas that allows other colors to shine.

text

For primary text, #6B8E23 offers excellent readability and an earthy feel; consider a rich charcoal for smaller body text.

Accessibility notes

Ensure sufficient contrast when placing #FFD700 or #FFA500 text on #E0E0B0 backgrounds.
Use #6B8E23 or a dark neutral for text on #E0E0B0 to meet WCAG AA standards.
Avoid using #FFD700 and #FFA500 directly adjacent for critical information for users with color vision deficiencies.
Darker colors like #4682B4 or #6B8E23 can serve as excellent backgrounds for white or light-colored text.

Recommended combinations

Citrus Burst

Ideal for vibrant headers, energetic illustrations, or playful brand elements that need to stand out.

#FFD700 · #FFA500 · #6B8E23

Coastal Calm

Perfect for creating serene backgrounds, subtle UI elements, or conveying a sense of tranquility and nature.

#4682B4 · #E0E0B0 · #6B8E23

Zesty Contrast

Great for dynamic layouts where bright accents meet cool foundations, suitable for interactive elements or infographics.

#FFD700 · #4682B4 · #FFA500

CSS variables

:root {
  --mediterranean-zest-1: #FFD700;
  --mediterranean-zest-2: #FFA500;
  --mediterranean-zest-3: #6B8E23;
  --mediterranean-zest-4: #4682B4;
  --mediterranean-zest-5: #E0E0B0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mediterranean-zest": {
        1: "#FFD700",
        2: "#FFA500",
        3: "#6B8E23",
        4: "#4682B4",
        5: "#E0E0B0",
      }
    }
  }
}

Hex values

Color 1#FFD700

Color 2#FFA500

Color 3#6B8E23

Color 4#4682B4

Color 5#E0E0B0

Accessibility

Contrast checker

1.4:1Fail

2.7:1Fail

2.9:1Fail

1:1Fail

1.4:1Fail

1.9:1Fail

2.1:1Fail

1.5:1Fail

2.7:1Fail

1.9:1Fail

1.1:1Fail

2.8:1Fail

2.9:1Fail

2.1:1Fail

1.1:1Fail

3:1AA18

1:1Fail

1.5:1Fail

2.8:1Fail

3:1AA18

Similar palettes

More like Mediterranean Zest

View all warm

Sun-Drenched Lemon Grove

Citrus Grove Dawn

Citrus Grove Sun

Golden Sunrise Dew

Spiced Marmalade Morning

Amber Nectar