Social Media Colours in 2024 - Hex, RBG, SCSS, PS Swatches

Social integration of for any project is must and so are social icons, colours and links. Here are the Social Media Colours palettes.

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

Colour is an important tool for non-verbal communication. When we 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.

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.

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 Media Colours PhotoShop Swatch