in 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); } } ```

Upgrade to access all content on Paulund

Members unlock all tutorials and snippets

Access to all downloadable content

Access to code examples before others

Sign Up Now

Already a member? Login here

Subscribe To The Weekly Newsletter

Get weekly updates to your email