Web Design that taps into the haromny and vision of your dreams.

Social Media Colours Hex, RBG, SCSS, PS Swatches

A list of Social Media brand colours in Hex, RBG, SCSS, LESS and PS Swatches

Written By on in HTML/CSS

686 words, estimated reading time 4 minutes.

Social integration of for any project is must and so are social icons, colours and links. We've created a social media colours palette for all the popular social networks so you don't need to visit each of them.

Listed in the table below are social media networks brand colours in Hex and RGB values, after the table you will find the list presented in SCSS and LESS variables which you can copy and paste into your styles and at the end of the article you can download the social media brand colour swatches which can be installed into Adobe Photoshop for your icons and PSD mockups.

What Are Brand Colours?

Brands and colour are inextricably linked because colour offers an instantaneous method for conveying meaning and message without words. Brands communicate meanings with the language of colour and shape. Colour is the visual component people remember most about a brand followed closely by shapes/symbols then numbers and finally words.

Marketing Colour Wheel
Colour is the visual component people remember most about a brand

Social Media Brand Colours

Each entry for social media sites below has the main HEX and RGB value for each social media platform listed which you can use in your web designs or PSD mockups. These were sourced from the official brand guidelines for each social media platform, wherever a brand guideline existed.

Amazon Orange
Hex: #ff9900
RGB: rgb(255, 153, 0);
Android Green
Hex: #a4c639
RGB: rgb(164, 198, 57);
Apple Silver
Hex: #a6b1b7
RGB: rgb(166, 177, 183);
Blogger Orange
Hex: #fb8f3d
RGB: rgb(251, 143, 61);
Dribble Pink
Hex: #ea4c89
RGB: rgb(234, 76, 137);
Facebook Blue
Hex: #3b5998
RGB: rgb(59, 89, 152);
Flickr Pink
Hex: #ff0084
RGB: rgb(255, 0, 132);
Forrst Green
Hex: #5B9A68
RGB: rgb(91, 154, 104);
FourSquare Pink
Hex: #f94877
RGB: rgb(249, 72, 119);
Google Blue
Hex: #4285f4
RGB: rgb(66, 133, 244);
Google+ Red
Hex: #dd4b39
RGB: rgb(221, 75, 57);
Instagram Magenta
Hex: #bc2a8d
RGB: rgb(188, 42, 141);
LinkedIn Blue
Hex: #007bb6
RGB: rgb(0, 123, 182);
Pinterest Red
Hex: #cb2027
RGB: rgb(203, 32, 39);
Pocket Pink
Hex: #ee4056
RGB: rgb(238, 64, 86);
Quora Red
Hex: #a82400
RGB: rgb(168, 36, 0);
Reddit Orange
Hex: #ff4500
RGB: rgb(255, 69, 0);
Skype Blue
Hex: #00aff0
RGB: rgb(0, 175, 240);
Slack Purple
Hex: #4d394b
RGB: rgb(77, 57, 75);
SoundCloud Orange
Hex: #ff3a00
RGB: rgb(255, 58, 0);
Spotify Green
Hex: #1ed760
RGB: rgb(30, 215, 96);
Steam Navy
Hex: #171A21
RGB: rgb(23, 26, 33);
StumbleUpon Orange
Hex: #EB4823
RGB: rgb(235, 72, 35);
Tumblr Blue
Hex: #32506d
RGB: rgb(50, 80, 109);
Twitch Purple
Hex: #6441a4
RGB: rgb(100, 65, 164);
Twitter Blue
Hex: #00aced
RGB: rgb(0, 172, 237);
Vimeo Blue
Hex: #1ab7ea
RGB: rgb(26, 183, 234);
VK Blue
Hex: #45668e
RGB: rgb(69, 102, 142);
WhatsApp Green
Hex: #25d366
RGB: rgb(37, 211, 102);
WordPress Blue
Hex: #21759b
RGB: rgb(33, 117, 155);
Yahoo Purple
Hex: #7B0099
RGB: rgb(123, 0, 153);
YouTube Red
Hex: #bb0000
RGB: rgb(187, 0, 0);
CodePen Black
Hex: #000000
RGB: rgb(0, 0, 0);
GitHub Blue
Hex: #4078c0
RGB: rgb(64, 120, 192);
ShutterStock Red
Hex: #EB322E
RGB: rgb(235, 50, 46);
SnapChat Yellow
Hex: #fffc00
RGB: rgb(255, 252, 0);
Periscope Blue
Hex: #40a4c4
RGB: rgb(64, 164, 196);
Discord Blue
Hex: #7289da
RGB: rgb(114, 137, 218);
Microsoft Red
Hex: #f35022
RGB: rgb(243, 80, 34);
Microsoft Geen
Hex: #80bb03
RGB: rgb(128, 187, 3);
Microsoft Blue
Hex: #03a5f0
RGB: rgb(3, 165, 240);
Microsoft Orange
Hex: #ffb903
RGB: rgb(255, 185, 3);

SASS/SCSS Social Media Brand Colors

You can copy and paste the variables below into your stylesheet, _variables.scss. You can then use color: $facebook; whenever you need the Facebook blue colour.

a.facebook {background-color: $facebook}
a.facebook {background-color: @facebook}

@amazon: #ff9900;
@android: #a4c639;
@apple: #a6b1b7;
@blogger: #fb8f3d;
@dribbble: #ea4c89;
@facebook: #3b5998;
@flickr: #ff0084;
@forrst: #5B9A68;
@foursquare: #f94877;
@google: #4285f4;
@googleplus: #dd4b39;
@instagram: #bc2a8d;
@linkedin: #007bb6;
@pinterest: #cb2027;
@pocket: #ee4056;
@quora: #a82400;
@reddit: #ff4500;
@skype: #00aff0;
@slack: #4d394b;
@soundcloud: #ff3a00;
@spotify: #1ed760;
@steam: #171A21;
@stumbleupon: #EB4823;
@tumblr: #32506d;
@twitch: #6441a4;
@twitter: #00aced;
@vimeo: #1ab7ea;
@vk: #45668e;
@whatsapp: #25d366;
@wordpress: #21759b;
@yahoo: #7B0099;
@youtube: #bb0000;
@codepen: #000000;
@github: #4078c0;
@shutterstock: #EB322E;
@snapchat: #fffc00;
@periscope: #40a4c4;
@discord: #7289da;
@ms-red: #f35022;
@ms-green: #80bb03;
@ms-blue: #03a5f0;
@ms-orange: #ffb903;

Social Media Brand Colours Photoshop Swatch

If you plan on using the social site colours to make your icons or in a site mockup, you can download this Photoshop swatches file.

To use these social media brand swatches, simply download the file below, extract the .aco file to the swatches folder (typically C:\Program Files\Adobe\Photoshop (version)\Presets\Colorswatches on Windows or Macintosh HD/Applications/Adobe Photoshop (version)/Presets/Color Swatches on the Mac, then open Photoshop and look under Window > Swatches and select the file from the list.

Last updated on: Sunday 12th August 2018



There are no comments for this post. Be the first!


Leave a Reply

Your email address will not be published.

If you find something abusive or that does not comply with our terms or guidelines please flag it as inappropriate.


Copyright © 2001-2018 Tim Trott, all rights reserved. Web Design by Azulia Designs

This web page is licensed for your personal, private, non-commercial use only.

Disclaimer, Privacy & LegalSitemapContact Me