Palette

Lemonade Splash Refresh

A bright and zesty palette, reminiscent of a cool, refreshing lemonade splash on a warm summer day.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Lemonade Splash Refresh 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 Lemonade Splash Refresh.

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

Data visualization

#ffff00#ffffe0#fafaad#f0e68c#eedd82

Palette guide

How to use Lemonade Splash Refresh

Overview

The Lemonade Splash Refresh palette is a bright and zesty collection, perfectly capturing the essence of a cool, invigorating lemonade splash on a warm summer day. It features a range of vibrant to slightly muted yellows, including the pure `#ffff00` (Yellow), the airy `#ffffe0` (Light Yellow), and the earthy `#f0e68c` (Khaki). This palette is designed to evoke feelings of freshness, energy, and pure summer delight. Designers can utilize this scheme to create lively, refreshing, and genuinely cheerful aesthetics for various projects, from digital interfaces to product branding.

Best used for

Summer beverage branding and packaging
Outdoor event promotions and advertising
Refreshing product lines (e.g., skincare)
Casual cafes and juice bar branding
Healthy lifestyle blogs and content
Vibrant landing pages and web design

Suggested color roles

primary

Designate `#ffff00` (Pure Yellow) as the bold, energetic primary, ideal for prominent branding elements or attention-grabbing headlines.

secondary

Utilize `#fafaad` (Khaki) as a softer, inviting secondary yellow, perfect for less intense areas or background elements.

accent

Apply `#f0e68c` (Khaki) for subtle, earthy accents that add depth and a touch of natural elegance to the brighter tones.

background

Employ `#ffffe0` (Light Yellow) as a very light, airy background, providing a clean canvas for other vibrant hues.

text

For essential readability, use black or a deep charcoal. White text can work for large headlines on `#ffff00` but requires careful contrast checking.

Accessibility notes

The very bright `#ffff00` and `#ffffe0` demand extremely dark text (black or charcoal) for any level of readability.
Ensure all text on any yellow background in this palette has sufficient contrast, as most are quite light.
When using `#f0e68c` for interactive elements, verify it meets minimum contrast ratios against its background.
Avoid using light-colored text on any of the yellows to prevent accessibility issues and poor readability.

Recommended combinations

Bright Refresh

For hero banners, main headlines, or sections that need to feel instantly refreshing and energetic.

#FFFF00 · #FFFFE0 · #FAFAAD

Subtle Depth

Ideal for background elements, layered illustrations, or sections requiring a more muted feel.

#FAFAAD · #F0E68C · #EEDD82

Energetic Accent

To create impactful buttons, key information callouts, or dynamic graphical elements.

#FFFF00 · #FAFAAD · #F0E68C

CSS variables

:root {
  --lemonade-splash-refresh-1: #ffff00;
  --lemonade-splash-refresh-2: #ffffe0;
  --lemonade-splash-refresh-3: #fafaad;
  --lemonade-splash-refresh-4: #f0e68c;
  --lemonade-splash-refresh-5: #eedd82;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lemonade-splash-refresh": {
        1: "#ffff00",
        2: "#ffffe0",
        3: "#fafaad",
        4: "#f0e68c",
        5: "#eedd82",
      }
    }
  }
}

Hex values

Color 1#ffff00

Color 2#ffffe0

Color 3#fafaad

Color 4#f0e68c

Color 5#eedd82

Accessibility

Contrast checker

1.1:1Fail

1:1Fail

1.2:1Fail

1.3:1Fail

1.1:1Fail

1.3:1Fail

1:1Fail

1.1:1Fail

1.2:1Fail

1.3:1Fail

1.2:1Fail

1.3:1Fail

1.2:1Fail

1.1:1Fail

1.3:1Fail

1.1:1Fail

Similar palettes

More like Lemonade Splash Refresh

Lemonade Splash Refresh

See it in context.

Ready when you are.

Built with Lemonade Splash Refresh.

How to use Lemonade Splash Refresh

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Bright Refresh

Subtle Depth

Energetic Accent

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Lemonade Splash Refresh