Palette

Vintage Vinyl Record

Muted greys and soft neutrals create a nostalgic feel, reminiscent of old vinyl records and classic analog sound.

monochromeretro5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Vintage Vinyl Record 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 Vintage Vinyl Record.

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

Data visualization

#2C3E50#34495E#7F8C8D#BDC3C7#ECF0F1

Palette guide

How to use Vintage Vinyl Record

Overview

The Vintage Vinyl Record palette offers a sophisticated range of cool greys and subtle blue-greys, capturing the nostalgic feel of old vinyl and classic analog sound. With deep #2C3E50 providing a strong foundation, complemented by the versatile mid-tone #7F8C8D and the clean brightness of #ECF0F1, this collection is perfect for designs seeking a muted, retro, and minimalist aesthetic. It's an excellent choice for designers who want to evoke a sense of clarity, precision, and understated elegance. These shades are highly adaptable for modern interfaces, tech branding, or any project that benefits from a cool, composed, and timeless visual identity.

Best used for

Tech startups (minimalist branding)
Modern art gallery websites
Architecture and design firm portfolios
Digital product interfaces and dashboards
Sophisticated personal branding
Automotive websites (luxury/classic cars)

Suggested color roles

primary

#2C3E50 - A deep, cool blue-grey that serves as a strong, grounding primary for backgrounds, headers, or critical UI elements.

secondary

#34495E - A slightly lighter, yet still deep, blue-grey perfect for supporting panels, sub-sections, or distinct UI components.

accent

#BDC3C7 - A soft, cool light grey ideal for subtle highlights, interactive elements, or delicate decorative details.

background

#ECF0F1 - A very light, clean off-white that provides an airy and modern background for content areas.

text

On #ECF0F1 and #BDC3C7, use #2C3E50 or a dark charcoal for optimal readability. For #2C3E50 and #34495E, white or a very light grey text is recommended.

Accessibility notes

Ensure high contrast for text: White or very light grey text on #2C3E50 and #34495E is crucial for readability.
Be mindful of contrast between adjacent greys: Text or UI elements in #7F8C8D may lack sufficient contrast on backgrounds like #BDC3C7.
Check WCAG AA/AAA compliance for critical interactive elements, especially when using accent colors on lighter backgrounds.
Avoid using small body text in mid-tones like #7F8C8D against backgrounds that are too close in luminance, such as #34495E.

Recommended combinations

Clean Analog

Ideal for a sleek, modern interface, using the deep blue-grey as a background, the off-white for main content, and the light grey for subtle accents or interactive elements.

#2C3E50 · #ECF0F1 · #BDC3C7

Muted Depth

Great for layering UI components or cards, where the mid-dark blue-grey acts as a base, complemented by the mid-grey for text, and the light grey for highlights.

#34495E · #7F8C8D · #BDC3C7

Vinyl Surface

Effective for creating a clean, legible content area, with the lightest color as the background, the darkest for prominent text or links, and the mid-dark for secondary elements.

#ECF0F1 · #2C3E50 · #34495E

CSS variables

:root {
  --vintage-vinyl-record-1: #2C3E50;
  --vintage-vinyl-record-2: #34495E;
  --vintage-vinyl-record-3: #7F8C8D;
  --vintage-vinyl-record-4: #BDC3C7;
  --vintage-vinyl-record-5: #ECF0F1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vintage-vinyl-record": {
        1: "#2C3E50",
        2: "#34495E",
        3: "#7F8C8D",
        4: "#BDC3C7",
        5: "#ECF0F1",
      }
    }
  }
}

Hex values

Color 1#2C3E50

Color 2#34495E

Color 3#7F8C8D

Color 4#BDC3C7

Color 5#ECF0F1

Accessibility

Contrast checker

1.2:1Fail

3.2:1AA18

6.2:1AA

9.6:1AAA

1.2:1Fail

2.7:1Fail

5.2:1AA

8.1:1AAA

3.2:1AA18

2.7:1Fail

2:1Fail

3:1AA18

6.2:1AA

5.2:1AA

2:1Fail

1.6:1Fail

9.6:1AAA

8.1:1AAA

3:1AA18

1.6:1Fail

Similar palettes

More like Vintage Vinyl Record

View all monochrome

Vintage Cinema Reel

Vinyl Record Groove

Steampunk Machine Hues

Vintage Sepia Print

Ancient Forest Myst

Ash Cloud Symphony