Back to palettes

Palette

Retro Vinyl Groove

A punchy, vibrant mix echoing vintage album covers and the energetic beat of a classic vinyl record spinning.

vibrantretro5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2B2D42#EF233C#FFC300#00B4D8#8D99AE

Palette guide

How to use Retro Vinyl Groove

Overview

The Retro Vinyl Groove palette delivers a punchy, vibrant mix echoing vintage album covers and the energetic beat of a classic record. This scheme includes a deep, dark blue (#2B2D42), a striking red (#EF233C), a sunny yellow (#FFC300), a cool cyan (#00B4D8), and a muted grey (#8D99AE). It’s perfect for capturing a nostalgic yet dynamic feel, offering designers a versatile set of colors to create compelling and memorable visual narratives. The strong contrasts allow for impactful messaging and distinct branding.

Best used for

  • Music streaming app interfaces
  • Vintage-inspired concert posters
  • Retro gaming graphics and themes
  • Bold product packaging, especially for entertainment
  • Dynamic branding for creative agencies
  • Event invitations with a nostalgic twist

Suggested color roles

primary

Use #EF233C (Red) for primary calls to action or key headings to grab immediate attention.

secondary

Apply #FFC300 (Yellow) for secondary buttons, highlights, or to add a cheerful pop.

accent

Incorporate #00B4D8 (Cyan) for interactive elements, notifications, or subtle design flourishes.

background

Utilize #2B2D42 (Dark Blue) as a dominant background color for a sophisticated, retro feel that makes bright accents shine.

text

For readability on dark backgrounds like #2B2D42, use white or #8D99AE. For lighter backgrounds, #2B2D42 provides excellent contrast.

Accessibility notes

  • Ensure sufficient contrast when placing #FFC300 on #8D99AE for text or important elements.
  • The bright colors (#EF233C, #FFC300, #00B4D8) provide excellent contrast against #2B2D42.
  • Avoid using #8D99AE for small text on #2B2D42; opt for white or a brighter accent.
  • Test color combinations for readability, especially for users with color vision deficiencies, using tools.

Recommended combinations

Classic Contrast

Ideal for main branding, headers, and call-to-action sections for a bold statement.

#2B2D42 · #EF233C · #FFC300

Retro Accent

Great for subtle background patterns, navigation elements, or secondary information panels.

#2B2D42 · #00B4D8 · #8D99AE

Vibrant Highlight

Effective for product features, infographic highlights, or playful UI elements.

#8D99AE · #EF233C · #FFC300

CSS variables

:root {
  --retro-vinyl-groove-1: #2B2D42;
  --retro-vinyl-groove-2: #EF233C;
  --retro-vinyl-groove-3: #FFC300;
  --retro-vinyl-groove-4: #00B4D8;
  --retro-vinyl-groove-5: #8D99AE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-vinyl-groove": {
        1: "#2B2D42",
        2: "#EF233C",
        3: "#FFC300",
        4: "#00B4D8",
        5: "#8D99AE",
      }
    }
  }
}

Related searches

vintage music palettealbum cover colorsenergetic retro designbold pop art palettemusic brand colors

Palette colors

Hex values

Color 1#2B2D42
·
Color 2#EF233C
·
Color 3#FFC300
·
Color 4#00B4D8
·
Color 5#8D99AE
·

Accessibility

Contrast checker

1
2
3
4
5
1
3.2:1AA18
8.4:1AAA
5.5:1AA
4.7:1AA
2
3.2:1AA18
2.6:1Fail
1.7:1Fail
1.5:1Fail
3
8.4:1AAA
2.6:1Fail
1.5:1Fail
1.8:1Fail
4
5.5:1AA
1.7:1Fail
1.5:1Fail
1.2:1Fail
5
4.7:1AA
1.5:1Fail
1.8:1Fail
1.2:1Fail

Similar palettes

More like Retro Vinyl Groove

View all vibrant
Retro Atomic Era
Retro Kitsch Pop
Retro Mod Orange
Retro Sunset Drive
Atomic Age
Atomic Age Diner