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)

*/

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.

Read these posts next

Take our 7-day Email Course for FREE

You'll learn how to make your WordPress site look better, load faster, and make more money.

Invalid email address
Unsubscribe at any time.