Back to palettes

Palette

Vinyl Record Groove

A cool grayscale palette, mimicking the smooth, dark surface and subtle reflections of a vinyl record.

monochromeretro5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C2C2C#4A4A4A#686868#868686#A4A4A4

Palette guide

How to use Vinyl Record Groove

Overview

The Vinyl Record Groove palette offers a sleek, sophisticated grayscale that perfectly mimics the smooth, dark surface and subtle reflections of a classic vinyl record. Ranging from the deep #2C2C2C to the soft #A4A4A4, this monochrome collection is ideal for designers seeking a timeless, minimalist, and retro aesthetic. It provides a highly versatile foundation for creating clean, professional, and elegant designs that emphasize content and form. The various shades of grey, including the balanced #686868, allow for depth and visual hierarchy without the distraction of color, making it perfect for interfaces and branding that demand understated class.

Best used for

  • High-fidelity audio product branding
  • Minimalist photography portfolios
  • Modern tech and gadget interfaces
  • Editorial layouts and digital publications
  • Industrial design concepts
  • Classic rock or jazz music websites

Suggested color roles

primary

#2C2C2C - A deep, foundational black perfect for backgrounds, headers, or prominent UI elements, establishing a sleek, dark aesthetic.

secondary

#4A4A4A - A rich, dark grey ideal for supporting panels, sub-sections, or distinct UI components, adding subtle contrast to the primary.

accent

#868686 - A balanced mid-grey that serves as a subtle highlight for interactive elements, dividers, or delicate decorative details.

background

#A4A4A4 - A light, clean grey providing an airy and modern background for content areas, offering excellent readability for dark text.

text

On darker greys like #2C2C2C and #4A4A4A, use white or a very light grey for optimal readability. For #A4A4A4, #2C2C2C or a deep charcoal provides excellent contrast.

Accessibility notes

  • Ensure white or light grey text has sufficient contrast against the darker #2C2C2C and #4A4A4A for readability.
  • Be cautious with text contrast when pairing mid-tone greys like #686868 with backgrounds of similar luminance, such as #868686.
  • Critical UI elements should be tested for WCAG AA/AAA compliance, especially those using lighter accents on darker backgrounds.
  • Avoid using small font sizes with colors that have low contrast, particularly with #868686 on #A4A4A4 for non-essential text.

Recommended combinations

Classic Grayscale

Ideal for a sleek dark mode, using the deepest grey as the background, the lightest grey for main content, and the mid-grey for headings or accents.

#2C2C2C · #A4A4A4 · #686868

Analog Interface

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

#4A4A4A · #868686 · #2C2C2C

Sleek Tones

Effective for creating a balanced, professional look, with the mid-grey as a background, the darkest grey for prominent text or links, and the lightest grey for subtle accents.

#686868 · #2C2C2C · #A4A4A4

CSS variables

:root {
  --vinyl-record-groove-1: #2C2C2C;
  --vinyl-record-groove-2: #4A4A4A;
  --vinyl-record-groove-3: #686868;
  --vinyl-record-groove-4: #868686;
  --vinyl-record-groove-5: #A4A4A4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vinyl-record-groove": {
        1: "#2C2C2C",
        2: "#4A4A4A",
        3: "#686868",
        4: "#868686",
        5: "#A4A4A4",
      }
    }
  }
}

Related searches

grayscale UI designdark grey color schememinimalist analog palettevinyl aesthetic brandingclassic monochrome web design

Palette colors

Hex values

Color 1#2C2C2C
·
Color 2#4A4A4A
·
Color 3#686868
·
Color 4#868686
·
Color 5#A4A4A4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.5:1Fail
3.8:1AA18
5.6:1AA
2
1.6:1Fail
1.6:1Fail
2.4:1Fail
3.6:1AA18
3
2.5:1Fail
1.6:1Fail
1.5:1Fail
2.2:1Fail
4
3.8:1AA18
2.4:1Fail
1.5:1Fail
1.5:1Fail
5
5.6:1AA
3.6:1AA18
2.2:1Fail
1.5:1Fail

Similar palettes

More like Vinyl Record Groove

View all monochrome
Vintage Cinema Reel
Vintage Vinyl Record
Steampunk Machine Hues
Vintage Sepia Print
Ancient Marble Column
Grayscale Photo Grain