Back to palettes

Palette

Retro Cassette Tape

Muted greys and cool blues, reflecting the understated cool of classic 80s cassette tapes.

retroretro5 colors
More retro palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#696969#A9A9A9#B0C4DE#87CEEB

Palette guide

How to use Retro Cassette Tape

Overview

The "Retro Cassette Tape" palette evokes the understated cool and nostalgic charm of classic 80s and 90s audio equipment. This collection features a deep dark slate grey (#2F4F4F), a solid dim grey (#696969), a balanced dark grey (#A9A9A9), a soft light steel blue (#B0C4DE), and a clear sky blue (#87CEEB). Designers will find these muted greys and cool blues perfect for creating sophisticated, vintage-inspired interfaces or branding that speaks to reliability and classic design. Developers can leverage this cohesive set to build clean, functional, and aesthetically pleasing UIs where subtle shifts in tone define hierarchy and user experience, without overwhelming the senses.

Best used for

  • Tech-related retro branding
  • Vintage audio equipment websites
  • Minimalist UI designs
  • Photography portfolios
  • Documentary film branding
  • Professional corporate designs with a retro twist

Suggested color roles

primary

A deep, grounding primary for backgrounds, main navigation, or strong textual elements using #2F4F4F.

secondary

A robust secondary for subheadings, card backgrounds, or primary UI elements using #696969.

accent

A clear, refreshing accent perfect for interactive elements, highlights, or subtle calls-to-action using #87CEEB.

background

A soft, cool background that provides a gentle base for content using #B0C4DE, ideal for a clean and spacious feel.

text

Use #2F4F4F or black for body text on lighter backgrounds like #B0C4DE or #A9A9A9. White or very light grey text works well on #2F4F4F and #696969.

Accessibility notes

  • Ensure sufficient contrast when using #A9A9A9 with #B0C4DE, especially for smaller text.
  • White text on #87CEEB generally performs well, but test for critical information against WCAG AA standards.
  • Avoid using #B0C4DE as text on #A9A9A9 for readability issues; always aim for higher contrast pairings.
  • Dark text (e.g., #2F4F4F) on lighter backgrounds like #B0C4DE provides good readability.

Recommended combinations

Classic UI

Dark grey for panels, light grey for text/icons, and sky blue for interactive elements.

#2F4F4F · #A9A9A9 · #87CEEB

Subtle Gradient

Create a smooth, understated gradient for backgrounds or large sections, shifting from grey to light blue.

#696969 · #B0C4DE · #A9A9A9

Vintage Text

Use dark slate grey for main titles, light steel blue for subtext, and dark grey for subtle highlights.

#2F4F4F · #B0C4DE · #A9A9A9

CSS variables

:root {
  --retro-cassette-tape-1: #2F4F4F;
  --retro-cassette-tape-2: #696969;
  --retro-cassette-tape-3: #A9A9A9;
  --retro-cassette-tape-4: #B0C4DE;
  --retro-cassette-tape-5: #87CEEB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-cassette-tape": {
        1: "#2F4F4F",
        2: "#696969",
        3: "#A9A9A9",
        4: "#B0C4DE",
        5: "#87CEEB",
      }
    }
  }
}

Related searches

80s grey blue palettevintage tech colorsmuted retro designsubtle cool tonesclassic cassette aesthetic

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#696969
·
Color 3#A9A9A9
·
Color 4#B0C4DE
·
Color 5#87CEEB
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3.8:1AA18
5:1AA
5.1:1AA
2
1.6:1Fail
2.3:1Fail
3.1:1AA18
3.2:1AA18
3
3.8:1AA18
2.3:1Fail
1.3:1Fail
1.3:1Fail
4
5:1AA
3.1:1AA18
1.3:1Fail
1:1Fail
5
5.1:1AA
3.2:1AA18
1.3:1Fail
1:1Fail

Similar palettes

More like Retro Cassette Tape

View all retro