Learning never exhausts the mind

Published on by

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.

In the business world, colour psychology plays an importance in social media marketing and branding. Colour association can stir up negative or positive emotions with each individual.

Colour is an important tool for non-verbal communication. When you see a colour we naturally assign feelings and emotions to it. For example, warm colours have feelings of energy, power, passion and cheerfulness. Cool colours are seen as more refreshing, reliable and trustworthy. Because of this colour plays a significant role in brand perception. Plutchik's wheel of emotions is shown below and this graphically shows the range and strength of emotions attributed to a given colour. This can be particularly useful for logo and web design, as the choice of colour can dictate the level of trust or help convey a brand message.

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

Marketing Colour Wheel

Social Media 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 Brand Colours

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 Brand Colours

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 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\Color\swatches\ 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.

Social Brand Colors (2.17 kB)
3 thoughts on “Social Media Brand Colours – Hex, RBG, SCSS & Free PS Swatches
  • 30th April 2015 at 12:00 am

    Useful page. Thanks.

    Reply
  • 14th May 2010 at 12:00 am

    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
    • Tim Trott
      20th May 2010 at 12:00 am

      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

Leave a Reply

Fields marked with * are mandatory.

We respect your privacy, and will not make your email public. Hashed email address may be checked against Gravatar service to retrieve avatars. This site uses Akismet to reduce spam. Learn how your comment data is processed.