Palette

Sunny Citrus Zing

Radiant yellows burst with the fresh, tangy zest of sun-ripened citrus fruits.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#f2b900#ffce00#ffdc3b#ffe970#fff6a5

Palette guide

How to use Sunny Citrus Zing

Overview

The Sunny Citrus Zing palette radiates with vibrant yellows, bursting with the fresh, tangy zest of sun-ripened citrus fruits. This monochromatic-leaning collection features a delightful progression from the intense yellow #f2b900 to the bright #ffce00, the cheerful #ffdc3b, and the soft, almost creamy #fff6a5. Each shade offers a distinct level of brightness while maintaining a unified, energetic feel. Designers can leverage this palette to create designs that are light, airy, and full of positive, summery appeal. Developers will find these hex codes excellent for crafting bright UIs, cheerful branding, or any digital product aiming for a lively and refreshing visual identity, particularly in food or lifestyle sectors.

Best used for

Healthy food and beverage branding
Summer-themed digital campaigns
Children's learning applications
Bright and minimalist web design
Personal care product packaging
Photography portfolio backgrounds

Suggested color roles

primary

Use #ffce00 as a bright, inviting yellow for main interactive elements or primary branding.

secondary

Apply #f2b900 as a deeper, grounding yellow for supportive elements or stronger emphasis.

accent

Utilize #ffdc3b as a cheerful, eye-catching highlight for small accents or call-to-action buttons.

background

Employ #fff6a5 as the lightest, airy base for backgrounds, ensuring dark text for readability.

text

For text, use dark charcoal or black for optimal readability across all colors in this very light palette.

Accessibility notes

All colors in this palette are very light; use dark text (e.g., black or dark charcoal) for readability across the board.
Avoid using white text on any of these colors as contrast will be extremely poor.
Ensure sufficient contrast between adjacent shades, especially for interactive elements, as the differences are subtle.
Consider using text outlines or shadows if text must be placed over complex backgrounds containing multiple light yellows.

Recommended combinations

Golden Glow

Soft gradients, delicate background textures, or subtle UI highlights.

#FFF6A5 · #FFE970 · #FFDC3B

Zesty Pop

Energetic call-to-actions, vibrant headlines, or playful infographics.

#FFCE00 · #F2B900 · #FFDC3B

Bright Core

Strong brand foundation, compelling banners, or clear data visualizations with dark text.

#F2B900 · #FFE970 · #FFCE00

CSS variables

:root {
  --sunny-citrus-zing-1: #f2b900;
  --sunny-citrus-zing-2: #ffce00;
  --sunny-citrus-zing-3: #ffdc3b;
  --sunny-citrus-zing-4: #ffe970;
  --sunny-citrus-zing-5: #fff6a5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sunny-citrus-zing": {
        1: "#f2b900",
        2: "#ffce00",
        3: "#ffdc3b",
        4: "#ffe970",
        5: "#fff6a5",
      }
    }
  }
}

Hex values

Color 1#f2b900

Color 2#ffce00

Color 3#ffdc3b

Color 4#ffe970

Color 5#fff6a5

Accessibility

Contrast checker

1.2:1Fail

1.3:1Fail

1.5:1Fail

1.6:1Fail

1.2:1Fail

1.1:1Fail

1.2:1Fail

1.3:1Fail

1.1:1Fail

1.2:1Fail

1.5:1Fail

1.2:1Fail

1.1:1Fail

1.6:1Fail

1.3:1Fail

1.2:1Fail

1.1:1Fail

Similar palettes

More like Sunny Citrus Zing

Sunny Citrus Zing

See it in context.

Ready when you are.

Built with Sunny Citrus Zing.

How to use Sunny Citrus Zing

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Golden Glow

Zesty Pop

Bright Core

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Sunny Citrus Zing