Back to palettes

Palette

Fresh Citrus Zest

A lively burst of sunny yellows, zesty oranges, and vibrant reds.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FFD166#FF9F1C#FF6B35#E71D36#00FFC0

Palette guide

How to use Fresh Citrus Zest

Overview

The Fresh Citrus Zest palette is a vibrant and energetic collection, perfect for projects that need to convey excitement and freshness. Dominated by lively hues like the sunny yellow of #FFD166, the zesty orange of #FF9F1C, and the bold red of #E71D36, this palette is a burst of color. The refreshing pop of electric green #00FFC0 adds an unexpected, modern twist. Designers and developers can leverage these bright, high-contrast colors to create engaging user interfaces, eye-catching branding, or dynamic marketing materials that truly stand out.

Best used for

  • Food and beverage branding
  • Youth-oriented digital products
  • Summer seasonal campaigns
  • Event promotion and flyers
  • Activewear and sports apparel design
  • Children's product packaging

Suggested color roles

primary

Use #FF9F1C as a primary call-to-action color, bringing immediate attention and a sense of zest.

secondary

Apply #FFD166 for supporting elements like headers, sub-sections, or background accents to maintain a bright, inviting feel.

accent

Employ #E71D36 for strong emphasis, warnings, or urgent notifications. #00FFC0 can be used for a modern, high-contrast highlight or interactive elements.

background

Opt for a clean, light neutral or a very subtle, desaturated version of #FFD166 to provide an airy canvas for the vibrant colors.

text

For optimal readability, use a dark charcoal or black text on lighter backgrounds. For text on #E71D36, use a contrasting white or #FFD166.

Accessibility notes

  • Ensure sufficient contrast for text, especially when using lighter shades like #FFD166 on white backgrounds.
  • The vibrant #00FFC0 might require careful pairing with text to meet WCAG contrast guidelines.
  • Avoid placing #FFD166 directly next to #FF9F1C for small text to prevent low contrast issues.
  • Use a tool to check the contrast ratio of #E71D36 against any background color for critical information.

Recommended combinations

Zest & Energy

Ideal for bold headlines, active buttons, or energetic graphic elements.

#FF9F1C · #E71D36 · #FFD166

Fresh Highlight

Create a modern, refreshing feel for illustrations, icons, or secondary UI components.

#FFD166 · #00FFC0 · #FF6B35

Bold Statement

Powerful combination for urgent messages, sales banners, or high-impact branding with dark text.

#E71D36 · #FF9F1C · #FF6B35

CSS variables

:root {
  --fresh-citrus-zest-1: #FFD166;
  --fresh-citrus-zest-2: #FF9F1C;
  --fresh-citrus-zest-3: #FF6B35;
  --fresh-citrus-zest-4: #E71D36;
  --fresh-citrus-zest-5: #00FFC0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fresh-citrus-zest": {
        1: "#FFD166",
        2: "#FF9F1C",
        3: "#FF6B35",
        4: "#E71D36",
        5: "#00FFC0",
      }
    }
  }
}

Related searches

vibrant color palettecitrus color schemeenergetic brand colorsfood design colorsbright UI palette

Palette colors

Hex values

Color 1#FFD166
·
Color 2#FF9F1C
·
Color 3#FF6B35
·
Color 4#E71D36
·
Color 5#00FFC0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2:1Fail
3.1:1AA18
1.1:1Fail
2
1.4:1Fail
1.4:1Fail
2.2:1Fail
1.6:1Fail
3
2:1Fail
1.4:1Fail
1.6:1Fail
2.2:1Fail
4
3.1:1AA18
2.2:1Fail
1.6:1Fail
3.5:1AA18
5
1.1:1Fail
1.6:1Fail
2.2:1Fail
3.5:1AA18

Similar palettes

More like Fresh Citrus Zest

View all vibrant
Citrus Grove Dawn
Tropical Zest Fizz
Citrus Burst Energy
Citrus Burst Zest
Citrus Zest Burst
Citrus Zest Burst