Back to palettes

Palette

Mediterranean Citrus Light

Bright and sunny, evoking the vivid colors of ripe citrus fruits and the clear skies of the Mediterranean coast.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FFD700#FFA500#FF6347#3CB371#87CEEB

Palette guide

How to use Mediterranean Citrus Light

Overview

The Mediterranean Citrus Light palette is a vibrant and energetic collection, perfectly capturing the vivid colors of ripe citrus fruits and the clear, sunny skies of the Mediterranean coast. With bright tones like #FFD700 (gold) and #FFA500 (orange), complemented by the bold #FF6347 (tomato), this palette exudes warmth and vitality. The refreshing #3CB371 (medium sea green) and the airy #87CEEB (sky blue) provide crucial balance, preventing the palette from becoming overly intense. Designers and developers can leverage this scheme to create designs that feel lively, refreshing, and full of sun-drenched cheer, ideal for engaging and uplifting user experiences.

Best used for

  • Food and beverage branding (especially citrus-based)
  • Summer event promotions and marketing
  • Children's product design and packaging
  • Creative agency websites and portfolios
  • Energetic and playful digital interfaces
  • Seasonal retail displays and campaigns

Suggested color roles

primary

Utilize #FFA500 as the main color for headings, important calls-to-action, or hero sections to convey warmth and energy.

secondary

Employ #FFD700 for complementary elements, background highlights, or secondary interactive components, adding a sunny glow.

accent

Reserve #FF6347 for high-impact accents, urgent notifications, or small, attention-grabbing details due to its vibrant intensity.

background

Use #87CEEB as a cool, refreshing background, providing a clear sky contrast to the warm citrus tones.

text

For strong, readable text, #3CB371 offers a unique and refreshing contrast on lighter backgrounds, or use a dark charcoal or black for maximum legibility.

Accessibility notes

  • Exercise caution when placing text on #FFD700 or #FFA500; ensure sufficient contrast with darker text.
  • The #87CEEB background pairs well with darker text colors like #3CB371 or black for optimal readability.
  • Avoid using #FF6347 for small text due to its intensity; it's best for larger elements or accents.
  • Test color pairings for contrast, especially for users with color vision deficiencies, as some combinations might be challenging.

Recommended combinations

Sunny Splash

Create a bright layout with #87CEEB as background, #FFA500 for prominent headers, and #3CB371 for supporting text or vibrant icons.

#87CEEB · #FFA500 · #3CB371

Vibrant Energy

Use #FFD700 as a section background, #FF6347 for high-impact buttons, and #3CB371 for important details or links.

#FFD700 · #FF6347 · #3CB371

Refreshing Zest

Apply #87CEEB as a clean base, #FFA500 for navigation or main content blocks, and #FF6347 for urgent calls-to-action or sale banners.

#87CEEB · #FFA500 · #FF6347

CSS variables

:root {
  --mediterranean-citrus-light-1: #FFD700;
  --mediterranean-citrus-light-2: #FFA500;
  --mediterranean-citrus-light-3: #FF6347;
  --mediterranean-citrus-light-4: #3CB371;
  --mediterranean-citrus-light-5: #87CEEB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mediterranean-citrus-light": {
        1: "#FFD700",
        2: "#FFA500",
        3: "#FF6347",
        4: "#3CB371",
        5: "#87CEEB",
      }
    }
  }
}

Related searches

citrus color palette designvibrant mediterranean colorssunny brand identity paletteenergetic web design colorsrefreshing color scheme ui

Palette colors

Hex values

Color 1#FFD700
·
Color 2#FFA500
·
Color 3#FF6347
·
Color 4#3CB371
·
Color 5#87CEEB
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.1:1Fail
1.9:1Fail
1.2:1Fail
2
1.4:1Fail
1.5:1Fail
1.3:1Fail
1.1:1Fail
3
2.1:1Fail
1.5:1Fail
1.1:1Fail
1.7:1Fail
4
1.9:1Fail
1.3:1Fail
1.1:1Fail
1.5:1Fail
5
1.2:1Fail
1.1:1Fail
1.7:1Fail
1.5:1Fail

Similar palettes

More like Mediterranean Citrus Light

View all vibrant
Mediterranean Lemon Zest
Sunny Amalfi Zest
Aegean Coastline Bliss
Caribbean Beach Pop
Lagoon Paradise Sun
Mediterranean Coastal Art