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.

Learn how to create your first WordPress theme from scratch in my brand new course: View the course.

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.

/* SASS / Social Media Brand Colors */

$twitter: #00aced;
$facebook: #3b5998;
$googleplus: #dd4b39;
$pinterest: #cb2027;
$linkedin: #007bb6;
$youtube: #bb0000;
$vimeo: #1ab7ea;
$tumblr: #32506d;
$instagram: #bc2a8d;
$flickr: #ff0084;
$dribbble: #ea4c89;
$quora: #a82400;
$foursquare: #0072b1;
$forrst: #5B9A68;
$vk: #45668e;
$wordpress: #21759b;
$stumbleupon: #EB4823;
$yahoo: #7B0099;
$blogger: #fb8f3d;
$soundcloud: #ff3a00;
/* LESS / Social Media Brand Colors */

@twitter: #00aced;
@facebook: #3b5998;
@googleplus: #dd4b39;
@pinterest: #cb2027;
@linkedin: #007bb6;
@youtube: #bb0000;
@vimeo: #1ab7ea;
@tumblr: #32506d;
@instagram: #bc2a8d;
@flickr: #ff0084;
@dribbble: #ea4c89;
@quora: #a82400;
@foursquare: #0072b1;
@forrst: #5B9A68;
@vk: #45668e;
@wordpress: #21759b;
@stumbleupon: #EB4823;
@yahoo: #7B0099;
@blogger: #fb8f3d;
@soundcloud: #ff3a00;

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.

/* Social Media Brand Colors

twitter:     #00aced     rgb(0, 172, 237)
facebook:    #3b5998     rgb(59, 89, 152)
googleplus:  #dd4b39     rgb(221, 75, 57)
pinterest:   #cb2027     rgb(203, 32, 39)
linkedin:    #007bb6     rgb(0, 123, 182)
youtube:     #bb0000     rgb(187, 0, 0)
vimeo:       #1ab7ea     rgb(26, 183, 234)
tumblr:      #32506d     rgb(50, 80, 109)
instagram:   #bc2a8d     rgb(188, 42, 141)
flickr:      #ff0084     rgb(255, 0, 132)
dribbble:    #ea4c89     rgb(234, 76, 137)
quora:       #a82400     rgb(168, 36, 0)
foursquare:  #0072b1     rgb(0, 114, 177)
forrst:      #5B9A68     rgb(91, 154, 104)
vk:          #45668e     rgb(69, 102, 142)
wordpress:   #21759b     rgb(33, 117, 155)
stumbleupon: #EB4823     rgb(235, 72, 35)
yahoo:       #7B0099     rgb(123, 0, 153)
blogger:     #fb8f3d     rgb(251, 143, 61)
soundcloud:  #ff3a00     rgb(255, 58, 0)

*/

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.

Related Posts

15 Comments

  1. Great post!
    I usually end up creating a set of variables with the colours in too, and trawling through each social media site to get them is a pain! This is a very thorough list so thanks for that, I’ll be using it from now on!
    P.S. You get mega bonus points for the Photoshop swatch, thanks! 😀

    • Glad you liked it Daniel. I navigated the web for those hex codes one too many times, enough was enough 🙂

  2. Jeremy Jeremy

    Thanks for posting. Was an awesome find.

  3. Lovely. Thank you so much for this.
    I got stuck while trying to design something with the blogger color code.
    The codes with the rgb values are perfect. Thanks.

    • Glad it could help with your project. Thanks for stopping by Olalekan!

  4. Ajith Ajith

    Thanks for this awesome post, it helped me a lot.

  5. Quick and easy, thank you for this!

  6. Thank you so much, I need these for all my creation and script.

  7. Keith Keith

    Any opinion on what the primary color for the new Instagram should be?

    I ended up going for a kind of purple I lifted from the new logo.

    Hex Code: #7431e0

  8. Hailey Day Hailey Day

    Vimeo should be this blue rather than the green…
    vimeo: #1ab7ea rgb(26, 183, 234)

  9. Vipul Walia Vipul Walia

    Thank you so much for help, this is helpful for not just developers but also for UI designer to work on their own social icon set. I would like to make request can you please upload all kinds of logo + Brief document on what should standard says about using social icon or using logo.
    Thank you helped me alot

  10. THank you! Saved me so much time 😛

  11. Hi i’m from Azerbaijan. This color codes is super. Thanks)

Post a comment

Your email address will not be published. Required fields are marked *