Palette

Retro Candy Shoppe

A sweet explosion of fun, vibrant colors reminiscent of a classic candy store.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF69B4#FFFF00#00BFFF#FF4500#9932CC

Palette guide

How to use Retro Candy Shoppe

Overview

The "Retro Candy Shoppe" palette serves up a delicious blend of high-energy, playful colors, perfect for designs that aim to be sweet and memorable. Anchored by a cheerful hot pink (#FF69B4), a bright sunny yellow (#FFFF00), a clear sky blue (#00BFFF), a fiery orange-red (#FF4500), and a deep, regal purple (#9932CC), this collection offers designers a versatile range for creating dynamic and engaging visuals. Developers can implement these distinct hues to establish clear visual cues, highlight interactive elements, and build interfaces that exude a fun, vintage vibe. It’s an excellent choice for branding, digital products, or promotional materials that want to evoke a sense of playful nostalgia and vibrant energy.

Best used for

Children's entertainment apps
Sweet shop branding or packaging
Playful event marketing materials
Toy company websites
Pop culture inspired designs
Interactive game UIs

Suggested color roles

primary

A bold, eye-catching primary for dominant calls-to-action, important headlines, or key branding elements using #FF4500.

secondary

A refreshing secondary for navigation, background sections, or to provide a cool contrast to warmer tones using #00BFFF.

accent

A sweet, playful accent perfect for smaller interactive elements, hover states, or decorative flourishes using #FF69B4.

background

A very bright, energetic background for sections demanding attention using #FFFF00, or as a vibrant base for graphic elements. For a more subdued background, use a light neutral.

text

For maximum contrast, use black or a very dark charcoal on #FFFF00. White text works well on #FF4500, #00BFFF, and #9932CC.

Accessibility notes

#FFFF00 provides very low contrast with white text; always use dark text like black or a dark charcoal for readability.
Ensure sufficient contrast when pairing #FF69B4 with #FF4500, as their proximity in hue can make text difficult to read for some.
Test the contrast of #00BFFF and #9932CC with white text, which typically performs well.
Avoid using #FFFF00 as a primary background for large blocks of text due to its intensity and potential for eye strain.

Recommended combinations

Vibrant Button

Use orange for the button, yellow for subtle highlights or icons, and pink for hover effects.

#FF4500 · #FFFF00 · #FF69B4

Retro Banner

Purple as a dominant background, blue for text or shapes, and yellow for accent details or highlights.

#9932CC · #00BFFF · #FFFF00

Playful Graphics

Create dynamic graphic elements or illustrations using these three distinct, high-contrast colors.

#FF69B4 · #FF4500 · #00BFFF

CSS variables

:root {
  --retro-candy-shoppe-1: #FF69B4;
  --retro-candy-shoppe-2: #FFFF00;
  --retro-candy-shoppe-3: #00BFFF;
  --retro-candy-shoppe-4: #FF4500;
  --retro-candy-shoppe-5: #9932CC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-candy-shoppe": {
        1: "#FF69B4",
        2: "#FFFF00",
        3: "#00BFFF",
        4: "#FF4500",
        5: "#9932CC",
      }
    }
  }
}

Hex values

Color 1#FF69B4

Color 2#FFFF00

Color 3#00BFFF

Color 4#FF4500

Color 5#9932CC

Accessibility

Contrast checker

2.5:1Fail

1.2:1Fail

1.3:1Fail

2.2:1Fail

2.5:1Fail

2:1Fail

3.2:1AA18

5.3:1AA

1.2:1Fail

2:1Fail

1.6:1Fail

2.7:1Fail

1.3:1Fail

3.2:1AA18

1.6:1Fail

1.7:1Fail

2.2:1Fail

5.3:1AA

2.7:1Fail

1.7:1Fail

Similar palettes

More like Retro Candy Shoppe