Palette

Sunny Citrus Punch

A zesty and refreshing burst of color inspired by ripe citrus fruits and sunny days.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FFD700#FFA500#FF6347#FFDE7D#FFB6C1

Palette guide

How to use Sunny Citrus Punch

Overview

The Sunny Citrus Punch palette delivers a zesty and refreshing burst of color, inspired by ripe citrus fruits and sunny days. This energetic collection features the bright yellow #FFD700, a classic orange #FFA500, and a lively coral #FF6347. Unique to this palette are the soft, warm yellow #FFDE7D and a delicate pink #FFB6C1, adding a playful and slightly whimsical touch. Designers can use this palette to create inviting and cheerful experiences across various platforms. Developers will find these hex codes ideal for crafting engaging UI, vibrant marketing materials, or any project aiming for a lighthearted and positive aesthetic.

Best used for

Summer-themed promotions and events
Bakery or dessert shop branding
Youth-oriented fashion or lifestyle brands
Interactive children's content
Feminine product packaging
Casual dining restaurant interiors

Suggested color roles

primary

Use #FFA500 as a warm, inviting orange for main interactive elements or brand identity.

secondary

Apply #FFD700 as a bright, energetic yellow for supportive elements or background accents.

accent

Utilize #FF6347 as a lively and attention-grabbing coral for highlights or urgent notifications.

background

Employ #FFDE7D as a soft, warm and light base, ensuring dark text for readability.

text

For text, use dark charcoal or black for readability on #FFD700, #FFDE7D, and #FFB6C1. White works well on #FFA500 and #FF6347.

Accessibility notes

#FFDE7D and #FFB6C1 have low contrast with white text; use dark text (e.g., black or charcoal) for readability.
Ensure sufficient contrast between #FFD700 and #FFA500 when used for interactive elements.
The coral #FF6347 provides good contrast with white text, making it suitable for clear call-to-actions.
Avoid using the lighter shades as primary text colors unless on very dark backgrounds.

Recommended combinations

Sweet Sunrise

Gentle gradients, feminine branding, or inviting background elements.

#FFDE7D · #FFA500 · #FFB6C1

Zesty Pop

Vibrant call-to-actions, playful illustrations, or energetic headlines.

#FFD700 · #FF6347 · #FFA500

Fruity Medley

Children's book designs, cheerful event graphics, or unique UI accents.

#FFB6C1 · #FFDE7D · #FF6347

CSS variables

:root {
  --sunny-citrus-punch-1: #FFD700;
  --sunny-citrus-punch-2: #FFA500;
  --sunny-citrus-punch-3: #FF6347;
  --sunny-citrus-punch-4: #FFDE7D;
  --sunny-citrus-punch-5: #FFB6C1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sunny-citrus-punch": {
        1: "#FFD700",
        2: "#FFA500",
        3: "#FF6347",
        4: "#FFDE7D",
        5: "#FFB6C1",
      }
    }
  }
}

Hex values

Color 1#FFD700

Color 2#FFA500

Color 3#FF6347

Color 4#FFDE7D

Color 5#FFB6C1

Accessibility

Contrast checker

1.4:1Fail

2.1:1Fail

1.1:1Fail

1.2:1Fail

1.4:1Fail

1.5:1Fail

1.2:1Fail

2.1:1Fail

1.5:1Fail

2.2:1Fail

1.8:1Fail

1.1:1Fail

1.5:1Fail

2.2:1Fail

1.3:1Fail

1.2:1Fail

1.8:1Fail

1.3:1Fail

Similar palettes

More like Sunny Citrus Punch

Sunny Citrus Punch

See it in context.

Ready when you are.

Built with Sunny Citrus Punch.

How to use Sunny Citrus Punch

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sweet Sunrise

Zesty Pop

Fruity Medley

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Sunny Citrus Punch