Palette

Playful Citrus Burst

Zesty and invigorating, a cheerful blend that radiates the tangy brightness and sun-kissed vibrancy of citrus fruits.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FFFF00#FFD700#FFA500#FF6347#FF4500

Palette guide

How to use Playful Citrus Burst

Overview

The Playful Citrus Burst palette is a zesty and invigorating collection, radiating the sun-kissed vibrancy of citrus fruits. This monochromatic-inspired palette features a bright yellow #FFFF00, a warm gold #FFD700, a cheerful orange #FFA500, a vibrant tomato #FF6347, and a fiery orange-red #FF4500. It's an excellent choice for designers and developers aiming to create energetic, cheerful, and visually stimulating projects. The harmonious progression of warm tones offers a seamless gradient effect, making it versatile for both bold statements and subtle transitions, perfect for conveying energy and zest.

Best used for

Juice bar and healthy cafe branding
Summer festival graphics and marketing
Children's activity books and educational materials
Digital advertisements for healthy snacks or drinks
Energy drink packaging and promotions
Fun, bright website themes and user interfaces

Suggested color roles

primary

Use #FF4500 as the bold, energetic core for main calls-to-action, headlines, or impactful visual elements.

secondary

Apply #FFA500 as a warm, inviting support color, suitable for subheadings, secondary buttons, or graphic accents.

accent

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

background

A light cream or clean white background will allow these radiant warm tones to truly glow and prevent visual heaviness.

text

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

Accessibility notes

Ensure #FFFF00 requires very dark text (e.g., black) for sufficient contrast and readability.
Avoid using #FFD700 or #FFA500 for small body text on light backgrounds, as contrast may be insufficient.
Be mindful of the similarity between #FF6347 and #FF4500; ensure clear separation or use for gradient effects.
Use a high contrast dark color for body text on any of these bright colors to meet accessibility standards.

Recommended combinations

Sunny Gradient

Ideal for smooth transitions, backgrounds, or vibrant graphical elements that emulate a sunset or fruit zest.

#FFFF00 · #FFD700 · #FFA500

Energetic Pop

Excellent for high-impact calls-to-action, banners, or design elements that need to stand out immediately.

#FF4500 · #FFA500 · #FFFF00

Warm & Bold

Perfect for creating a powerful and inviting visual presence, suitable for product packaging or hero sections.

#FF6347 · #FF4500 · #FFD700

CSS variables

:root {
  --playful-citrus-burst-1: #FFFF00;
  --playful-citrus-burst-2: #FFD700;
  --playful-citrus-burst-3: #FFA500;
  --playful-citrus-burst-4: #FF6347;
  --playful-citrus-burst-5: #FF4500;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "playful-citrus-burst": {
        1: "#FFFF00",
        2: "#FFD700",
        3: "#FFA500",
        4: "#FF6347",
        5: "#FF4500",
      }
    }
  }
}

Hex values

Color 1#FFFF00

Color 2#FFD700

Color 3#FFA500

Color 4#FF6347

Color 5#FF4500

Accessibility

Contrast checker

1.3:1Fail

1.8:1Fail

2.7:1Fail

3.2:1AA18

1.3:1Fail

1.4:1Fail

2.1:1Fail

2.5:1Fail

1.8:1Fail

1.4:1Fail

1.5:1Fail

1.7:1Fail

2.7:1Fail

2.1:1Fail

1.5:1Fail

1.2:1Fail

3.2:1AA18

2.5:1Fail

1.7:1Fail

1.2:1Fail

Similar palettes

More like Playful Citrus Burst