It's really useful to understand the various fonts and colors that social networks use so that we may include them into our designs. Every time we create an app or website, we "Google" it. (For instance, "Facebook blue," "Facebook hex value," "What color does Facebook use?" etc.)
In fact, I bet you discovered this post that way!
I promise not to keep you waiting any longer. Let's examine the typefaces and colors used by Facebook's Messenger, Instagram, WhatsApp, Facebook itself, Pinterest, LinkedIn, Snapchat, and Google/YouTube, before moving on to the other social media platforms.
Let's Get To The Good Stuff!
The typefaces and colors used by social networks including Facebook, Twitter, Instagram, and others have been changed in this page in 2022. We also included the rapidly expanding emerging platforms Discord, TikTok, and Twitch.
What typeface is being used by [...]?
A quick reminder: Unless otherwise mentioned, system typefaces (i.e., system-ui in CSS) are the norm. This implies, for each medium:
Roboto for Android
Segoe UI for Windows
San Francisco for iOS/macOS
Roboto is also used in Material design, which is used in Google products like YouTube. The real Google logo, however, makes use of the company's own Product Sans typeface (and this applies to the Alphabet logo too).
Messenger Color Values
Messenger hex value: #0084FF
Messenger RGB value: rgb (0 132 255)
Messenger on macOS uses Helvetica Neue instead of San Francisco, but everything else follows the system default.
Instagram Color Values
Instagram hex value: #E1306C
Instagram RGB value: rgb (225 48 108)
Although the color value stated above is the one used in their own examples, Instagram employs a variety of hues in their branding.
WhatsApp Color Values
WhatsApp hex value: #25D366
WhatsApp RGB value: rgb (37 211 102)
Facebook Color Values
Facebook hex value: #1877F2
Facebook RGB value: rgb (24 119 242)
Twitter Color Values
Twitter hex value: #1DA1F2
Twitter RGB value: rgb (29 161 242)
Pinterest Color Values
Pinterest hex value: #E60023
Pinterest RGB value: rgb (230 0 35)
Pinterest uses Helvetica/Neue Haas Grotesk for their website, but the default system font for everything else.
LinkedIn Color Values
RGB: rgb (22 102 197)
LinkedIn uses: Sans-Serif on their website, which means Helvetica first/Arial second/system default otherwise.
Snapchat Color Values
RGB: rga (255 252 0)
Standing out from the herd, Snapchat uses the Graphik font!
The Material Design system is used by Android, Google, and Google-owned applications like YouTube, and it makes use of a number of colors and the Roboto font as well.
YouTube Color Values
RGB: rgb (255 0 0)
Google Blue Color Value
RGB: rgb (66 133 244)
Google Red Color Value
RGB: rgb (234 67 53)
Google Yellow Color Value
RGB: rgb (251 188 5)
Google Green Color Value
RGB: rgb (52 168 83)
Alphabet Red Color Value
Alphabet is the company that owns Google.
RGB: rgb(52 168 83)
On top of their basic black logomark (#000000), they add:
TikTok Red Color Value
RGB: rgb (238,29,82)
TikTok Blue Color Value
RGB: rgb (105,201,208)
Fun fact: Discord’s visually distinctive blend of blue and purple is actually referred to as ‘Blurple’. They have a comprehensive branding guidelines document but if you just need the Logomark and color, you’re most welcome:
Discord ‘Blurple’ Color Value
Twitch has an excellent downloadable branding kit, although you do need to to work through their very twitchy branding introduction first. This extruded version is their default logo.
Twitch Purple Color Value
RGB: rgb (88,101,242)
Salty Red Dog Marketing, LLC is a marketing agency in Red Bank, NJ, Westport, CT, and everywhere in between. We service businesses with marketing strategies, digital marketing, social media, and consultations.
Phone: NJ: (732) 783-4822 // CT: (203) 429-9671