Catégories
Astuces et Design

Polices et couleurs utilisées par Facebook, Twitter, Instagram, Google et plus – SitePoint

Boutons de connexion sociale, liens vers les canaux de médias sociaux – en 2020, cela est toujours une chose dans la conception de sites Web et la conception d'applications. Je veux dire, quelle entreprise n'est pas sur les réseaux sociaux de nos jours? C’est une nécessité!

Savoir quelles sont les différentes polices et couleurs utilisées par les réseaux sociaux (afin que nous puissions les utiliser dans nos conceptions) est assez pratique. C'est quelque chose que nous «recherchons» à chaque fois que nous concevons une application ou un site Web. (Par exemple, «Facebook bleu», «Valeur hexadécimale Facebook», «Quelle est la couleur utilisée par Facebook?», Etc.).

En fait, je parie que c'est ainsi que vous avez trouvé cet article!

Eh bien, je ne vous ferai plus attendre. Jetons un coup d'œil aux polices et couleurs utilisées par Messenger (par Facebook), Instagram (par Facebook), WhatsApp (par Facebook), Facebook lui-même, Twitter, Pinterest, LinkedIn, Snapchat et enfin Google / YouTube.

Cet article a été mis à jour en 2020 pour montrer les nouvelles polices et couleurs utilisées par les réseaux sociaux, y compris Facebook, Twitter, Instagram et divers autres. Google+ n'a pas fait son retour.

Quelle est la police utilisée par (…)? 🤔

Remarque rapide: polices système (c.-à-d. : system-ui en CSS) sont la norme sauf indication contraire. Pour chaque support, cela signifie:

  • Roboto Pour Android
  • Segoe UI Pour les fenêtres
  • San Francisco pour iOS / macOS

La conception matérielle (c'est-à-dire YouTube et d'autres applications Google) utilise également Roboto. Cependant, le logo Google actuel utilise la propre police Product Sans de Google (et cela s'applique également au logo Alphabet).

Le logo Facebook Messenger

Valeurs de couleur de Messenger

  • Valeur hexadécimale Messenger: #0084FF
  • Valeur RVB Messenger: rgb(0 132 255)

Polices Messenger

Messenger sur macOS utilise Helvetica Neue au lieu de San Francisco, mais tout le reste suit le système par défaut.

Le logo Instagram

Valeurs de couleur Instagram

  • Valeur hexadécimale Instagram: #E1306C
  • Valeur RVB Instagram: rgb(225 48 108)

Instagram utilise de nombreuses couleurs dans sa marque, bien que la valeur de couleur mentionnée ci-dessus soit celle utilisée dans ses propres exemples.

Le logo WhatsApp

Valeurs de couleur WhatsApp

  • Valeur hexadécimale WhatsApp: #25D366
  • Valeur RVB WhatsApp: rgb(37 211 102)

Le logo Facebook

Valeurs de couleur Facebook

  • Valeur hexadécimale Facebook: #1877F2
  • Valeur RVB Facebook: rgb(24 119 242)

Le logo Twitter

Valeurs de couleur Twitter

  • Valeur hexadécimale Twitter: #1DA1F2
  • Valeur RVB Twitter: rgb(29 161 242)

Le logo Pinterest

Valeurs de couleur Pinterest

  • Valeur hexadécimale Pinterest: #E60023
  • Valeur RVB Pinterest: rgb(230 0 35)

Polices Pinterest

Pinterest utilise Helvetica / Neue Haas Grotesk pour leur site Web, mais la police système par défaut pour tout le reste.

Le logo LinkedIn

Valeurs de couleur LinkedIn

  • Hex: #1666C5
  • RVB: rgb(22 102 197)

Polices LinkedIn

LinkedIn utilise : Sans-Serif sur leur site Web, ce qui signifie Helvetica première/Arial sinon / système par défaut sinon.

Le logo Snapchat

Valeurs de couleur Snapchat

  • Hex: #FFFC00
  • RVB: rga(255 252 0)

Polices Snapchat

Se démarquant du troupeau, Snapchat utilise le Graphik Police de caractère!

Les logos YouTube

Android, Google et les applications appartenant à Google telles que YouTube utilisent le système de conception connu sous le nom de Material Design, qui fait référence à plusieurs couleurs et recommande également l'utilisation de la police Roboto.

Valeurs de couleur YouTube

  • Hex: #FF0000
  • RVB: rgb(255 0 0)

Le logo Google

Google Blue Color Value

  • Hex: #4285F4
  • RVB: rgb(66 133 244)

Valeur de couleur rouge Google

  • Hex: #EA4335
  • RVB: rgb(234 67 53)

Valeur de couleur jaune Google

  • Hex: #FBBC05
  • RVB: rgb(251 188 5)

Valeur de couleur verte de Google

  • Hex: #34A853
  • RVB: rgb(52 168 83)

Valeur de couleur rouge alphabet

Alphabet est la société propriétaire de Google.

  • Hex: #ED1C24
  • RVB: rgb(52 168 83)

Placez cet extrait de code en haut de votre fichier CSS pour utiliser les couleurs de la marque de médias sociaux (RVB) susmentionnées comme variables 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;
}

Ensuite, appelez-les comme ceci:

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

Avoir une question? Quelque chose ne va pas? Envoyez-moi un tweet sur Twitter.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *