Blog: Social Media
Colored pencils in various social media colors

Social Media Colors 2024

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown SEO.

Here is our guide of social media colors for 50 of the top social and technology brands.

Each entry has the main HEX and RGB value for each social media platform, plus secondary and accent colors listed underneath.

Do you need SASS or LESS variables instead of HEX or RGB values? We have those too. Use our quick links to jump to the bottom of the page.

These were sourced from the official brand guidelines for each social media platform, wherever a brand guideline existed. The branding colors on this page were last audited and updated on March 3, 2024 to update colors for Twitter/X.


Facebook

Blue Hex: #1877f2

RGB: 24, 119, 242

#3b5998
rgb(59, 89, 152)


Twitter / X

Blue Hex: #1da1f2

RGB: 29, 161, 242

#14171a
rgb(20, 23, 26)

#aab8c2
rgb(170, 184, 194)

#e1e8ed
rgb(225, 232, 237)

#f5f8fa
rgb(245, 248, 250)

“X” Black Hex: #000000

RGB: 0, 0, 0


YouTube

Red Hex: #ff0000

RGB: 255, 0, 0

#282828
rgb(40, 40, 40)

#ffffff
rgb(255, 255, 255)


LinkedIn

Blue Hex: #0a66c2

RGB: 10, 102, 194

#000000
rgb(0, 0, 0)

#ffffff
rgb(255, 255, 255)

#f0b6a8
rgb(240, 182, 168)


Instagram

Magenta Hex: #c32aa3

RGB: 195, 42, 163

#4c5fd7
rgb(76, 95, 215)

#7232bd
rgb(114, 50, 189)

#f46f30
rgb(244, 111, 48)

#ffdc7d
rgb(255, 220, 125)


TikTok

Black Hex: #010101

RGB: 1, 1, 1

#69c9d0
rgb(105, 201, 208)

#ee1d52
rgb(238, 29, 82)

#ffffff
rgb(255, 255, 255)


Google

Blue Hex: #4285f4

RGB: 66, 133, 244

#ea4335
rgb(234, 67, 53)

#34a853
rgb(52, 168, 83)

#fbbc05
rgb(251, 188, 5)


Pinterest

Red Hex: #bd081c

RGB: 189, 8, 28


Snapchat

Yellow Hex: #fffc00

RGB: 255, 252, 0

#ffffff
rgb(255, 255, 255)

#000000
rgb(0, 0, 0)


WhatsApp

Green Hex: #25d366

RGB: 37, 211, 102

#075e54
rgb(7, 94, 84)

#128c7e
rgb(18, 140, 126)

#dcf8c6
rgb(220, 248, 198)

#34b7f1
rgb(52, 183, 241)


Tumblr

Blue Hex: #35465d

RGB: 54, 70, 93


Reddit

Orange Hex: #ff4500

RGB: 255, 69, 0

#ff5700
rgb(255, 87, 0)

#cee3f8
rgb(206, 227, 248)

#336699
rgb(51, 102, 153)

#5f99cf
rgb(95, 153, 207)


Twitch

Purple Hex: #9146ff

RGB: 145, 70, 255

#f0f0ff
rgb(240, 240, 255)

#000
rgb(0, 0, 0)


Discord

Blurple Hex: #5865f2

RGB: 88, 101, 242

#ffffff
rgb(255, 255, 255)

#23272a
rgb(35, 39, 42)


Yelp

Red Hex: #d32323

RGB: 211, 35, 35


Mastodon

Blue Hex: #6364ff

RGB: 99, 100, 255

#563acc
rgb(86, 58, 204)

#17063b
rgb(23, 6, 59)

#2f0c7a
rgb(47, 12, 122)

#858afa
rgb(133, 138, 250)


Spotify

Green Hex: #1ed760

RGB: 30, 215, 96

#1db954
rgb(29, 185, 84)

#ffffff
rgb(255, 255, 255)

#191414
rgb(25, 20, 20)


Apple

Gray Hex: #a6b1b7

RGB: 166, 177, 183

#000000
rgb(0, 0, 0)

#333333
rgb(51, 51, 51)

#bbbbbb
rgb(187, 187, 187)

#ffffff
rgb(255, 255, 255)


Amazon

Orange Hex: #ff9900

RGB: 255, 153, 0


Alexa

Blue Hex: #00a7ce

RGB: 0, 167, 206

#232f3e
rgb35, 47, 62)

#ffffff
rgb(255, 255, 255)


Microsoft

Red Hex: #f35022

Red RGB: 243, 80, 34

Green Hex: #80bb03

Green RGB: 128, 187, 3

Blue Hex: #03a5f0

Blue RGB: 3, 165, 240

Yellow Hex: #ffb903

Yellow RGB: 255, 185, 3


Periscope

Blue Hex: #40a4c4

RGB: 64, 164, 196

#d55548
rgb(213, 85, 72)

#7cd6f1
rgb(124, 214, 241)

#3f4d51
rgb(63, 77, 81)

#a4b8be
rgb(164, 184, 190)


Foursquare

Pink Hex: #f94877

Pink RGB: 249, 72, 119

#073282
rgb(7, 50, 130)

#2d5be3
rgb(45, 91, 227)


Swarm

Orange Hex: #ffa633

RGB: 255, 166, 51

#f06d1b
rgb(240, 109, 27)

#ffa71c
rgb(255, 167, 28)

#2182eb
rgb(33, 130, 235)


Medium

Green Hex: #02b875

RGB: 2, 184, 117

#12100e
rgb(18, 16, 14)

#ffffff
rgb(255, 255, 255)

#e8f3ec
rgb(232, 243, 236)

#00ab6b
rgb(0, 171, 107)


Vimeo

Blue Hex: #1ab7ea

RGB: 26, 183, 234

#162221
rgb(22, 34, 33)

#ffffff
rgb(255, 255, 255)

#000000
rgb(0, 0, 0)


Skype

Blue Hex: #00aff0

RGB: 0, 175, 240

#0078d7
rgb(0, 120, 215)


Android

Green Hex: #a4c639

RGB: 164, 198, 57


Quora

Maroon Hex: #aa2200

RGB: 170, 34, 0

#ffffff
rgb(255, 255, 255)

#2b6dad
rgb(43, 109, 173)


Dribbble

Pink Hex: #ea4c89

RGB: 234, 76, 137

#c32361
rgb(195, 35, 97)

#444444
rgb(68, 68, 68)

#9ba5a8
rgb(155, 165, 168)


Slack

Purple Hex: #4a154b

RGB: 74, 21, 75

#36c5f0
rgb(54, 197, 240)

#2eb67d
rgb(46, 182, 125)

#e01e5a
rgb(224, 30, 90)

#ecb22e
rgb(236, 178, 46)


StumbleUpon

Orange Hex: #e94826

RGB: 233, 72, 38

#eb4924
rgb(235, 73, 36)

#e4e5e7
rgb(228, 229, 231)

#000000
rgb(0, 0, 0)


Flickr

Pink Hex: #f40083

Pink RGB: 244, 0, 131

Blue Hex: #006add

Blue RGB: (0, 106, 221)

#ff1981
rgb(255, 25, 129)

#177fff
rgb(23, 127, 255)

#ff0084
rgb(255, 0, 132)

#246dd6
rgb(36, 109, 214)


Yahoo

Purple Hex: #6001d2

RGB: 96, 1, 210


Soundcloud

Orange Hex: #ff5500

RGB: 255, 85, 0

#ff7700
rgb(255, 119, 0)

#ff3300
rgb(255, 51, 0)

#ff4B00
rgb(255, 75, 0)

#ff3801
rgb(255, 56, 1)


DeviantArt

Green Hex: #05cc47

RGB: 5, 204, 71

#1f3626
rgb(31, 54, 38)

#42704f
rgb(66, 112, 79)

#4dc47d
rgb(77, 196, 125)

#d4f5de
rgb(212, 245, 222)


Pocket

Pink Hex: #ee4056

RGB: 238, 64, 86

#ef3e56
rgb(239, 62, 86)

#42b7b0
rgb(66, 183, 176)

#9bcfcc
rgb(155, 207, 204)

#83edb8
rgb(131, 237, 184)

#50bcb6
rgb(80, 188, 182)

#fcb643
rgb(252, 182, 67)


SlideShare

Orange Hex: #e68523

Orange RGB: 230, 133, 35

Blue Hex: #00a0dc

Blue RGB: 0, 160, 220

#0077b5
rgb(0, 119, 181)


500px

Blue Hex: #0099e5

RGB: 0, 153, 229

#222222
rgb(34, 34, 34)

#ffffff
rgb(255, 255, 255)


VK

Blue Hex: #4a76a8

RGB: 74, 118, 168

#5181b8
rgb(81, 129, 184)

#2a5885
rgb(42, 88, 133)

#edeef0
rgb(237, 238, 240)

#f7f8fa
rgb(247, 248, 250)


Steam

Navy Hex: #171A21

RGB: 23, 26, 33

#66c0f4
rgb(102, 192, 244)

#1b2838
rgb(27, 40, 56)

#2a475e
rgb(42, 71, 94)

#c7d5e0
rgb(199, 213, 224)


Telegram

Blue Hex: #0088cc

RGB: 0, 136, 204


Clarity

Blue Hex: #61bed9

RGB: 97, 190, 217


Listly

Orange Hex: #df6d46

Orange RGB: 223, 109, 70

Blue Hex: #52b1b3

Blue RGB: (82, 177, 179)

#ce4f24
rgb(206, 79, 36)

#333333
rgb(51, 51, 51)

#409092
rgb(64, 144, 146)

#222222
rgb(34, 34, 34)


HomeAdvisor

Orange Hex: #f89000

RGB: 248, 144, 0


Houzz

Green Hex: #4dbc15

RGB: 77, 188, 21


Angi

Pink Hex: #ff6153

RGB: 255, 97, 83


Glassdoor

Green Hex: #0caa41

RGB: 0, 175, 65


Shuttered Social Networks

These are brand colors for social networks which are no longer active.


Google+

Red Hex: #db4437

RGB: 219, 68, 55


Vine

Green Hex: #00b489

RGB: 0, 180, 137


Social Media Colors: Sass Variables


/**
 * Sass Variables 
 * Social Media Brand Colors 
 */

$facebook: #1877f2;
$facebookold: #3b5998;
$twitter: #1da1f2;
$x: #000000
$youtube: #ff0000;
$instagrammagenta: #c32aa3;
$instagramblue: #4c5fd7;
$instagrampurple: #7232bd;
$instagramorange: #f46f30;
$instagramyellow: #ffdc7d;
$googleblue: #4285f4;
$googlered: #ea4335; 
$googleyellow: #fbbc05; 
$googlegreen: #34a853;
$pinterest: #bd081c;
$googleplus: #db4437;
$linkedin: #0a66c2;
$vimeoblue: #1ab7ea;
$tumblr: #2c4762;
$snapchat: #fffc00;
$whatsappgreen: #25d366;
$whatsappteal1: #075e54;
$whatsappteal2: #128c7e;
$tiktokblack: #010101; 
$tiktookblue: #69c9d0;
$tiktokpink: #ee1d52; 
$tiktokwhite: #fff; 
$mastodon: #563acc;
$apple: #a6b1b7;
$amazon: #ff9900;
$alexablue: #00a7ce;
$alexadkblue: #232f3e;
$microsoftred: #f35022;
$microsoftgreen: #80bb03;
$microsoftblue: #03a5f0;
$microsoftyellow: #ffb903;
$periscope: #40a4c4;
$foursquarepink: #f94877; 
$foursquarenavy: #073282;
$foursquareblue: #2d5be3; 
$yelp: #d32323;
$swarm: #ffa633;
$medium: #02b875;
$skypeblue: #00aff0;
$skypedkblue: #0078d7;
$android: #a4c639;
$stumbleupon: #e94826;
$flickrpink: #f40083;
$flickrblue: #006add;
$yahoo: #430297;
$twitch: #9146ff;
$soundcloud: #ff5500;
$spotifygreen: #1ed760;
$spotifydarkgreen: #1db954;
$dribbble: #ea4c89;
$slackpurple: #4a154b; 
$slackblue: #36c5f0; 
$slackgreen: #2eb67d; 
$slackred: #e01e5a; 
$slackyellow: #ecb22e; 
$reddit: #ff5700;
$deviantart: #05cc47;
$pocket: #ee4056;
$quora: #aa2200;
$quorablue: #2b6dad;
$slideshareorange: #e68523;
$slideshareblue: #00a0dc;
$fivehundredpx: #0099e5;
$vk: #4a76a8;
$listlyorange: #df6d46;
$listlyblue: #52b1b3;
$vine: #00b489;
$steam: #171a21;
$discord: #5865f2;
$telegram: #0088cc;
$clarity: #61bed9;
$homeadvisor: #f89000;
$houzz: #4dbc15;
$angi: #ff6153;
$glassdoor: #0caa41;

 


Social Media Colors: LESS Variables


/** 
 *  LESS Variables 
 *  Social Media Colors 
 */

@facebook: #1877f2;
@facebookold: #3b5998;
@twitter: #1da1f2;
@x: #000000
@youtube: #ff0000;
@instagrammagenta: #c32aa3;
@instagramblue: #4c5fd7;
@instagrampurple: #7232bd;
@instagramorange: #f46f30;
@instagramyellow: #ffdc7d;
@googleblue: #4285f4;
@googlered: #ea4335; 
@googleyellow: #fbbc05; 
@googlegreen: #34a853;
@pinterest: #bd081c;
@googleplus: #db4437;
@linkedin: #0a66c2;
@vimeoblue: #1ab7ea;
@tumblr: #2c4762;
@snapchat: #fffc00;
@whatsappgreen: #25d366;
@whatsappteal1: #075e54;
@whatsappteal2: #128c7e;
@tiktokblack: #010101; 
@tiktookblue: #69c9d0;
@tiktokpink: #ee1d52; 
@tiktokwhite: #fff;
@mastodon: #563acc;
@apple: #a6b1b7;
@amazon: #ff9900;
@alexablue: #00a7ce;
@alexadkblue: #232f3e;
@microsoftred: #f35022;
@microsoftgreen: #80bb03;
@microsoftblue: #03a5f0;
@microsoftyellow: #ffb903;
@periscope: #40a4c4;
@foursquarepink: #f94877; 
@foursquarenavy: #073282;
@foursquareblue: #2d5be3;
@yelp: #d32323;
@swarm: #ffa633;
@medium: #02b875;
@skypeblue: #00aff0;
@skypedkblue: #0078d7;
@android: #a4c639;
@twitch: #9146ff;
@stumbleupon: #e94826;
@flickrpink: #f40083;
@flickrblue: #006add;
@yahoo: #430297;
@soundcloud: #ff5500;
@spotifygreen: #1ed760;
@spotifydarkgreen: #1db954;
@dribbble: #ea4c89;
@slackpurple: #4a154b; 
@slackblue: #36c5f0; 
@slackgreen: #2eb67d; 
@slackred: #e01e5a; 
@slackyellow: #ecb22e; 
@reddit: #ff5700;
@deviantart: #05cc47;
@pocket: #ee4056;
@quora: #aa2200;
@quorablue: #2b6dad;
@slideshareorange: #e68523;
@slideshareblue: #00a0dc;
@fivehundredpx: #0099e5;
@vk: #4a76a8;
@listlyorange: #df6d46;
@listlyblue: #52b1b3;
@vine: #00b489;
@steam: #171a21;
@discord: #5865f2;
@telegram: #0088cc;
@clarity: #61bed9;
@homeadvisor: #f89000;
@houzz: #4dbc15;
@angi: #ff6153;
@glassdoor: #0caa41;

What other social media colors should be listed here? Let me know in the comments below.

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown SEO.

57 comments on “Social Media Colors 2024

  1. HI Leah:

    That’s an excellent suggestion. We’ll add the various Spotify brand colors to the list shortly, but to answer your main question, the hex code for Spotify Green is #1ED760.

    Thanks,
    John

    1. Hi Anastasia:

      We’ve heard your request and updated the brand colors for Facebook, Twitter, Pinterest, and YouTube to reflect the values going into 2018. Thanks for giving us a push in the right direction.

    1. Hi John:

      I’ve heard your concerns. Some of these brands I updated recently, but today I went through and checked all the brands listed here. Every social brand that has a published brand guideline has been updated as of December 11th, 2017. A few of these had major updates due to acquisition (DeviantArt, Slideshare), while others just needed an update (Vimeo, Skype, Pinterest, StumbleUpon, Foursquare). A couple of social media color palettes seemed to have no change from last time I checked (Reddit), and a few had no official brand guidelines that I could find, but looked the same as last time I looked (Yahoo, Listly, Soundcloud). Others I just put in not that long ago (Spotify, WhatsApp, Snapchat) and are current.

      Everything you see here now should be current with the current brand guidelines put out by the company and consistent with their own usage of those colors.

      Thanks,
      John

      1. Hi John,

        Thank you for creating this blog, it’s really useful.

        After reading the comments, i have an idea. Maybe you could add the date you update (or add) the logo brands, so we know if it’s the newest or not. Also the link source if exist (like the brand guidelines).

        Thank you

    1. Hi Simon:

      You’ll be happy to learn I’ve added these three brands to our social media color chart. The Steam colors represented on Brand Colors seemed to be off, so we took the main colors from the Steam site and their published material as our guide.

      Have a great day,
      John

  2. Such a huge social media hex color resource. I think this is the one place where everyone would find all the social media color codes.

    Thanks, John.

    1. Thanks for stopping by our site, Riyaz. Let us know if there are any social media branding colors we are missing, and we’ll add them to our next round of additions.

      – John

  3. Hi, just wondering why the social sharing banner at the bottom of your site with Facebook, Twitter and LinkedIn, does not use the colors you have listed in this blog post? Which ones are correct?

    1. Hey J:

      The social sharing banner is by Social Warfare. Maybe they’re behind on current branding colors, who knows?

      For your other question, the information on the main content of the page always takes precedent over colors that get shipped in helper plugins. If we put it in the list, then that’s the most current info we have (as of the last time we updated the page).

      Thanks,
      John

  4. Hi! That’s a good post. Could you put the Telegram color on there? Telegram is a very famous social network 🙂

    Thanks!!

  5. Hi John,
    Thanks for this work, it’s a great help for me. Could you add the CMYK code please or tell me how find them please?

    Alexandrine

    1. Hi Alexandrine:

      Thanks for the suggestion for CMYK codes. I probably won’t add those to this page, because I’d like to be able to do the same for all listings, and finding CMYK for the more obscure brands isn’t always possible.

      If you Google for the social network brand name plus “brand guidelines”, you can usually find a page or PDF with color codes and CMYK (if available) and how to use their logo and assets.

      Thanks,
      John

  6. What an amazing resource! Can you do TikTok? The black and white would be simple but the turquoise and pinkish/red highlights on the musical note aren’t as easy.

  7. Great list, great post!!!

    Glassdoor color code could be added too.
    #0CAA41 | RGB: R0 G175 B65 | CMYK: C83 M0 Y87 K0 | Pantone: PMS 2257C.

    Thanks so much!
    M.

  8. Hello,

    Can you please post the light grayish color code that’s the Instagram profile background behind and in-between posts and also it is in the search box?

    Thank you.

  9. Hi Brad:

    I’ll be adding the Alexa colors today. The main blue is #00a7ce; the dark gray is #232f3e; and white is their last main color: #fff.

    – John

  10. This is amazing and super helpful. I’m always wasting time having to look up social media colors when working on mockups. Thank you so much for the time saver!

Join the Conversation

Your email address will be kept private. Required fields marked *.