Spotify

Spotify corporate palette built around Spotify Green (#1DB954, with the brighter #1ED760 introduced as the refreshed primary in the 2015 brand update) and a deep-black canvas. The brand is dark-first: the consumer player, marketing, and the official Spotify logomark all live on black with green reading as the high-energy accent. The black-and-green pairing is the most recognizable element of the Spotify identity.

9 swatches 14 light roles 14 dark roles streamingaudiospotifygreendark-firstcorporate

Swatches

spotify-green
#1ED760
Current primary brand green — used on the wordmark, the play affordance, and primary CTAs.
spotify-green-legacy
#1DB954
The legacy Spotify Green established with the brand. Still appears across press assets and older surfaces.
spotify-green-pressed
#169C46
Darker green for pressed/active states on the primary action.
spotify-black
#000000
Canonical canvas — the Spotify consumer surface is solid black.
spotify-dark
#121212
Elevated surface of the Spotify consumer app — the player chrome and main panel sit on this near-black.
spotify-elevated
#181818
Cards, hovered rows, and elevated tiles use this slightly lifted near-black.
spotify-gray
#535353
Secondary text and divider color on the dark canvas.
spotify-gray-light
#B3B3B3
Tertiary text, captions, metadata in the player UI.
spotify-white
#FFFFFF
Primary text on the dark canvas; reversed wordmark fill on light marketing.

Mode role mappings

Light mode (14 roles)

accent → spotify-green
accent-hover → spotify-green-pressed
background → spotify-white
error → spotify-gray
primary → spotify-green
primary-hover → spotify-green-pressed
success → spotify-green
surface → spotify-white
surface-elevated → spotify-white
text-primary → spotify-black
text-secondary → spotify-gray
text-tertiary → spotify-gray-light
warning → spotify-green-legacy
warning-hover → spotify-green-pressed

Dark mode (14 roles)

accent → spotify-green
accent-hover → spotify-green-pressed
background → spotify-black
error → spotify-gray-light
primary → spotify-green
primary-hover → spotify-green-pressed
success → spotify-green
surface → spotify-dark
surface-elevated → spotify-elevated
text-primary → spotify-white
text-secondary → spotify-gray-light
text-tertiary → spotify-gray
warning → spotify-green-legacy
warning-hover → spotify-green-pressed

Provenance

Source
https://developer.spotify.com/documentation/design
License
Proprietary — All Rights Reserved
Attribution
Spotify AB — Spotify, the Spotify wordmark, and the three-arc "soundwave" mark are registered trademarks of Spotify AB. The primary green (#1ED760) and the legacy Spotify Green (#1DB954) are documented across Spotify's developer design guidance and in the official Spotify logomark assets.
Imported
2026-05-17
Notes
Dark mode is the canonical Spotify surface. The light-mode role mapping is an authored inversion for consumers that need a light-surface treatment; it is not the Spotify-published canonical surface. The two greens (#1DB954 legacy and #1ED760 current) coexist in the brand; #1ED760 is the dominant primary on current product surfaces.