Palette

Retro Groove

A playful explosion of bold oranges, vibrant yellows, and fuchsia, channeling a fun 70s vibe.

VibrantPlayful5 colors

More Vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF5733#FFC300#DAF7A6#C70039#900C3F

Palette guide

How to use Retro Groove

Overview

The Retro Groove palette is a warm, playful, and energetic collection that instantly transports you to the vibrant 70s. It features a bold orange-red #FF5733 and a bright, sunny yellow #FFC300, creating an inviting warmth. A soft, muted lime green #DAF7A6 adds a fresh, earthy balance, while a rich crimson #C70039 and a deep burgundy #900C3F provide sophisticated depth. This palette is perfect for designers and developers aiming to evoke a sense of fun, nostalgia, and groovy charm in branding, editorial design, or digital interfaces that need a unique, retro-inspired personality.

Best used for

70s retro branding
Food and beverage packaging
Playful website designs
Children's product marketing
Event posters for vintage fairs
Editorial illustrations with a quirky feel

Suggested color roles

primary

#FF5733 - A warm, inviting orange-red, excellent for main headings, calls-to-action, or dominant brand elements.

secondary

#FFC300 - A bright, optimistic yellow, perfect for secondary highlights, accents, or interactive elements that need to feel cheerful.

accent

#DAF7A6 - A soft, muted lime green, ideal for providing a fresh contrast, subtle backgrounds, or playful graphic details.

background

#DAF7A6 - This light, muted green offers a gentle and refreshing background that allows the warmer colors to pop without overwhelming.

text

#C70039 - A rich crimson provides excellent readability on lighter backgrounds like #DAF7A6 or white, adding a touch of retro sophistication.

Accessibility notes

Ensure #FFC300 (yellow) has sufficient contrast when used for text, especially on #DAF7A6 (light green).
#C70039 (crimson) and #900C3F (burgundy) provide good contrast for text on #DAF7A6 and white backgrounds.
Avoid pairing #FF5733 (orange-red) with #FFC300 (yellow) for small text, as contrast may be low for some users.
Use a contrast checker to verify readability for all text elements, especially the brighter colors.

Recommended combinations

Sunny Vibes

A cheerful and inviting combination, perfect for headers, playful branding, or summer-themed content.

#FF5733 · #FFC300 · #DAF7A6

Groovy Depth

Sophisticated yet playful, ideal for creating depth in illustrations, background patterns, or accentuating key elements.

#C70039 · #900C3F · #FFC300

Fresh Retro

Balances freshness with warmth, great for product packaging, lifestyle blogs, or unique UI components.

#DAF7A6 · #FF5733 · #C70039

CSS variables

:root {
  --retro-groove-1: #FF5733;
  --retro-groove-2: #FFC300;
  --retro-groove-3: #DAF7A6;
  --retro-groove-4: #C70039;
  --retro-groove-5: #900C3F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-groove": {
        1: "#FF5733",
        2: "#FFC300",
        3: "#DAF7A6",
        4: "#C70039",
        5: "#900C3F",
      }
    }
  }
}

Hex values

Color 1#FF5733

Color 2#FFC300

Color 3#DAF7A6

Color 4#C70039

Color 5#900C3F

Accessibility

Contrast checker

2:1Fail

2.7:1Fail

1.9:1Fail

2.9:1Fail

2:1Fail

1.4:1Fail

3.7:1AA18

5.7:1AA

2.7:1Fail

1.4:1Fail

5.1:1AA

7.7:1AAA