Palette

Citrus Burst Fizz

A zesty and refreshing palette bursting with the bright, energetic colors of fresh citrus fruits and summer.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Citrus Burst Fizz 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 Citrus Burst Fizz.

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

Data visualization

#FFD700#FFFF00#ADFF2F#00FF7F#F0E68C

Palette guide

How to use Citrus Burst Fizz

Overview

The Citrus Burst Fizz palette is a zesty and refreshing collection bursting with the bright, energetic colors of fresh citrus fruits and summer. Featuring vibrant hues like sunny #FFD700 (gold), luminous #FFFF00 (yellow), lively #ADFF2F (green yellow), fresh #00FF7F (spring green), and soft #F0E68C (khaki), this palette offers a dynamic spectrum for designers seeking an energetic and playful feel. Developers can utilize these hex codes to craft engaging UI elements, vibrant branding, or captivating digital art that resonates with vitality and natural zest. This palette is excellent for projects that aim to convey freshness, health, and an undeniable burst of energy, making it ideal for summer themes, food, and lifestyle brands.

Best used for

summer beverage marketing
healthy food blog design
children's product packaging
outdoor and leisure branding
fresh produce e-commerce
playful mobile app UI

Suggested color roles

primary

The sunny #FFD700 (gold) serves as an energetic primary color, excellent for main sections, headers, or prominent branding elements.

secondary

The luminous #FFFF00 (yellow) provides a lively secondary option, ideal for subheadings, interactive buttons, or to add a touch of sunny optimism.

accent

The fresh #00FF7F (spring green) or lively #ADFF2F (green yellow) can be used for impactful accents, offering a dynamic contrast for important details or calls-to-action.

background

The softest shade, #F0E68C (khaki), can serve as a gentle, yet warm background. For a brighter look, a pure white (#FFFFFF) background will make the vibrant colors pop.

text

For optimal readability, use a dark color like #333333 or a deep forest green for text on lighter backgrounds like #F0E68C or #FFFF00. Black text works well on #FFD700.

Accessibility notes

Ensure sufficient contrast when using #FFFF00 with #F0E68C for text; they may be too close in luminosity.
Pair #00FF7F or #ADFF2F with dark text (e.g., black or charcoal) for maximum readability.
Avoid using #FFD700 for small text against #FFFF00 backgrounds without careful contrast checking.
For body text, a dark gray or black on a light background (like white or #F0E68C) will offer best legibility.

Recommended combinations

Zesty Pop

Create vibrant gradients or energetic sections, perfect for highlighting fresh content or calls to action.

#FFD700 · #FFFF00 · #ADFF2F

Fresh Fizz

Use the greens for natural elements and the yellow for bright highlights or refreshing backgrounds.

#00FF7F · #F0E68C · #FFFF00

Summer Burst

Ideal for creating striking visual dynamics, lively backgrounds, or bold graphic illustrations.

#FFD700 · #00FF7F · #ADFF2F

CSS variables

:root {
  --citrus-burst-fizz-1: #FFD700;
  --citrus-burst-fizz-2: #FFFF00;
  --citrus-burst-fizz-3: #ADFF2F;
  --citrus-burst-fizz-4: #00FF7F;
  --citrus-burst-fizz-5: #F0E68C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "citrus-burst-fizz": {
        1: "#FFD700",
        2: "#FFFF00",
        3: "#ADFF2F",
        4: "#00FF7F",
        5: "#F0E68C",
      }
    }
  }
}

Hex values

Color 1#FFD700

Color 2#FFFF00

Color 3#ADFF2F

Color 4#00FF7F

Color 5#F0E68C

Accessibility

Contrast checker

1.3:1Fail

1.1:1Fail

1:1Fail

1.1:1Fail

1.3:1Fail

1.1:1Fail

1.3:1Fail

1.2:1Fail

1.1:1Fail

1:1Fail

1.3:1Fail

1.1:1Fail

1.2:1Fail

1:1Fail

1.1:1Fail

Similar palettes

More like Citrus Burst Fizz

Citrus Burst Fizz

See it in context.

Ready when you are.

Built with Citrus Burst Fizz.

How to use Citrus Burst Fizz

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Zesty Pop

Fresh Fizz

Summer Burst

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Citrus Burst Fizz