Social Media Colours in 2025 - 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.

Colour is an essential tool for non-verbal communication. When we see a colour, we naturally associate feelings and emotions with it. For example, warm colours have feelings of energy, power, passion and cheerfulness. Cool colours are seen as more refreshing, reliable and trustworthy because this colour plays a significant role in brand perception. Plutchik's wheel of emotions is shown below, and this graphically indicates 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, numbers, and words.

Social Media Colours

The entry for each social media site below has the main HEX and RGB values listed for each social media platform, 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

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-orange: #ffb903;
$ms-blue: #03a5f0;
$ms-green: #80bb03;
$ms-red: #f35022;
$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-orange: #ffb903;
@ms-blue: #03a5f0;
@ms-green: #80bb03;
@ms-red: #f35022;
@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 use them in a site mockup, you can download this Photoshop swatches file.

To use these social media brand swatches, 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