Spotify Wrapped color palette
EntertainmentSpotify Wrapped uses a vibrant, energetic palette centered around its iconic green, paired with dark backgrounds and bold accent colors to create a distinctive annual campaign identity. The color system is designed for high contrast and digital-first experiences.
spotify.comSpotify Wrapped 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
- Wrapped PinkAccent255, 210, 224
Surfaces
Page, cards and dividers.- Wrapped Deep BlackBackground18, 18, 18
- Wrapped CharcoalSurface40, 40, 40
- Wrapped Gray BorderBorder83, 83, 83
Text
Three tiers of copy.- Wrapped WhiteText255, 255, 255
- Wrapped GraySecondary text179, 179, 179
- Wrapped Muted GrayMuted text114, 114, 114
Semantic
Feedback and state colors.- Spotify GreenSuccess29, 185, 84
- Wrapped YellowWarning255, 215, 0
- Wrapped RedError226, 33, 52
- Wrapped BlueInfo64, 169, 255
Use Spotify Wrapped's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
spotify-wrapped-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #40A9FF;
--error: #E22134;
--accent: #FFD2E0;
--border: #535353;
--primary: #1DB954;
--success: #1DB954;
--surface: #282828;
--warning: #FFD700;
--secondary: #191414;
--text-muted: #727272;
--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.9:1
Pass
Muted text on surface
Needs 3:1 for large text
3.1:1
Pass
Spotify Wrapped gray, dark and neutral colors
Spotify Wrapped 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.
- Wrapped Deep BlackBackground
- HEX
- RGB
- HSL
- Wrapped CharcoalSurface
- HEX
- RGB
- HSL
- Wrapped Gray BorderBorder
- HEX
- RGB
- HSL
- Wrapped WhiteText
- HEX
- RGB
- HSL
- Wrapped GraySecondary text
- HEX
- RGB
- HSL
- Wrapped Muted GrayMuted text
- HEX
- RGB
- HSL
About Spotify Wrapped's colors
Spotify Wrapped's palette is built around high-contrast, saturated colors for digital impact. The green primary is complemented by dark neutrals and bold seasonal accents.
Primary green contrasts with deep black backgrounds.
Accent pink and yellow add energy to campaign visuals.
Neutral grays support readability and UI clarity.
Psychology
The green evokes freshness and energy, while the dark backgrounds create a sense of immersion. Bright accents signal celebration and highlight key moments.
Evolution
The core palette has remained stable, with Spotify Green and deep blacks as constants. Wrapped-specific accents change annually, but the foundational colors are consistent.
Where Spotify Wrapped uses each color
- Primary
Used for key brand marks, buttons, and highlights across Wrapped assets.
- Secondary
Forms the main background for the app and campaign visuals.
- Accent
Applied to highlight statistics, badges, and promotional graphics.
- Backgrounds
Deep black and charcoal are used for app screens and digital backgrounds.
- Text
White and gray tones are used for all text and UI labels.
- Semantic
Green signals success, yellow for warnings, red for errors, and blue for informational highlights.
Spotify Wrapped color questions
Hex codes, RGB values, neutrals and how to use the palette.
The primary Spotify Wrapped brand color is Spotify Green, with the hex code #1DB954.
Spotify Green is #1DB954, which is RGB(29, 185, 84) and approximately CMYK(84, 0, 55, 27).
Spotify Wrapped uses #191414 (Spotify Black), #121212 (Wrapped Deep Black), and #282828 (Wrapped Charcoal) for backgrounds and UI surfaces.
Use Spotify Green (#1DB954) for primary actions and highlights, dark backgrounds for immersion, and accent colors for emphasis. Maintain high contrast for accessibility and brand consistency.
The secondary color is Spotify Black, #191414, and the accent is Wrapped Pink, #FFD2E0. Together with the primary they make up the three brand colors at the top of this page.
6 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 Wrapped's colors consistently when it generates UI.
Make something in the spirit of Spotify Wrapped
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.