Playlist `primary_color` field doesn't exist in Spotify Web API

[mabuyo]

trafficstars

We have a primary_color field included as part of the Playlist, PlaylistSimplified and PlaylistTrack types but I can't find it anywhere in the Spotify Web API.

[jerelmiller]

Hey @mabuyo 👋

Unfortunately its an undocumented field. I added the types based on the JSON response from their API directly.

Here is a sample playlist directly from their API:

Response JSON

{
  collaborative: false,
  description: '',
  external_urls: {
    spotify: 'https://open.spotify.com/playlist/7ztqQ9YOM05hRje13ZUg7J'
  },
  followers: { href: null, total: 0 },
  href: 'https://api.spotify.com/v1/playlists/7ztqQ9YOM05hRje13ZUg7J',
  id: '7ztqQ9YOM05hRje13ZUg7J',
  images: [
    {
      height: 640,
      url: 'https://i.scdn.co/image/ab67616d0000b273f72cd22e67f690f7a2f95829',
      width: 640
    }
  ],
  name: 'TEST - Mix of songs and episodes',
  owner: {
    display_name: 'Jerel Miller',
    external_urls: {
      spotify: 'https://open.spotify.com/user/1228247189'
    },
    href: 'https://api.spotify.com/v1/users/1228247189',
    id: '1228247189',
    type: 'user',
    uri: 'spotify:user:1228247189'
  },
  primary_color: null,
  public: false,
  snapshot_id: 'NCwwYTZlZjVhNzE1YjBmOWExZmVhNDkxNDQwMWM2ZDI3MGY5ZWI3MTJj',
  tracks: {
    href: 'https://api.spotify.com/v1/playlists/7ztqQ9YOM05hRje13ZUg7J/tracks?offset=0&limit=100&locale=en-US',
    items: [
      {
        added_at: '2022-12-15T00:00:12Z',
        added_by: {
          external_urls: {
            spotify: 'https://open.spotify.com/user/1228247189'
          },
          href: 'https://api.spotify.com/v1/users/1228247189',
          id: '1228247189',
          type: 'user',
          uri: 'spotify:user:1228247189'
        },
        is_local: false,
        primary_color: null,
        track: {
          album: {
            album_type: 'single',
            artists: [
              {
                external_urls: {
                  spotify: 'https://open.spotify.com/artist/2vKiJjsgjgqIECUyYeIVvO'
                },
                href: 'https://api.spotify.com/v1/artists/2vKiJjsgjgqIECUyYeIVvO',
                id: '2vKiJjsgjgqIECUyYeIVvO',
                name: 'Crown The Empire',
                type: 'artist',
                uri: 'spotify:artist:2vKiJjsgjgqIECUyYeIVvO'
              }
            ],
            available_markets: [],
            external_urls: {
              spotify: 'https://open.spotify.com/album/3kJDQqifVrTnTEOj1alM13'
            },
            href: 'https://api.spotify.com/v1/albums/3kJDQqifVrTnTEOj1alM13',
            id: '3kJDQqifVrTnTEOj1alM13',
            images: [
              {
                height: 640,
                url: 'https://i.scdn.co/image/ab67616d0000b27349a4637ad0514e78085b4ddc',
                width: 640
              },
              {
                height: 300,
                url: 'https://i.scdn.co/image/ab67616d00001e0249a4637ad0514e78085b4ddc',
                width: 300
              },
              {
                height: 64,
                url: 'https://i.scdn.co/image/ab67616d0000485149a4637ad0514e78085b4ddc',
                width: 64
              }
            ],
            name: 'Immortalize',
            release_date: '2022-12-02',
            release_date_precision: 'day',
            total_tracks: 3,
            type: 'album',
            uri: 'spotify:album:3kJDQqifVrTnTEOj1alM13'
          },
          artists: [
            {
              external_urls: {
                spotify: 'https://open.spotify.com/artist/2vKiJjsgjgqIECUyYeIVvO'
              },
              href: 'https://api.spotify.com/v1/artists/2vKiJjsgjgqIECUyYeIVvO',
              id: '2vKiJjsgjgqIECUyYeIVvO',
              name: 'Crown The Empire',
              type: 'artist',
              uri: 'spotify:artist:2vKiJjsgjgqIECUyYeIVvO'
            }
          ],
          available_markets: [],
          disc_number: 1,
          duration_ms: 215154,
          episode: false,
          explicit: false,
          external_ids: { isrc: 'QMRSZ2200976' },
          external_urls: {
            spotify: 'https://open.spotify.com/track/1AR0d9urAEX4a1WdTzmbKz'
          },
          href: 'https://api.spotify.com/v1/tracks/1AR0d9urAEX4a1WdTzmbKz',
          id: '1AR0d9urAEX4a1WdTzmbKz',
          is_local: false,
          name: 'Immortalize',
          popularity: 29,
          preview_url: null,
          track: true,
          track_number: 1,
          type: 'track',
          uri: 'spotify:track:1AR0d9urAEX4a1WdTzmbKz'
        },
        video_thumbnail: { url: null }
      },
      {
        added_at: '2022-12-15T00:00:18Z',
        added_by: {
          external_urls: {
            spotify: 'https://open.spotify.com/user/1228247189'
          },
          href: 'https://api.spotify.com/v1/users/1228247189',
          id: '1228247189',
          type: 'user',
          uri: 'spotify:user:1228247189'
        },
        is_local: false,
        primary_color: null,
        track: {
          album: {
            album_type: 'compilation',
            artists: [
              {
                external_urls: {
                  spotify: 'https://open.spotify.com/show/3kUJiCxp9sy2JfheQ6hIb0'
                },
                href: 'https://api.spotify.com/v1/shows/3kUJiCxp9sy2JfheQ6hIb0',
                id: '3kUJiCxp9sy2JfheQ6hIb0',
                name: 'Broncos Country Tonight',
                type: 'show',
                uri: 'spotify:show:3kUJiCxp9sy2JfheQ6hIb0'
              }
            ],
            available_markets: [
              'AD', 'AE', 'AG', 'AL', 'AM', 'AO', 'AR', 'AT',
              'AU', 'AZ', 'BA', 'BB', 'BE', 'BF', 'BG', 'BH',
              'BI', 'BJ', 'BN', 'BO', 'BR', 'BS', 'BT', 'BW',
              'BZ', 'CA', 'CH', 'CI', 'CL', 'CM', 'CO', 'CR',
              'CV', 'CW', 'CY', 'CZ', 'DE', 'DJ', 'DK', 'DM',
              'DO', 'DZ', 'EC', 'EE', 'EG', 'ES', 'FI', 'FJ',
              'FM', 'FR', 'GA', 'GB', 'GD', 'GE', 'GH', 'GM',
              'GN', 'GQ', 'GR', 'GT', 'GW', 'GY', 'HK', 'HN',
              'HR', 'HT', 'HU', 'ID', 'IE', 'IL', 'IN', 'IS',
              'IT', 'JM', 'JO', 'JP', 'KE', 'KH', 'KI', 'KM',
              'KN', 'KR', 'KW', 'LA', 'LB', 'LC', 'LI', 'LR',
              'LS', 'LT', 'LU', 'LV', 'MA', 'MC', 'ME', 'MG',
              'MH', 'MK', 'ML', 'MN', 'MO', 'MR', 'MT', 'MU',
              'MV', 'MW', 'MX', 'MY', 'MZ', 'NA', 'NE', 'NG',
              'NI', 'NL', 'NO', 'NP', 'NR', 'NZ', 'OM', 'PA',
              'PE', 'PG', 'PH', 'PL', 'PS', 'PT', 'PW', 'PY',
              'QA', 'RO', 'RS', 'RW', 'SA', 'SB', 'SC', 'SE',
              'SG', 'SI', 'SK', 'SL', 'SM', 'SN', 'SR', 'ST',
              'SV', 'SZ', 'TD', 'TG', 'TH', 'TL', 'TN', 'TO',
              'TR', 'TT', 'TV', 'TW', 'TZ', 'UA', 'US', 'UY',
              'UZ', 'VC', 'VN', 'VU', 'WS', 'XK', 'ZA', 'ZM',
              'ZW'
            ],
            external_urls: {
              spotify: 'https://open.spotify.com/show/3kUJiCxp9sy2JfheQ6hIb0'
            },
            href: 'https://api.spotify.com/v1/shows/3kUJiCxp9sy2JfheQ6hIb0',
            id: '3kUJiCxp9sy2JfheQ6hIb0',
            images: [
              {
                height: 640,
                url: 'https://i.scdn.co/image/ab6765630000ba8a16b9a523e035becd31cecf3c',
                width: 640
              },
              {
                height: 300,
                url: 'https://i.scdn.co/image/ab67656300005f1f16b9a523e035becd31cecf3c',
                width: 300
              },
              {
                height: 64,
                url: 'https://i.scdn.co/image/ab6765630000f68d16b9a523e035becd31cecf3c',
                width: 64
              }
            ],
            is_playable: false,
            name: 'Broncos Country Tonight',
            release_date: null,
            release_date_precision: null,
            restrictions: { reason: 'product' },
            total_tracks: 1,
            type: 'show',
            uri: 'spotify:show:3kUJiCxp9sy2JfheQ6hIb0'
          },
          artists: [
            {
              external_urls: {
                spotify: 'https://open.spotify.com/show/3kUJiCxp9sy2JfheQ6hIb0'
              },
              href: 'https://api.spotify.com/v1/shows/3kUJiCxp9sy2JfheQ6hIb0',
              id: '3kUJiCxp9sy2JfheQ6hIb0',
              name: 'Broncos Country Tonight',
              type: 'show',
              uri: 'spotify:show:3kUJiCxp9sy2JfheQ6hIb0'
            }
          ],
          available_markets: [
            'AD', 'AE', 'AG', 'AL', 'AM', 'AO', 'AR', 'AT',
            'AU', 'AZ', 'BA', 'BB', 'BE', 'BF', 'BG', 'BH',
            'BI', 'BJ', 'BN', 'BO', 'BR', 'BS', 'BT', 'BW',
            'BZ', 'CA', 'CH', 'CI', 'CL', 'CM', 'CO', 'CR',
            'CV', 'CW', 'CY', 'CZ', 'DE', 'DJ', 'DK', 'DM',
            'DO', 'DZ', 'EC', 'EE', 'EG', 'ES', 'FI', 'FJ',
            'FM', 'FR', 'GA', 'GB', 'GD', 'GE', 'GH', 'GM',
            'GN', 'GQ', 'GR', 'GT', 'GW', 'GY', 'HK', 'HN',
            'HR', 'HT', 'HU', 'ID', 'IE', 'IL', 'IN', 'IS',
            'IT', 'JM', 'JO', 'JP', 'KE', 'KH', 'KI', 'KM',
            'KN', 'KR', 'KW', 'LA', 'LB', 'LC', 'LI', 'LR',
            'LS', 'LT', 'LU', 'LV', 'MA', 'MC', 'ME', 'MG',
            'MH', 'MK', 'ML', 'MN', 'MO', 'MR', 'MT', 'MU',
            'MV', 'MW', 'MX', 'MY', 'MZ', 'NA', 'NE', 'NG',
            'NI', 'NL', 'NO', 'NP', 'NR', 'NZ', 'OM', 'PA',
            'PE', 'PG', 'PH', 'PL', 'PS', 'PT', 'PW', 'PY',
            'QA', 'RO', 'RS', 'RW', 'SA', 'SB', 'SC', 'SE',
            'SG', 'SI', 'SK', 'SL', 'SM', 'SN', 'SR', 'ST',
            'SV', 'SZ', 'TD', 'TG', 'TH', 'TL', 'TN', 'TO',
            'TR', 'TT', 'TV', 'TW', 'TZ', 'UA', 'US', 'UY',
            'UZ', 'VC', 'VN', 'VU', 'WS', 'XK', 'ZA', 'ZM',
            'ZW'
          ],
          disc_number: 0,
          duration_ms: 1457711,
          episode: false,
          explicit: false,
          external_ids: {
            spotify: 'https://open.spotify.com/episode/1CwDjPKXfQGDlitW2gaPYY'
          },
          external_urls: {
            spotify: 'https://open.spotify.com/episode/1CwDjPKXfQGDlitW2gaPYY'
          },
          href: 'https://api.spotify.com/v1/episodes/1CwDjPKXfQGDlitW2gaPYY',
          id: '1CwDjPKXfQGDlitW2gaPYY',
          is_local: false,
          is_playable: false,
          name: '12-08-22 Bonus Hour of Broncos Country Tonight',
          popularity: 0,
          preview_url: 'https://podz-content.spotifycdn.com/audio/clips/7AUcRFQCmS3LJhxVOctnF8/clip_1235400_1281100.mp3',
          track: true,
          track_number: 0,
          type: 'episode',
          uri: 'spotify:episode:1CwDjPKXfQGDlitW2gaPYY'
        },
        video_thumbnail: { url: null }
      }
    ],
    limit: 100,
    next: null,
    offset: 0,
    previous: null,
    total: 2
  },
  type: 'playlist',
  uri: 'spotify:playlist:7ztqQ9YOM05hRje13ZUg7J'
}

You'll note the primary_color field in here. To be honest, I don't think its ever set to anything other than null or an empty string. Since its undocumented, its probably safe to remove from our types anyways.

Not sure if you're looking to set a background based on the image of the playlist, but if you want the trick I used, check out the following code:

• Parse the "vibrant" color from an image and return its swatch: https://github.com/apollographql/spotify-showcase/blob/main/client/src/utils/image.ts
• Add a local resolver on the Image type so I can query for a vibrantColor as a client-only field: https://github.com/apollographql/spotify-showcase/blob/main/client/src/apollo/resolvers.ts
• An example of where I query this for the playlist page: https://github.com/apollographql/spotify-showcase/blob/0eeac35bf8bb2cb95da095a676320dcf3a187cfa/client/src/routes/playlists/playlist.tsx#L45

Hope this helps! Let me know if you have any questions.