قلم ها و رنگ هایی که توسط فیس بوک ، توییتر ، اینستاگرام ، گوگل و موارد دیگر استفاده می شود

دکمه های ورود به سیستم اجتماعی ، پیوند به کانال های رسانه های اجتماعی – در سال 2020 این موضوع همچنان در طراحی وب و طراحی برنامه وجود دارد. منظورم این است که این روزها چه مشاغلی در شبکه های اجتماعی وجود ندارد؟ این یک ضرورت است!

دانستن اینکه فونت ها و رنگ های مختلفی که شبکه های اجتماعی از آن استفاده می کنند چیست (برای اینکه بتوانیم از آنها در طراحی های خود استفاده کنیم) کاملاً مفید است. این چیزی است که ما هر بار که برنامه یا وب سایتی را طراحی می کنیم “گوگل” می کنیم. (به عنوان مثال ، “Blue Facebook” ، “Facebook hex value” ، “Facebook از چه رنگی استفاده می کند؟” و غیره).

در واقع ، من شرط می بندم که این مقاله را چگونه پیدا کردید!

خوب ، دیگر شما را منتظر نمی گذارم. بیایید نگاهی به قلم ها و رنگ های استفاده شده توسط مسنجر (توسط فیس بوک) ، اینستاگرام (توسط فیس بوک) ، واتس اپ (توسط فیس بوک) ، خود فیس بوک ، توییتر ، Pinterest ، LinkedIn ، Snapchat و در آخر ، Google / YouTube بیندازیم.

این مقاله در سال 2020 به روز شده است تا قلم ها و رنگ های جدیدتر استفاده شده توسط شبکه های اجتماعی ، از جمله فیس بوک ، توییتر ، اینستاگرام و موارد دیگر را نشان دهد. + Google بازگشتی نداشته است.

فونت استفاده شده توسط چیست […]؟ 🤔

یادداشت سریع: فونت های سیستم (یعنی : system-ui در CSS) استاندارد هستند مگر اینکه خلاف آن بیان شده باشد. برای هر رسانه ، این بدان معنی است:

• ربات برای اندروید
• Segoe UI برای ویندوز
• سانفرانسیسکو برای iOS / macOS

از طراحی متریال (یعنی YouTube و سایر برنامه های Google) نیز استفاده می شود ربات. با این حال ، آرم واقعی گوگل از قلم Product Sans (گوگل) بدون محصول Google استفاده می کند (و این برای آرم Alphabet نیز صدق می کند).

مقادیر رنگ مسنجر

• مقدار hex مسنجر: #0084FF
• مقدار RGB مسنجر: rgb(0 132 255)

قلم های مسنجر

پیام رسان در macOS استفاده می کند Helvetica Neue به جای سانفرانسیسکو ، اما همه موارد دیگر به طور پیش فرض سیستم را دنبال می کنند.

مقادیر رنگی اینستاگرام

• ارزش hex Instagram: #E1306C
• مقدار RGB اینستاگرام: rgb(225 48 108)

اینستاگرام استفاده می کند بسیاری از رنگ ها در مارک تجاری آنها ، اگرچه مقدار رنگی که در بالا ذکر شد همان است که در نمونه های خود استفاده شده است.

مقادیر رنگی WhatsApp

• WhatsApp hex value: #25D366
• مقدار RGB WhatsApp: rgb(37 211 102)

مقادیر رنگی فیس بوک

• ارزش هگزا در فیس بوک: #1877F2
• مقدار RGB فیس بوک: rgb(24 119 242)

ارزش رنگ توییتر

• ارزش هجری توییتر: #1DA1F2
• ارزش RGB توییتر: rgb(29 161 242)

مقادیر رنگ Pinterest

• مقدار Pinterest hex: #E60023
• مقدار Pinterest RGB: rgb(230 0 35)

قلم های Pinterest

Pinterest استفاده می کند Helvetica / Neue Haas Grotesk برای وب سایت آنها ، اما فونت پیش فرض سیستم برای همه موارد دیگر.

مقادیر رنگی LinkedIn

• سحر و جادو: #1666C5
• RGB: rgb(22 102 197)

قلم های LinkedIn

LinkedIn استفاده می کند : Sans-Serif در وب سایت آنها ، به این معنی است هلوتیکا اولین/Arial second / سیستم در غیر این صورت پیش فرض است.

مقادیر رنگی Snapchat

• سحر و جادو: #FFFC00
• RGB: rga(255 252 0)

قلم های Snapchat

Snapchat که از گله متمایز است ، از گرافیک فونت!

برنامه های Android ، Google ، و متعلق به Google مانند YouTube از سیستم طراحی معروف به استفاده می کنند طراحی مواد، که به چندین رنگ و همچنین استفاده از ربات قلم

مقادیر رنگی YouTube

• سحر و جادو: #FF0000
• RGB: rgb(255 0 0)

مقدار رنگ آبی Google

• سحر و جادو: #4285F4
• RGB: rgb(66 133 244)

مقدار رنگ قرمز گوگل

• سحر و جادو: #EA4335
• RGB: rgb(234 67 53)

مقدار رنگ زرد Google

• سحر و جادو: #FBBC05
• RGB: rgb(251 188 5)

مقدار رنگ سبز Google

• سحر و جادو: #34A853
• RGB: rgb(52 168 83)

مقدار رنگ قرمز حروف الفبا

الفبا شرکتی است که مالک Google است.

• سحر و جادو: #ED1C24
• RGB: rgb(52 168 83)

این قطعه کد را در بالای پرونده 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;
}

سپس آنها را اینگونه صدا کنید:

.social-icon.facebook {
    background-color: rgb(var(--facebook)); // without alpha
    background-color: rgb(var(--facebook) / 50%); // with alpha
}

هنوز چیزی را که می خواهید پیدا نکردید؟ نگران نباشید – ما یک راهنما برای فونت های رایگان داریم که می تواند شما را تحت مراقبت قرار دهد.