Palette

Retro Kitsch Pop

Bold and playful, a mix of vibrant primaries and muted darks capturing a classic retro aesthetic.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F4D35E#EE964B#F95738#233D47#546C64

Palette guide

How to use Retro Kitsch Pop

Overview

The "Retro Kitsch Pop" palette offers a sophisticated take on vintage aesthetics, blending vibrant, warm hues with grounded, muted darks. Designers can harness the bright energy of #F4D35E (a goldenrod yellow) and the inviting warmth of #EE964B (a rich orange) to create engaging focal points. The bold #F95738 (a fiery red-orange) provides an undeniable pop, perfect for calls-to-action. These lively tones are beautifully anchored by the deep, mysterious #233D47 (a dark teal) and the earthy #546C64 (a muted green-gray). This palette is excellent for projects requiring a mature retro feel with strong visual impact, ensuring clarity and depth in UI elements and branding.

Best used for

High-end retro branding
Vintage-inspired fashion blogs
Art deco or mid-century modern interiors
Editorial design for lifestyle magazines
Event promotion for sophisticated gatherings
E-commerce for unique, handcrafted goods

Suggested color roles

primary

#F95738 (A strong, vibrant red-orange that demands attention, ideal for primary calls-to-action.)

secondary

#EE964B (A warm, inviting orange, excellent for secondary buttons, highlights, or graphical elements.)

accent

#F4D35E (A cheerful goldenrod, perfect for small, impactful details, icons, or notification badges.)

background

#233D47 (A deep, grounding dark teal that provides a sophisticated and stable base for the brighter colors to shine.)

text

Use dark gray or black on #F4D35E, #EE964B, #F95738. Use white or a very light gray on #233D47 and #546C64.

Accessibility notes

Ensure very dark text is used on #F4D35E for optimal contrast and readability.
White or very light text will be necessary for legibility when placed on #233D47 and #546C64.
The vibrancy of #EE964B and #F95738 means careful contrast testing is needed for text, potentially allowing both dark and light options depending on size.
Be mindful of using #F95738 as a sole indicator for critical information due to potential issues for color-blind users.

Recommended combinations

Bold & Grounded

For impactful hero sections or branding that needs to convey both energy and stability.

#F95738 · #233D47 · #F4D35E

Warm Earth

Creates an inviting, natural retro feel, great for content blocks or visual storytelling.

#EE964B · #546C64 · #F4D35E

Deep Contrast

Emphasizes a strong contrast, ideal for striking headlines or interactive elements against a dark theme.

#233D47 · #F95738 · #EE964B

CSS variables

:root {
  --retro-kitsch-pop-1: #F4D35E;
  --retro-kitsch-pop-2: #EE964B;
  --retro-kitsch-pop-3: #F95738;
  --retro-kitsch-pop-4: #233D47;
  --retro-kitsch-pop-5: #546C64;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-kitsch-pop": {
        1: "#F4D35E",
        2: "#EE964B",
        3: "#F95738",
        4: "#233D47",
        5: "#546C64",
      }
    }
  }
}

Hex values

Color 1#F4D35E

Color 2#EE964B

Color 3#F95738

Color 4#233D47

Color 5#546C64

Accessibility

Contrast checker

1.6:1Fail

2.2:1Fail

7.8:1AAA

3.9:1AA18

1.6:1Fail

1.4:1Fail

5:1AA

2.5:1Fail

2.2:1Fail

1.4:1Fail

3.5:1AA18

1.7:1Fail

7.8:1AAA

5:1AA

3.5:1AA18

2:1Fail

3.9:1AA18

2.5:1Fail

1.7:1Fail

2:1Fail

Similar palettes

More like Retro Kitsch Pop