Boutons de connexion sociale, liens vers les canaux de médias sociaux – en 2020, c’est encore une chose dans la conception de sites Web et d’applications. Je veux dire, quelle entreprise n’est pas sur les médias 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 (pour pouvoir les utiliser dans nos designs) est assez pratique. C’est quelque chose que nous « googlisons » chaque fois que nous concevons une application ou un site web. (Par exemple, » Facebook blue « , » Facebook hex value « , » What is the color used by Facebook ? « , et ainsi de suite).
En fait, je parie que c’est comme ça que vous avez trouvé cet article !
Bien, je ne vous ferai pas attendre davantage. Jetons un coup d’œil aux polices et aux 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 polices et les couleurs plus récentes utilisées par les réseaux sociaux, notamment Facebook, Twitter, Instagram, et divers autres. Google+ n’a pas fait son retour.
Quelle est la police utilisée par ? 🤔
Note rapide : les polices du système (c’est-à-dire : system-ui en CSS) sont la norme, sauf indication contraire. Pour chaque support, cela signifie :
- Roboto pour Android
- Ségoe UI pour Windows
- San Francisco pour iOS/macOS
La conception matérielle (c’est-à-dire YouTube et les autres applications Google) utilise également Roboto. Cependant, le logo Google proprement dit utilise la police Product Sans de Google (et cela s’applique également au logo Alphabet).
Messenger, par Facebook
Valeurs de couleur de Messenger
- Valeur hexagonale de Messenger :
#0084FF - Valeur RVB de Messenger :
rgb(0 132 255)
Polices Messenger
Messenger sur macOS utilise Helvetica Neue au lieu de San Francisco, mais tout le reste suit la valeur par défaut du système.
Instagram, par Facebook
Valeurs de couleur d’Instagram
- Valeur hexagonale d’Instagram :
#E1306C - Valeur RVB d’Instagram :
rgb(225 48 108)
Instagram utilise de nombreuses couleurs dans son branding, bien que la valeur de couleur mentionnée ci-dessus soit celle utilisée dans ses propres exemples.
WhatsApp, par Facebook
Valeurs de couleur de WhatsApp
- Valeur hexagonale de WhatsApp :
#25D366 - Valeur RVB de WhatsApp :
rgb(37 211 102)
Facebook, par Facebook (lol)
Valeurs des couleurs de Facebook
- Valeur hexagonale de Facebook :
#1877F2 - Valeur RVB de Facebook :
rgb(24 119 242)
Valeurs des couleurs Twitter
- Valeur hexagonale Twitter :
#1DA1F2 - Valeur RVB de Twitter :
rgb(29 161 242)
Valeurs de couleur de Pinterest
- Valeur hexagonale de Pinterest :
#E60023 - Valeur RVB de Pinterest :
rgb(230 0 35)
Pinterest Fonts
Pinterest utilise Helvetica/Neue Haas Grotesk pour son site web, mais la police système par défaut pour tout le reste.
Valeurs de couleur deLinkedIn
- Hex :
#1666C5 - RGB :
rgb(22 102 197)
LinkedIn Fonts
LinkedIn utilise : Sans-Serif sur son site Web, ce qui signifie Helvetica first/Arial second/system default otherwise.
Snapchat
Valeurs de couleur de Snapchat
- Hex :
#FFFC00 - RGB :
rga(255 252 0)
Les polices de caractères de Snapchat
Se démarquant du troupeau, Snapchat utilise la police Graphik !
YouTube
Android, Google et les applications appartenant à Google comme 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 des couleurs de YouTube
- Hex :
#FF0000 - RGB :
rgb(255 0 0)
Valeur de la couleur bleue de Google
- Hex :
#4285F4 - RGB :
rgb(66 133 244)
Valeur de la couleur rouge de Google
- Hex :
#EA4335 - RGB :
rgb(234 67 53)
Valeur de la couleur jaune de Google
- Hex :
#FBBC05 - RGB :
rgb(251 188 5)
Valeur de la couleur verte de Google
- Hex :
#34A853 - RGB :
rgb(52 168 83)
Valeur de la couleur rouge d’Alphabet
Alphabet est la société propriétaire de Google.
- Hex :
#ED1C24 - RGB :
rgb(52 168 83)
Couleurs des médias sociaux en tant que variables CSS
Placez cet extrait de code en haut de votre fichier CSS pour utiliser les couleurs de marque des médias sociaux (RVB) susmentionnées en tant que 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;}Puis appelez-les comme ceci :
.social-icon.facebook { background-color: rgb(var(--facebook)); // without alpha background-color: rgb(var(--facebook) / 50%); // with alpha}Vous n’avez toujours pas trouvé ce que vous cherchez ? Ne vous inquiétez pas – nous avons un guide des polices de caractères gratuites qui vous permettra de vous occuper de vous.