Palette

Retro Candy Shop

A lively, cheerful mix of bright, classic colors reminiscent of an old-fashioned candy shop.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Retro Candy Shop 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 Retro Candy Shop.

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

Data visualization

#FF0000#FF69B4#FFA500#ADFF2F#00BFFF

Palette guide

How to use Retro Candy Shop

Overview

The "Retro Candy Shop" palette is a vibrant explosion of classic, playful hues designed to evoke nostalgia and cheerful energy. Featuring a bold red (#FF0000), a sweet hot pink (#FF69B4), a sunny orange (#FFA500), a lively lime green (#ADFF2F), and a brilliant sky blue (#00BFFF), this collection is perfect for projects needing an immediate pop of fun. Designers can leverage its high-contrast nature for dynamic interfaces, while developers will find these distinct colors easy to implement for clear visual hierarchy and engaging user experiences. Its bright, saturated tones are ideal for capturing attention and conveying a lighthearted, energetic mood, making it a versatile choice for playful branding or interactive elements.

Best used for

Children's product branding
Playful website designs or apps
Event invitations and party decor
Toy packaging and advertisements
Interactive game interfaces
Food and beverage promotions (especially sweets)

Suggested color roles

primary

A bold, energetic primary for headlines, key calls-to-action, or dominant graphic elements using #FF0000.

secondary

A cool, balancing secondary, excellent for subheadings, navigation, or complementary background sections using #00BFFF.

accent

A sweet, inviting accent for hover states, small interactive elements, or delightful decorative touches using #FF69B4.

background

A lively and unconventional background for sections needing high energy using #ADFF2F, or as an overlay. For a calmer background, consider a very light grey.

text

For dark text on light backgrounds, use a deep charcoal or black. For light text on these vibrant colors, use white.

Accessibility notes

Ensure sufficient contrast between text and background, especially when pairing vibrant hues like #FF0000 with #ADFF2F.
Light text (e.g., white) will generally have better readability on darker or highly saturated colors such as #FF0000 or #00BFFF.
Avoid using #FFA500 and #ADFF2F together for critical information due to potential contrast issues for some users.
Test color combinations with accessibility checkers to meet WCAG 2.1 AA standards for text and UI components.

Recommended combinations

Vibrant CTA

Ideal for high-impact call-to-action buttons against a neutral background, with the pink for hover states.

#FF0000 · #00BFFF · #FF69B4

Playful Header

Use orange for headings, lime for subheadings or icons, and blue for supporting graphic elements.

#FFA500 · #ADFF2F · #00BFFF

Sweet Stripes

Create fun, alternating stripes or pattern elements for backgrounds or decorative borders.

#FF69B4 · #FF0000 · #ADFF2F

CSS variables

:root {
  --retro-candy-shop-1: #FF0000;
  --retro-candy-shop-2: #FF69B4;
  --retro-candy-shop-3: #FFA500;
  --retro-candy-shop-4: #ADFF2F;
  --retro-candy-shop-5: #00BFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-candy-shop": {
        1: "#FF0000",
        2: "#FF69B4",
        3: "#FFA500",
        4: "#ADFF2F",
        5: "#00BFFF",
      }
    }
  }
}

Hex values

Color 1#FF0000

Color 2#FF69B4

Color 3#FFA500

Color 4#ADFF2F

Color 5#00BFFF

Accessibility

Contrast checker

1.5:1Fail

2:1Fail

3.3:1AA18

1.9:1Fail

1.5:1Fail

1.3:1Fail

2.2:1Fail

1.2:1Fail

2:1Fail

1.3:1Fail

1.6:1Fail

1.1:1Fail