Palette

Mediterranean Lemon Zest

A refreshing burst of Mediterranean sunshine, combining zesty yellows with cool blues and earthy tones.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FFFF00#87CEEB#FFFFFF#6B8E23#A0522D

Palette guide

How to use Mediterranean Lemon Zest

Overview

The Mediterranean Lemon Zest palette is a vibrant explosion of fresh, energetic colors, combining zesty yellows with cool blues and grounding earthy tones. Featuring a brilliant, eye-catching yellow (#FFFF00), a serene sky blue (#87CEEB), crisp white (#FFFFFF), a natural olive green (#6B8E23), and a warm terracotta (#A0522D), this palette captures the lively spirit of a Mediterranean summer. Designers can create dynamic, engaging experiences, while developers will appreciate the clear color distinctions for high-impact call-to-actions, refreshing backgrounds, and distinct content sections, ensuring an energetic yet balanced aesthetic.

Best used for

Food and beverage branding (especially citrus products)
Summer event promotions and festivals
Creative portfolios and artistic websites
Travel and tourism marketing for sunny destinations
Children's educational apps or toys
E-commerce sites for fresh produce or artisanal goods

Suggested color roles

primary

A bold, energetic yellow, #FFFF00 is perfect for high-impact call-to-action buttons, critical alerts, or vibrant headings to grab immediate attention.

secondary

A refreshing sky blue, #87CEEB is ideal for subheadings, navigation elements, or as a calming counterpoint to the vibrant yellow.

accent

A warm terracotta, #A0522D is excellent for grounding elements, important details, or to add a touch of rustic warmth and contrast.

background

A pure, crisp white, #FFFFFF provides a clean, bright canvas, allowing the vibrant colors to truly pop and maintain clarity.

text

Use a dark charcoal (e.g., #333333) or the olive green #6B8E23 for body text on white to ensure excellent readability and a natural feel.

Accessibility notes

#FFFF00 on #FFFFFF has very low contrast; avoid for text. Use #FFFF00 for large graphical elements or accents only.
#87CEEB provides good contrast against #A0522D or #6B8E23.
Ensure #6B8E23 and #A0522D are used for text on #FFFFFF to meet contrast standards.
When using #FFFF00 for interactive elements, ensure a distinct visual indicator for focus/hover states.

Recommended combinations

Zesty Refresh

Bright yellow for primary calls-to-action on a white background, with sky blue for secondary links or accents.

#FFFF00 · #FFFFFF · #87CEEB

Earthy Balance

Olive green for primary text and terracotta for highlights or buttons, all on a clean white base.

#6B8E23 · #A0522D · #FFFFFF

Mediterranean Vibe

A cool blue background with warm terracotta content, accented by pops of vibrant yellow for key elements.

#87CEEB · #A0522D · #FFFF00

CSS variables

:root {
  --mediterranean-lemon-zest-1: #FFFF00;
  --mediterranean-lemon-zest-2: #87CEEB;
  --mediterranean-lemon-zest-3: #FFFFFF;
  --mediterranean-lemon-zest-4: #6B8E23;
  --mediterranean-lemon-zest-5: #A0522D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mediterranean-lemon-zest": {
        1: "#FFFF00",
        2: "#87CEEB",
        3: "#FFFFFF",
        4: "#6B8E23",
        5: "#A0522D",
      }
    }
  }
}

Hex values

Color 1#FFFF00

Color 2#87CEEB

Color 3#FFFFFF

Color 4#6B8E23

Color 5#A0522D

Accessibility

Contrast checker

1.6:1Fail

1.1:1Fail

3.5:1AA18

5.2:1AA

1.6:1Fail

1.7:1Fail

2.2:1Fail

3.2:1AA18

1.1:1Fail

1.7:1Fail

3.8:1AA18

5.6:1AA

3.5:1AA18

2.2:1Fail

3.8:1AA18

1.5:1Fail

5.2:1AA

3.2:1AA18

5.6:1AA

1.5:1Fail

Similar palettes

More like Mediterranean Lemon Zest