Spotify colors

Spotify color codes

Select a color to open its own page with tints, shades, harmonies and every color format, or open the whole set in the palette generator.

Where the Spotify colors come from

Spotify does not publish hex values in public brand guidelines, so these were read from the code of its live website (stylesheets and the SVG files it serves) on 16 October 2026. They are the colors open.spotify.com actually renders, which can differ slightly from print or logo colors.

• Source (live website CSS or SVG): https://open.spotifycdn.com/cdn/build/web-player/web-player.8ea418fe.css checked 2026-10-16
• Also: https://developer.spotify.com/documentation/design checked 2026-10-16

Spotify color contrast

Black text on Spotify Green has a contrast ratio of 10.94:1 and passes WCAG AAA for any text size. Used as a text color, Spotify Green reaches 1.91:1 on white and 10.94:1 on black. Ratios are WCAG 2 (truncated, never rounded up); APCA Lc is shown as a second opinion.

Spotify colors in CSS and Tailwind

Copy the Spotify palette as CSS custom properties or as a Tailwind CSS v4 theme. The last snippet is an 11-step Tailwind scale (50 to 950) generated in OKLCH from Spotify Green, for hover states, borders and tinted backgrounds.

:root {
  --spotify-green: #1ED760;
  --spotify-background: #121212;
  --spotify-highlight: #1F1F1F;
  --spotify-text: #FFFFFF;
  --spotify-subdued-text: #B3B3B3;
}

@import "tailwindcss";

@theme {
  --color-spotify-green: #1ED760;
  --color-spotify-background: #121212;
  --color-spotify-highlight: #1F1F1F;
  --color-spotify-text: #FFFFFF;
  --color-spotify-subdued-text: #B3B3B3;
}

@theme {
  --color-spotify-50: #E9FBEB;
  --color-spotify-100: #CFF6D4;
  --color-spotify-200: #A1EFAE;
  --color-spotify-300: #1ED760;
  --color-spotify-400: #00C152;
  --color-spotify-500: #00A545;
  --color-spotify-600: #008B39;
  --color-spotify-700: #00752F;
  --color-spotify-800: #006025;
  --color-spotify-900: #00501E;
  --color-spotify-950: #00300F;
}

Named colors closest to the Spotify palette

The nearest named color to each brand color, measured as perceptual distance (ΔE OK) in OKLab. Under 0.02 is hard to tell apart; above 0.05 the difference is easy to see.

How to use a Spotify-style palette

• Lead with Spotify Green #1ED760 for buttons, links and key highlights, with black text on it.
• Give most of the layout to Background #121212, Highlight #1F1F1F, Text #FFFFFF and Subdued text #B3B3B3, about 60% of the screen, so Spotify Green stands out.
• With a single brand color, use tints and shades of Spotify Green (the Tailwind scale above) instead of extra hues.
• As text on a white page, Spotify Green reaches 1.91:1: it fails WCAG 2 for text there, so keep it for icons, fills and borders.

To see how open.spotify.com uses these colors today, including backgrounds, text and dark mode, run it through the website color extractor. To turn Spotify Green into a full light and dark color system with accessible roles, open it in the Color System Studio.

More brand colors

• YouTube colors#FF0033 #212121 #FFFFFF
• Twitch colors#9146FF #BF94FF #16161D #2B2B38
• Netflix colors#E50914 #000000 #FFFFFF #464646
• Tiffany colors#81D8D0 #000000 #00A4B7
• Pepsi colors#0000FE #0025FF #0E0E96 #FF1400
• John Deere colors#367C2B #FFDE00 #185F11 #1B1C1B
• Barbie colors#FF3EB5 #FFD8EF
• Ferrari colors#DA291C #FFF200 #000000 #FFFFFF
• Google colors#4285F4 #EA4335 #FBBC05 #34A853
• Uber colors#000000 #FFFFFF #111111 #F6F6F6
• Apple colors#0071E3 #0066CC #1D1D1F #F5F5F7
• Lyft colors#FF00BF #1D0C17 #820076 #F1F0EC

Trademarks

Frequently asked questions