Palette

Playful Citrus Zest

An explosion of cheerful citrus, vibrant and invigorating, perfect for a playful design.

VibrantPlayful5 colors

More Vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF5722#FF9800#FFC107#FFE082#FFECB3

Palette guide

How to use Playful Citrus Zest

Overview

The Playful Citrus Zest palette is an invigorating explosion of cheerful citrus tones, designed to bring a bright and fun energy to any project. This vibrant collection features a punchy orange-red #FF5722, a classic orange #FF9800, a brilliant amber #FFC107, a soft lemon-yellow #FFE082, and a creamy peach #FFECB3. It's an excellent choice for designers and developers looking to create engaging, sunny, and approachable visuals. The harmonious progression of these warm hues makes it incredibly versatile for conveying warmth, enthusiasm, and a playful mood, reminiscent of freshly peeled fruit.

Best used for

Dessert and bakery packaging design
Café and coffee shop branding
Holiday season promotions and advertising
DIY craft project guides and tutorials
Blog themes for food and lifestyle creators
Bright and inviting interior accents and decor

Suggested color roles

primary

Use #FF5722 as the bold, zesty main color for impactful headlines, calls-to-action, or key brand elements, conveying vibrancy.

secondary

Apply #FF9800 as a warm, approachable support color, suitable for subheadings, secondary buttons, or large graphic accents.

accent

Utilize #FFC107 for the brightest highlight, drawing attention to key details, icons, or to create a joyful, luminous pop.

background

Employ #FFECB3 as a soft, creamy, and light background base that allows the more vibrant hues to truly glow and stand out.

text

For optimal readability, use a dark brown, deep gray, or black text color, ensuring strong contrast against the bright palette.

Accessibility notes

Ensure text on #FFECB3 and #FFE082 has very high contrast (e.g., black or dark brown) due to their lightness.
Check contrast for text placed on #FFC107; dark text is generally required to meet accessibility standards.
Avoid using light-colored text on any of the orange or yellow tones to prevent readability issues.
Use larger font sizes when applying #FF9800 or #FF5722 for headings to enhance their visual impact and legibility.

Recommended combinations

Zesty Glow

Ideal for creating vibrant and inviting visual compositions, perfect for product displays or eye-catching banners.

#FF5722 · #FFC107 · #FFECB3

Warm Gradient

Excellent for smooth color transitions, backgrounds, or graphic elements that need a soft yet radiant feel.

#FF9800 · #FFC107 · #FFE082

Bold & Light

Perfect for creating a balanced design with both impactful elements and gentle, supportive tones.

#FF5722 · #FFECB3 · #FF9800

CSS variables

:root {
  --playful-citrus-zest-1: #FF5722;
  --playful-citrus-zest-2: #FF9800;
  --playful-citrus-zest-3: #FFC107;
  --playful-citrus-zest-4: #FFE082;
  --playful-citrus-zest-5: #FFECB3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "playful-citrus-zest": {
        1: "#FF5722",
        2: "#FF9800",
        3: "#FFC107",
        4: "#FFE082",
        5: "#FFECB3",
      }
    }
  }
}

Hex values

Color 1#FF5722

Color 2#FF9800

Color 3#FFC107

Color 4#FFE082

Color 5#FFECB3

Accessibility

Contrast checker

1.5:1Fail

1.9:1Fail

2.4:1Fail

2.7:1Fail

1.5:1Fail

1.3:1Fail

1.7:1Fail

1.8:1Fail

1.9:1Fail

1.3:1Fail

1.4:1Fail

2.4:1Fail

1.7:1Fail

1.3:1Fail

1.1:1Fail

2.7:1Fail

1.8:1Fail

1.4:1Fail

1.1:1Fail

Similar palettes

More like Playful Citrus Zest

Playful Citrus Zest

See it in context.

Ready when you are.

Built with Playful Citrus Zest.

How to use Playful Citrus Zest

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Zesty Glow

Warm Gradient

Bold & Light

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Playful Citrus Zest