Polices et couleurs utilisées par Facebook, Twitter, Instagram + Plus –

Cet article a été mis à jour en novembre 2018 pour refléter les couleurs et les polices les plus récentes utilisées par les réseaux sociaux tels que Facebook, Twitter et Instagram. Pour la première fois, cela n’inclut pas Google Plus, qui est maintenant disparu.

Boutons de connexion à des réseaux sociaux, liens vers des canaux de médias sociaux – en 2018, le design web et le design d'applications en étaient toujours autant. Je veux dire, quelles affaires ne se trouvent pas sur les médias sociaux ces jours-ci?

Il est très utile de disposer d’une collection d’actifs de marque utilisés sur les réseaux sociaux, de sorte que nous puissions les intégrer à nos propres conceptions. C'est quelque chose que nous Google chaque fois que nous construisons une application ou un site web ( Quelle est la couleur utilisée par Facebook? Quel est le code de couleur de Facebook? ou tout simplement, Facebook bleu ). En fait, je parie que vous avez trouvé cet article!

Regardez Créer de meilleurs graphismes plus rapidement avec Canva

Créez des conceptions Web professionnelles et imprimez des conceptions avec Canva

Je ne vous ferai pas attendre. Jetons un coup d'œil aux couleurs et aux polices utilisées par Facebook Twitter Pinterest Instagram Snapchat , LinkedIn Facebook Messenger YouTube et de Google Material Design . Si j'ai manqué quelque chose, lancez-moi sur Twitter .

Montre-moi juste les couleurs principales (Facebook, Twitter, Instagram, YouTube, Pinterest).

Facebook

Codes de couleur «Facebook bleu»

• Hex: # 4267b2
• RGB: 66.103.178

Polices Facebook

• Windows: Segoe UI
• macOS: San Francisco
• iOS: San Francisco
• Android: Roboto

Facebook utilise la police Segoe UI pour la version Windows de leur site Web et la police San Francisco créée par Apple pour la version macOS (les deux sont la police système par défaut). ). Pour iOS et Android, il s'agit respectivement de San Francisco et de Roboto (encore une fois, les deux polices système, pour des raisons de lisibilité et de familiarité. Ces polices sont en train de devenir un standard.

En savoir plus sur Les directives de marque de marque de Facebook ici.

Twitter

Codes de couleur Twitter

• Hex: # 38A1F3
• RGB: 56 161 243

Combiné avec des variantes de «Twitter Grey» (qui contient un mélange de bleu, de noir et de les tons blancs), le bleu Twitter (# 38A1F3) est la couleur principale utilisée dans la marque.

Cliquez ici pour en savoir plus sur Les principes de marque de Twitter ici.

Police de Twitter

• Windows: Helvetica
• macOS: Helvetica Neue
• iOS: San Francisco
• Android: Roboto

Tandis que Twitter utilise également les polices système de ses applications mobiles (comme le font la plupart des réseaux sociaux), la version Windows du site utilise Helvetica. la version macOS Helvetica Neue – quelque peu dépassée mais Je suis sûr qu'ils ont leurs raisons.

N'oubliez pas que Twitter a testé Gotham Narrow au hasard ?

Pinterest

] Codes de couleur Pinterest

• Hex: # BD081C
• RGB: 189,8,28

La couleur rouge classique de Pinterest n’a jamais changé!

Polices Pinterest

• Windows: Segoe UI
• macOS: San Francisco
• iOS: San Francisco
• Android: Roboto

Fait amusant: alors que Pinterest utilise à peu près les mêmes polices que les autres réseaux sociaux, Pinterest utilise la police Hiragino pour le japonais et les langues orientales, qui se lit mieux par rapport aux polices utilisées avec les langues romaines.

En savoir plus sur Principes directeurs de Pinterest ici

Instagram

“Instagram Grey” Codes de couleur

• Hex: # 231F20
• RGB: 35,31,32

Instagra m utilise également une combinaison de différents gradients . Il est difficile de comprendre quelles sont les couleurs individuelles et dans quel scénario elles doivent être utilisées, mais vous pouvez trouver ici tous les actifs de de la marque Instagram . Pour être honnête, il est rare de voir ces couleurs à l'état sauvage – ceux qui font référence à leurs canaux de médias sociaux ont tendance à utiliser «Instagram Grey».

Instagram Fonts

• Windows: Segoe UI
• macOS: San Francisco
• iOS: San Francisco
• Android: Roboto

Rien d'extraordinaire ici. Comme vous le pouvez, Segoe UI, San Francisco et Roboto sont en quelque sorte en train de devenir un standard avec les réseaux sociaux, avec Instagram non plus.

Snapchat

Codes de couleur Snapchat

• Hex: # FFFC00
• RGB: 255,252,0

Polices de Snapchat

• Windows: Avenir Next
• macOS: Avenir Suivant
• iOS: San Francisco
• Android: Roboto

Curieusement, la police utilisée sur la version Web de Snapchat est un peu différente de la plupart des utilisateurs, car la plupart ont tendance à revenir à la police système. Cependant, Snapchat utilise Avenir Next.

Facebook Messenger

Codes de couleur Facebook Messenger

Bien qu’une application Facebook, le bleu utilisé par Messenger soit légèrement différent:

• Hex: # 0084FF
• RGB: 0,132,255

Le logo utilise également infuse cette couleur:

• Hex: # 00C6FF
• RGB: 0,198,255

Facebook Messenger Fonts

Messenger utilise le même jeu de polices que Facebook:

• Windows: Segoe UI
• macOS: San Francisco
• iOS: San Francisco
• Android: Roboto

LinkedIn

Codes de couleur LinkedIn

• Hex: # 0077B5
• RGB: 0,119,181

Police de LinkedIn sur LinkedIn

LinkedIn utilise de source sans exclusivement (avec Arial comme sauvegarde), en particulier avec des droits entre léger et semi-gras. Lisez à propos de Les directives de la marque de Linkedin ici.

Remarque: Source Sans n’a pas de style italique, donc substitut pour la Géorgie. Je sais, bizarre.

YouTube

Codes de couleur YouTube

• Hex: # ED3833
• RGB: 237,56,51

Polices YouTube

] YouTube, propriété de Google, utilise uniquement Roboto

Bonus: la conception matérielle de Google

Oui, c'est vrai. Toutes Les applications Google et de nombreuses applications Android tierces (par souci de cohérence et de cohérence) utilisent le système de conception de Google appelé Système de conception de matériel .

La conception de matière contient un système de couleurs de couleurs acceptables (non requis, mais recommandé) et police par défaut largement reconnue de Google, Roboto .

Ai-je oublié quelque chose? Faites-nous savoir dans les commentaires ou tweet moi .

Daniel Schwarz est un concepteur, développeur et fabricant de fond, mais un écrivain / éditeur, auteur 3x, et professeur au coeur. Actuellement éditeur de blogs de conception chez Toptal et SitePoint, rédacteur chez .net et Web Designer Magazine, collaborant occasionnellement avec des personnalités de premier plan comme Adobe et InVision. Fondée uxtricks.design .