Spotify Dark Mode Colors: #121212
What is the Spotify dark mode hex code?
Spotify dark mode uses background #121212, cards #181818, elevated surfaces #282828, and the signature Spotify green #1DB954 with #FFFFFF text. Copy each hex below for your own dark UI.
- Background: #121212
- Green: #1DB954
- Text: #B3B3B3
Copy Spotify dark mode hex codes—background #121212, cards #181818, elevated #282828, and Spotify green #1DB954—for UI inspiration and dark theme tokens.
Spotify Dark Mode — Quick Copy
Main backgrounds, green accent, and text tokens from Spotify dark theme. Click Copy on any row.
What is the Hex Code for Spotify Dark Mode?
The main Spotify dark mode background is #121212—a near-black gray that keeps album art vivid without harsh pure-black contrast. Cards and tiles use #181818; elevated surfaces like the now-playing bar and menus use #282828. Primary text is #FFFFFF with secondary metadata in #B3B3B3.
Spotify Green Hex Code
The signature Spotify green is #1DB954 (rgb(29, 185, 84)). A brighter #1ED760 appears on the play button and hover states, and #1AA34A is used for the pressed state. Reserve the green for primary actions—play, follow, and brand moments—so it keeps its meaning against the neutral grays.
Spotify Dark Mode Background Colors
Spotify layers three near-black surfaces so depth reads clearly without heavy shadows:
- #121212 — main app canvas
- #181818 — album cards and playlist tiles
- #282828 — now-playing bar, menus, and modals
Copy any value from the quick-answer box above or the full table below.
What Color is Spotify Dark Mode?
Spotify dark mode is a near-black gray (#121212), not pure black. This keeps colorful album artwork the visual hero while reducing eye strain, and lets card layers (#181818) and elevated surfaces (#282828) separate with only a few percent luminance difference.
Full Spotify Dark Mode Color Palette
Complete Spotify dark theme hex list—backgrounds, cards, text, and the signature green accent.
| Swatch | Token | Hex |
|---|---|---|
| Main background | #121212 | |
| Card base | #181818 | |
| Card hover | #1A1A1A | |
| Elevated surface | #282828 | |
| Highlight / active | #333333 | |
| Border / divider | #292929 | |
| Text primary | #FFFFFF | |
| Text subdued | #B3B3B3 | |
| Text muted | #A7A7A7 | |
| Spotify green | #1DB954 | |
| Bright green | #1ED760 | |
| Green pressed | #1AA34A |
How to Use Spotify Colors in Your Design
Treat Spotify hex codes as a reference architecture, not a brand kit. Map roles to tokens: --color-canvas = #121212, --color-surface = #181818, --color-accent = #1DB954. Swap the green for your own accent while keeping the near-black layering intact.
Always run text pairs through a WCAG contrast checker: #B3B3B3 on #121212 passes for large labels but check small body copy. Compare with Discord dark mode colors and the broader dark mode color palette guide.
Spotify Color Palette for UI Inspiration
Three ways to adapt Spotify dark mode colors for music apps, dashboards, and media products—without cloning the brand.
Spotify-style music app
Mirror Spotify layers: #121212 canvas, #181818 cards, #282828 now-playing bar, #1DB954 play button, #B3B3B3 metadata.
Spotify + custom brand accent
Keep the near-black neutrals for depth; swap Spotify green for your brand hue (e.g. #F59E0B amber or #6366F1 indigo) on primary actions only.
Spotify-inspired dashboard
Use #121212 canvas, #181818 cards, #282828 panels, #1DB954 for positive KPIs, and #B3B3B3 chart labels for a calm, focused data UI.
Why Spotify Dark Mode Works
Spotify optimizes for content: near-black neutrals let album art and playlists pop, the green accent appears only on interactive elements, and three layered surfaces create depth without shadows. Media, audio, and entertainment apps borrow this pattern because it keeps colorful content the focus.
For more dark UI theory—including Material #121212 and accessible token naming—see our dark mode color palette guide.
FAQ
- What is the Spotify dark mode background color hex code?
- The Spotify dark mode background hex code is #121212 — a near-black gray. Cards use #181818, elevated surfaces like the now-playing bar use #282828, and primary text is #FFFFFF.
- What is the Spotify green hex code?
- The Spotify green hex code is #1DB954 (rgb(29, 185, 84)). A brighter variant #1ED760 is used on the play button and hover states, with #1AA34A for pressed states.
- What are all the Spotify dark mode colors?
- Spotify dark UI uses #121212 background, #181818 cards, #282828 elevated surfaces, #FFFFFF primary text, #B3B3B3 secondary text, and #1DB954 green accent. Copy each from the table on this page.
- Can I use Spotify colors in my own app design?
- Spotify hex values are widely referenced for dark UI inspiration. For commercial products, treat them as a starting point—define your own tokens, swap the green for your brand accent, and verify WCAG contrast.
Build your own dark palette
Start from Spotify neutrals or generate a custom dark theme with harmonized accents.