Back to palettes

Palette

Retro Diner Jellies

Bold and cheerful colors reminiscent of brightly colored jellies and treats from a classic retro diner.

VibrantPlayful5 colors
More Vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Retro Diner Jellies 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 Diner Jellies.

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

Data visualization

#FF6666#66FF66#6666FF#FFCC66#FF66CC

Palette guide

How to use Retro Diner Jellies

Overview

The Retro Diner Jellies palette is a burst of bold and cheerful colors, reminiscent of brightly colored jellies and treats from a classic retro diner. This highly saturated collection includes a vibrant #FF6666 (bright red), a lively #66FF66 (lime green), a striking #6666FF (electric blue), a sunny #FFCC66 (golden orange), and a playful #FF66CC (hot pink). Each color is designed to pop, offering designers and developers an exciting toolkit for projects that demand a fun, energetic, and undeniably bold aesthetic. It’s perfect for creating designs that are full of personality and evoke a sense of carefree joy and vintage playfulness.

Best used for

  • Candy packaging and confectionery branding
  • Children's games and playful app interfaces
  • Pop art-inspired digital illustrations and graphics
  • Event branding for funfairs or retro-themed parties
  • Fashion accessories and playful merchandise design
  • Creative advertising and social media campaigns targeting youth

Suggested color roles

primary

Choose #FF6666 (bright red) or #6666FF (electric blue) to anchor your design, perfect for main headings, critical calls to action, or dominant brand elements that need to be highly visible.

secondary

Utilize #66FF66 (lime green) or #FFCC66 (golden orange) to provide energetic contrast, ideal for secondary information, interactive states, or playful graphical patterns.

accent

Employ #FF66CC (hot pink) to add a strong, playful pop, perfect for highlighting key features, small details, or decorative motifs that need to stand out with a fun twist.

background

A pure white or very light grey background is essential to allow these highly saturated colors to shine without overwhelming the viewer, maintaining clarity and energy.

text

For optimal readability, a strong black text is recommended on any of these bright colors. On darker, richer backgrounds, crisp white text provides excellent contrast.

Accessibility notes

  • Given the high saturation, always check contrast ratios meticulously for text on any colored background; dark text (black) is almost always required.
  • Avoid using multiple highly saturated colors for large blocks of text or background to prevent visual fatigue and ensure legibility.
  • Be mindful of potential issues for colorblind users when using #FF6666 (red) and #66FF66 (green) in close proximity for conveying information.
  • For interactive elements, ensure hover/focus states provide clear visual cues beyond just color change, perhaps by adding a border or subtle animation.

Recommended combinations

Bold & Playful

A vibrant and energetic combination, perfect for main branding, playful headers, and striking calls to action that evoke a fun, retro candy feel.

#FF6666 · #FFCC66 · #6666FF

Fresh Contrast

Creates a lively and cheerful mood, ideal for illustrations, secondary content areas, or elements that need a bright, friendly, and unique touch.

#66FF66 · #FFCC66 · #FF66CC

High Impact

Offers a strong visual statement and excellent readability against a neutral background, suitable for hero sections, promotional banners, or bold graphic designs.

#6666FF · #FF6666 · #FFCC66

CSS variables

:root {
  --retro-diner-jellies-1: #FF6666;
  --retro-diner-jellies-2: #66FF66;
  --retro-diner-jellies-3: #6666FF;
  --retro-diner-jellies-4: #FFCC66;
  --retro-diner-jellies-5: #FF66CC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-diner-jellies": {
        1: "#FF6666",
        2: "#66FF66",
        3: "#6666FF",
        4: "#FFCC66",
        5: "#FF66CC",
      }
    }
  }
}

Related searches

candy color paletteplayful retro designbold primary color schemevibrant pop art colorsdiner sweets color combinations

Palette colors

Hex values

Color 1#FF6666
·
Color 2#66FF66
·
Color 3#6666FF
·
Color 4#FFCC66
·
Color 5#FF66CC
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
1.5:1Fail
1.9:1Fail
1.1:1Fail
2
2.2:1Fail
3.3:1AA18
1.1:1Fail
2:1Fail
3
1.5:1Fail
3.3:1AA18
2.9:1Fail
1.6:1Fail
4
1.9:1Fail
1.1:1Fail
2.9:1Fail
1.8:1Fail
5
1.1:1Fail
2:1Fail
1.6:1Fail
1.8:1Fail

Similar palettes

More like Retro Diner Jellies

View all Vibrant
Retro Candy Stripes
Retro Arcade Blast
Retro Candy Dream
Retro Comic Book
Retro Groove
Carnival Bright Delight