Social Media Color Hex Codes

How many times have you gone to Twitter just to get the right shade of blue from the site? If you’re like me – too many times.

That’s why I tracked down the colors of the most popular social media sites and put them all in one place.

The Social Sites

The colors codes are for the following 20 social media websites:

  1. Twitter
  2. Facebook
  3. Google Plus
  4. Pinterest
  5. Linkedin
  6. Youtube
  7. Vimeo
  8. Tumblr
  9. Instagram
  10. Flickr
  11. Dribbble
  12. Quora
  13. Foursquare
  14. Forrst
  15. VK
  16. WordPress
  17. StumbleUpon
  18. Yahoo
  19. Blogger
  20. SoundCloud

Below you’ll find the primary colors for the above 20 most popular social sites.

For SASS and LESS there are variables set with the hex code colors, for plain CSS there is a list of plain hexadecimal color codes and the corresponding rgb color values, and finally there is a Photoshop swatches file prepared for download.

SASS/LESS Color Hex Codes

You can copy and paste the variables below into your stylesheet,  _variables.scss, or whatever you’ve got going on. You can then use color: $facebook; whenever you need the facebook blue color.

 

 

For Plain ‘ole CSS

In case you don’t use a preprocessor or if you need the rgb values for the social media colors, here are those values. They are commented out, so you can paste this all into the top of your stylesheet for reference.

Photoshop Swatches

Lastly, if you plan on using the social site colors to make your icons or in a site mockup, you can download this Photoshop swatches file:

Social Media Color Swatches

If you’ve never added a swatches file to Photoshop before, here’s how:

    1. Click the link above to download
    2. Unzip the folder
    3. Go to Photoshop and click on the swatches options panel
    4. Choose the “Load Swatches” option on the top left side
    5. Choose the social-media.aco file

The swatches will show up in Photoshop and you’re good to go!

The best part about a resource like this is that the values are not likely to change. You can keep on using the same social media color hex codes on each project without worrying about updating the list.