instagram分享
Social login buttons, links to social media channels — in 2020 this is still a thing in web design and app design. I mean, what business isn’t on social media these days? It’s a necessity!
社交登录按钮，指向社交媒体渠道的链接—到2020年，这仍然是Web设计和应用程序设计中的一件事。 我的意思是，这些天社交媒体上没有从事什么业务？ 这是必须的！
Knowing what the different fonts and colors used by social networks are (so that we can use them in our designs) is quite handy. It’s something we “google” every time we design an app or website. (For example, “Facebook blue”, “Facebook hex value”, “What is the color used by Facebook?”, and so on).
知道社交网络使用的不同字体和颜色是什么(以便我们可以在设计中使用它们)非常方便。 每当我们设计一个应用程序或网站时，我们都会用它“谷歌”。 (例如，“ Facebook蓝色”，“ Facebook十六进制值”，“ Facebook使用什么颜色？”等等)。
In fact, I bet that’s how you found this article!
实际上，我敢打赌，这就是您找到这篇文章的方式！
Well, I won’t keep you waiting any more. Let’s take a look at the fonts and colors used by Messenger (by Facebook), Instagram (by Facebook), WhatsApp (by Facebook), Facebook itself, Twitter, Pinterest, LinkedIn, Snapchat, and finally, Google/YouTube.
好吧，我不会再让您等待了。 让我们看一下Messenger(通过Facebook)，Instagram(通过Facebook)，WhatsApp(通过Facebook)，Facebook本身，Twitter，Pinterest，LinkedIn，Snapchat和最终Google / YouTube使用的字体和颜色。
This article was updated in 2020 to show the newer fonts and colors used by social networks, including Facebook, Twitter, Instagram, and various others. Google+ didn’t make a comeback.
本文已于2020年更新，以显示社交网络(包括Facebook，Twitter，Instagram以及其他各种社交网站)使用的更新字体和颜色。 Google+没有卷土重来。
[…]使用什么字体？ 🤔 (What’s the font used by […]? 🤔)
Quick note: system fonts (i.e. : system-ui in CSS) are the standard unless otherwise stated. For each medium, this means:
快速说明：除非另有说明，否则系统字体(即CSS中的: system-ui )是标准字体。 对于每种介质，这意味着：
Roboto for Android
Android版Roboto
Segoe UI for Windows
Windows的Segoe UI
San Francisco for iOS/macOS
适用于iOS / macOS的旧金山
Material design (i.e. YouTube and other Google apps) also uses Roboto. However, the actual Google logo uses Google’s very own Product Sans font (and this applies to the Alphabet logo too).
素材设计(例如YouTube和其他Google应用)也使用Roboto 。 但是，实际的Google徽标使用Google自己的Product Sans字体(这也适用于Alphabet徽标)。
Messenger，由Facebook提供 (Messenger, by Facebook)
信使颜色值 (Messenger Color Values)
Messenger hex value:
#0084FFMessenger十六进制值：
#0084FFMessenger RGB value:
rgb(0 132 255)Messenger RGB值：
rgb(0 132 255)
信使字体 (Messenger Fonts)
Messenger on macOS uses Helvetica Neue instead of San Francisco, but everything else follows the system default.
macOS上的Messenger使用Helvetica Neue而不是San Francisco，但其他所有设置均遵循系统默认值。
Instagram，通过Facebook (Instagram, by Facebook)
Instagram颜色值 (Instagram Color Values)
Instagram hex value:
#E1306CInstagram十六进制值：
#E1306CInstagram RGB value:
rgb(225 48 108)Instagram RGB值：
rgb(225 48 108)
Instagram uses many colors in their branding, although the color value mentioned above is the one used in their own examples.
尽管上面提到的颜色值是他们自己的示例中使用的一种颜色，但Instagram在其品牌中使用了多种颜色 。
WhatsApp，Facebook提供 (WhatsApp, by Facebook)
WhatsApp颜色值 (WhatsApp Color Values)
WhatsApp hex value:
#25D366WhatsApp十六进制值：
#25D366WhatsApp RGB value:
rgb(37 211 102)WhatsApp RGB值：
rgb(37 211 102)
Facebook，脸谱网 (lol) (Facebook, by Facebook (lol))
Facebook颜色值 (Facebook Color Values)
Facebook hex value:
#1877F2Facebook十六进制值：
#1877F2Facebook RGB value:
rgb(24 119 242)Facebook RGB值：
rgb(24 119 242)
推特 (Twitter)
Twitter颜色值 (Twitter Color Values)
Twitter hex value:
#1DA1F2Twitter十六进制值：
#1DA1F2Twitter RGB value:
rgb(29 161 242)Twitter RGB值：
rgb(29 161 242)
Pinterest (Pinterest)
Pinterest颜色值 (Pinterest Color Values)
Pinterest hex value:
#E60023Pinterest十六进制值：
#E60023Pinterest RGB value:
rgb(230 0 35)Pinterest RGB值：
rgb(230 0 35)
Pinterest字体 (Pinterest Fonts)
Pinterest uses Helvetica/Neue Haas Grotesk for their website, but the default system font for everything else.
Pinterest将Helvetica / Neue Haas Grotesk用于他们的网站，但其他所有内容均使用默认系统字体。
领英 (LinkedIn)
LinkedIn颜色值 (LinkedIn Color Values)
Hex:
#1666C5十六进制：
#1666C5RGB:
rgb(22 102 197)RGB：
rgb(22 102 197)
LinkedIn字体 (LinkedIn Fonts)
LinkedIn uses : Sans-Serif on their website, which means Helvetica first/Arial second/system default otherwise.
LinkedIn在其网站上使用: Sans-Serif ，这意味着Helvetica首先/ Arial其次/系统默认。
Snapchat (Snapchat)
Snapchat颜色值 (Snapchat Color Values)
Hex:
#FFFC00十六进制：
#FFFC00RGB:
rga(255 252 0)RGB：
rga(255 252 0)
Snapchat字体 (Snapchat Fonts)
Standing out from the herd, Snapchat uses the Graphik font!
Snapchat脱颖而出，使用Graphik字体！
的YouTube (YouTube)
Android, Google, and Google-owned apps such as YouTube use the design system known as Material Design, which makes references to several colors and also recommends the use of the Roboto font.
Android，Google和YouTube等Google拥有的应用程序使用称为Material Design的设计系统，该系统引用了多种颜色 ，并建议使用Roboto字体。
YouTube颜色值 (YouTube Color Values)
Hex:
#FF0000十六进制：
#FF0000RGB:
rgb(255 0 0)RGB：
rgb(255 0 0)
谷歌 (Google)
Google蓝色值 (Google Blue Color Value)
Hex:
#4285F4十六进制：
#4285F4RGB:
rgb(66 133 244)RGB：
rgb(66 133 244)
Google红色价值 (Google Red Color Value)
Hex:
#EA4335十六进制：
#EA4335RGB:
rgb(234 67 53)RGB：
rgb(234 67 53)
Google黄色值 (Google Yellow Color Value)
Hex:
#FBBC05十六进制：
#FBBC05RGB:
rgb(251 188 5)RGB：
rgb(251 188 5)
Google绿色价值 (Google Green Color Value)
Hex:
#34A853十六进制：
#34A853RGB:
rgb(52 168 83)RGB：
rgb(52 168 83)
字母红色值 (Alphabet Red Color Value)
Alphabet is the company that owns Google.
Alphabet是拥有Google的公司。
Hex:
#ED1C24十六进制：
#ED1C24RGB:
rgb(52 168 83)RGB：
rgb(52 168 83)
社交媒体颜色作为CSS变量 (Social Media Colors as CSS Variables)
Place this code snippet at the top of your CSS file to use the aforementioned social media brand colors (RGB) as CSS variables:
将此代码段放在CSS文件的顶部，以使用上述社交媒体品牌颜色(RGB)作为CSS变量：
:root {
--messenger: 0 132 255;
--instagram: 225 48 108;
--whatsapp: 37 211 102;
--facebook: 24 119 242;
--twitter: 29 161 242;
--pinterest: 230 0 35;
--linkedin: 22 102 197;
--snapchat: 255 252 0;
--youtube: 255 0 0;
}Then call them like this:
然后像这样称呼他们：
.social-icon.facebook {
background-color: rgb(var(--facebook)); // without alpha
background-color: rgb(var(--facebook) / 50%); // with alpha
}Have a question? Something amiss? Shoot me a tweet on Twitter.
有一个问题？ 有什么不对吗？ 在Twitter上给我发一条推文 。
翻译自: https://www.sitepoint.com/fonts-colors-used-facebook-twitter-google/
instagram分享
1821
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
