Palette

Sunny Citrus Zest

A burst of bright, tangy oranges and yellows, as invigorating as fresh squeezed juice on a sunny day.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FFC300#FFAA00#FF8C00#FF6600#FF4500

Palette guide

How to use Sunny Citrus Zest

Overview

The Sunny Citrus Zest palette is a vibrant burst of bright, tangy oranges and yellows, as invigorating as fresh-squeezed juice on a sunny day. This energetic collection features a beautiful progression of warm tones, from the bright yellow-orange #FFC300 to the classic orange #FFAA00, the rich #FF8C00, the intense #FF6600, and culminating in the fiery #FF4500. Designers can leverage this palette to create designs that are bold, inviting, and full of positive energy. Developers will find these hex codes excellent for crafting engaging UIs, impactful marketing materials, or any digital product aiming for a cheerful, energetic, and memorable visual identity with a strong warm bias.

Best used for

Juice bar or healthy snack branding
Summer fashion or swimwear promotions
Sports and fitness app interfaces
Event posters and flyers
Automotive interior accents
High-energy advertising campaigns

Suggested color roles

primary

Use #FFAA00 as a balanced and inviting orange for main interactive elements or brand identity.

secondary

Apply #FFC300 as a bright, sunny yellow-orange for supportive elements or background accents.

accent

Utilize #FF4500 as a fiery, attention-grabbing red-orange for highlights or urgent notifications.

background

Employ #FFC300 as the lightest available color for a background, ensuring dark text for readability.

text

For text, use dark charcoal or black for readability on #FFC300. White works well on #FFAA00, #FF8C00, #FF6600, and #FF4500.

Accessibility notes

#FFC300 has low contrast with white text; use dark text (e.g., black or charcoal) for readability.
Ensure sufficient contrast when using #FFAA00 and #FF8C00 adjacent for distinguishable UI elements.
The darker oranges like #FF6600 and #FF4500 provide good contrast with white text, making them suitable for clear headings or buttons.
Avoid using the lighter orange shades as primary text colors unless on very dark backgrounds.

Recommended combinations

Fiery Sunset

Dynamic gradients, impactful hero banners, or energetic product highlights.

#FFC300 · #FF6600 · #FF4500

Zesty Pop

Bold call-to-actions, vibrant infographics, or playful branding elements.

#FFAA00 · #FF4500 · #FFC300

Deep Citrus

Strong brand identity, compelling headlines, or rich data visualizations.

#FF8C00 · #FF6600 · #FFAA00

CSS variables

:root {
  --sunny-citrus-zest-1: #FFC300;
  --sunny-citrus-zest-2: #FFAA00;
  --sunny-citrus-zest-3: #FF8C00;
  --sunny-citrus-zest-4: #FF6600;
  --sunny-citrus-zest-5: #FF4500;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sunny-citrus-zest": {
        1: "#FFC300",
        2: "#FFAA00",
        3: "#FF8C00",
        4: "#FF6600",
        5: "#FF4500",
      }
    }
  }
}

Hex values

Color 1#FFC300

Color 2#FFAA00

Color 3#FF8C00

Color 4#FF6600

Color 5#FF4500

Accessibility

Contrast checker

1.2:1Fail

1.5:1Fail

1.8:1Fail

2.1:1Fail

1.2:1Fail

1.5:1Fail

1.8:1Fail

1.5:1Fail

1.2:1Fail

1.3:1Fail

1.5:1Fail

1.8:1Fail

1.5:1Fail

1.3:1Fail

1.2:1Fail

2.1:1Fail

1.8:1Fail

1.5:1Fail

1.2:1Fail

Similar palettes

More like Sunny Citrus Zest

Sunny Citrus Zest

See it in context.

Ready when you are.

Built with Sunny Citrus Zest.

How to use Sunny Citrus Zest

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Fiery Sunset

Zesty Pop

Deep Citrus

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Sunny Citrus Zest