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 logo is a trademark of Spotify. Used for informational purposes.
Brand Colors
Spotify Green
primary
Spotify Black
secondary
Spotify Bright Green
accent
Surfaces & Borders
Spotify Dark
background
Spotify Surface
surface
Spotify Border
border
Typography
Spotify White
textPrimary
Spotify Light Gray
textSecondary
Spotify Muted
textMuted
Semantic Colors
Spotify Success
success
Spotify Warning
warning
Spotify Error
error
Spotify Info
info
Accessibility
textPrimary / background
textPrimary / surface
textSecondary / background
textSecondary / surface
textMuted / background
textMuted / surface
Color Theory
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
Color 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.
How Spotify Uses 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.
Typography
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.
Agent integration
Use Spotify's Colors in Your Agent
Terminal
Copies full install command. Saves skill to .claude/skills/spotify/ — auto-detected on next run.
Included in the skill file
- 113 color roles — hex, HSL, and CSS variable names
- 2WCAG contrast rules for accessible pairings
- 3Auto-applies Spotify's palette when generating UI
Frequently Asked Questions
Create Something Inspired by Spotify
Generate a unique color palette inspired by Spotify's aesthetic using AI.