Resources

Social Media Colours

Whenever creating a new site I always find myself going to the major social networking sites to grab their colours to use in icons or buttons. Instead of having to go to all these individual sites I wanted one place to go and get these colours when I needed them.

So here's a list of some of the major social media network colours.

Facebook

Hex: #3b5998 RGB: 59, 89, 152

Twitter

Hex: #00aced RGB: 0, 172, 237

Google+

Hex: #dd4b39 RGB: 221, 75, 57

Linkedin

Hex: #007bb6 RGB: 0, 123, 182

YouTube

Hex: #bb0000 RGB: 187, 0, 0

Instagram

Hex: #517fa4 RGB: 81, 127, 164

Pinterest

Hex: #cb2027 RGB: 203, 32, 39

Flickr

Hex: #ff0084 RGB: 255, 0, 132

Tumblr

Hex: #32506d RGB: 50, 80, 109

Foursquare

Hex: #0072b1 RGB: 0, 114, 177

Dribbble

Hex: #ea4c89 RGB: 235, 75, 136

Vine

Hex: #00bf8f RGB: 0, 191, 143

Behance

Hex: #1769FF RGB: 23,105,255

Github

Hex: #171516 RGB: 23,21,22

Skype

Hex: #00AFF0 RGB: 0,175,240

Snapchat

Hex: #FFFA37 RGB: 255,250,55

WhatsApp

Hex: #64D448 RGB: 100,212,72

Have any more to add please let me know in the comments below.

SCSS Social Media Map

If you use Sass in your front-end development then here is an example of using map to get the colours of the different social media sites.

$socialColours:
(
        facebook: #3b5998,
        twitter: #00aced,
        google: #dd4b39,
        linkedin: #007bb6,
        youtube: #bb0000,
        instagram: #517fa4,
        pinterest: #cb2027,
        flickr: #ff0084,
        tumblr: #32506d,
        forusquare: #0072b1,
        dribbble: #ea4c89,
        vine: #00bf8f
);

@function get-social-media-colour($colour) {

  @if map-has-key($socialColours, $colour) {
    $colour: map-get($socialColours, $colour);
  } @else {
    @if type-of($colour) != colour {
      @error "Invalid colour name: `#{$colour}`.";
    }
  }

  @return $colour;
}

To use this you simply need to pass in the social media name into the get-social-media-colour() function.

.fa
{
  &.fa-twitter
  {
    color: get-social-media-colour(twitter);
  }

  &.fa-google-plus
  {
    color: get-social-media-colour(google);
  }

  &.fa-facebook-official
  {
    color: get-social-media-colour(facebook);
  }

  &.fa-linkedin-square
  {
    color: get-social-media-colour(linkedin);
  }
}
Back to top

Learn how to code with Treehouse

  • Learn projects with access to 1000+ videos
  • Practice live with our Code Challenge Engine
  • Get help in our members-only forums

Start with a 7 day free trial

Comments

    1. Paul says:

      Nice one, thanks Gautam