Spotify color palette
EntertainmentSpotify's brand is anchored by its iconic green on a dark interface, creating an immersive environment where album art becomes the primary visual element.
spotify.comSpotify colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Spotify GreenPrimary29, 185, 84
- Spotify BlackSecondary25, 20, 20
- Spotify Bright GreenAccent30, 215, 96
Surfaces
Page, cards and dividers.- Spotify DarkBackground18, 18, 18
- Spotify SurfaceSurface40, 40, 40
- Spotify BorderBorder64, 64, 64
Text
Three tiers of copy.- Spotify WhiteText255, 255, 255
- Spotify Light GraySecondary text179, 179, 179
- Spotify MutedMuted text106, 106, 106
Semantic
Feedback and state colors.- Spotify SuccessSuccess29, 185, 84
- Spotify WarningWarning255, 164, 43
- Spotify ErrorError233, 20, 41
- Spotify InfoInfo46, 119, 208
Use Spotify's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
spotify-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #2E77D0;
--error: #E91429;
--accent: #1ED760;
--border: #404040;
--primary: #1DB954;
--success: #1DB954;
--surface: #282828;
--warning: #FFA42B;
--secondary: #191414;
--text-muted: #6A6A6A;
--background: #121212;
--text-primary: #FFFFFF;
--text-secondary: #B3B3B3;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
18.7:1
Pass
Text on surface
Needs 4.5:1 for body text
14.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
8.9:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
7.0:1
Pass
Muted text on background
Needs 3:1 for large text
3.5:1
Pass
Muted text on surface
Needs 3:1 for large text
2.7:1
Fail
Spotify gray, dark and neutral colors
Spotify runs a dark interface, so these grays carry the layout: background, sidebar surfaces, dividers and three tiers of text. Click a value to copy it.
- Spotify DarkBackground
- HEX
- RGB
- HSL
- Spotify SurfaceSurface
- HEX
- RGB
- HSL
- Spotify BorderBorder
- HEX
- RGB
- HSL
- Spotify WhiteText
- HEX
- RGB
- HSL
- Spotify Light GraySecondary text
- HEX
- RGB
- HSL
- Spotify MutedMuted text
- HEX
- RGB
- HSL
About Spotify's colors
Spotify's dark-first color system places a vibrant green against near-black surfaces. This high-contrast approach creates an immersive listening environment where album artwork provides the color, not the interface.
The green-on-black contrast creates a striking 8.5:1 contrast ratio that's instantly recognizable
Varying surface grays (#121212, #282828, #404040) create depth without introducing new hues
Album art gradients dynamically inject color, making each view unique
Psychology
Green signals growth, freshness, and vitality — qualities that align with discovering new music. The dark interface suggests nightlife, studios, and premium media experiences. Together they create an intimate, focused environment.
Evolution
Spotify's green has shifted from a brighter lime (#84BD00) in 2013 to the current deeper #1DB954, reflecting a maturation of the brand. The dark interface has been consistent since the desktop app's inception.
Where Spotify uses each color
- Primary
Spotify Green (#1DB954) defines the play button, shuffle, and key interactive elements — it's the color of action in Spotify's UI.
- Secondary
Near-black (#191414) serves as the primary brand background, creating the signature dark canvas.
- Accent
Bright Green (#1ED760) is used for hover states and premium emphasis, providing subtle but clear interaction feedback.
- Backgrounds
A layered dark surface system (#121212 → #282828 → #404040) creates spatial depth through elevation alone.
- Text
White text on dark backgrounds with two gray levels (B3B3B3, 6A6A6A) ensures readability in low-light environments.
- Semantic
Semantic colors are kept muted to avoid competing with album art — the dynamic palette from album covers provides ambient color.
Spotify color questions
Hex codes, RGB values, neutrals and how to use the palette.
Spotify Green is #1DB954. This is the official brand color used for the Spotify logo, play buttons, and primary interactive elements across all platforms.
Spotify uses a dark interface (#121212 background) so album artwork becomes the primary source of color. This creates an immersive experience where the music's visual identity takes center stage.
Yes. Spotify's green evolved from a brighter lime green (#84BD00) to the current #1DB954 around 2015. The newer shade is deeper and more versatile, working better across dark and light contexts.
The secondary color is Spotify Black, #191414, and the accent is Spotify Bright Green, #1ED760. Together with the primary they make up the three brand colors at the top of this page.
Spotify uses #121212 for backgrounds, #282828 for surfaces and #404040 for borders. Text runs #FFFFFF, #B3B3B3 and #6A6A6A from strongest to most muted.
5 of 6 text and background pairings meet WCAG 2.1 AA contrast. The contrast section above shows every pairing with its exact ratio.
Use the export block on this page. It gives you CSS custom properties, a Tailwind config, W3C design tokens or a shadcn/ui theme built from these exact hex values, with copy and download buttons.
Yes. Export the Claude Code skill, Cursor rules or Codex prompt from the same block. The agent then applies Spotify's colors consistently when it generates UI.
Make something in the spirit of Spotify
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.