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

By on in HTML/CSS

839 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);
CodePen Black
Hex: #000000
RGB: rgb(0, 0, 0);
Discord Blue
Hex: #7289da
RGB: rgb(114, 137, 218);
Dribble Pink
Hex: #ea4c89
RGB: rgb(234, 76, 137);
Etsy Vermillion
Hex: #D15600
RGB: rgb(209, 86, 0);
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);
GitHub Blue
Hex: #4078c0
RGB: rgb(64, 120, 192);
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);
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);
Periscope Blue
Hex: #40a4c4
RGB: rgb(64, 164, 196);
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);
Ruby on Rails Red
Hex: #B02B2C
RGB: rgb(176, 43, 44);
ShutterStock Red
Hex: #EB322E
RGB: rgb(235, 50, 46);
Skype Blue
Hex: #00aff0
RGB: rgb(0, 175, 240);
Slack Purple
Hex: #4d394b
RGB: rgb(77, 57, 75);
SnapChat Yellow
Hex: #fffc00
RGB: rgb(255, 252, 0);
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);

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}

$amazon: #ff9900;
$android: #a4c639;
$apple: #a6b1b7;
$blogger: #fb8f3d;
$codepen: #000000;
$discord: #7289da;
$dribbble: #ea4c89;
$etsy: #D15600;
$facebook: #3b5998;
$flickr: #ff0084;
$forrst: #5B9A68;
$foursquare: #f94877;
$github: #4078c0;
$google: #4285f4;
$googleplus: #dd4b39;
$instagram: #bc2a8d;
$linkedin: #007bb6;
$ms-red: #f35022;
$ms-green: #80bb03;
$ms-blue: #03a5f0;
$ms-orange: #ffb903;
$periscope: #40a4c4;
$pinterest: #cb2027;
$pocket: #ee4056;
$quora: #a82400;
$reddit: #ff4500;
$rubyrails: #B02B2C;
$shutterstock: #EB322E;
$skype: #00aff0;
$slack: #4d394b;
$snapchat: #fffc00;
$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;

LESS Social Media Brand Colors

You can copy and paste the variables below into your stylesheet less variables definitions and access the values in your css:

a.facebook {background-color: @facebook}

@amazon: #ff9900;
@android: #a4c639;
@apple: #a6b1b7;
@blogger: #fb8f3d;
@codepen: #000000;
@discord: #7289da;
@dribbble: #ea4c89;
@etsy: #D15600;
@facebook: #3b5998;
@flickr: #ff0084;
@forrst: #5B9A68;
@foursquare: #f94877;
@github: #4078c0;
@google: #4285f4;
@googleplus: #dd4b39;
@instagram: #bc2a8d;
@linkedin: #007bb6;
@ms-red: #f35022;
@ms-green: #80bb03;
@ms-blue: #03a5f0;
@ms-orange: #ffb903;
@periscope: #40a4c4;
@pinterest: #cb2027;
@pocket: #ee4056;
@quora: #a82400;
@reddit: #ff4500;
@rubyrails: #B02B2C;
@shutterstock: #EB322E;
@skype: #00aff0;
@slack: #4d394b;
@snapchat: #fffc00;
@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;

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: Thursday 23rd August 2018

 

Comments

Have a question or suggestion? Please leave a comment to start the discussion.

Tayfun

Tayfun

Useful page. Thanks.

Reply to Tayfun
Barbara

Barbara

Is it possible to translate either of the colours below in RGB or CYMK?

Ruby on Rails Red [#B02B2C]

Etsy Vermillion [#D15600]

Thank you. Barbara

Reply to Barbara
Tim Trott

Tim Trott

Hi Barbara

Ruby on Rails Red [#B02B2C] RGB = 176,43,44
Etsy Vermillion [#D15600] RGB = 209,86,0

I'll update the page to include RGB colours as well.

Thanks
Tim

Reply to Tim Trott

 

Leave a Reply

Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Your email address will not be published.