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

Boutons de connexion sociale, liens vers les canaux de médias sociaux – en 2020, cela est encore 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 […]? 1965

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

• Roboto pour Android
• Segoe UI pour Windows
• San Francisco pour iOS / macOS

Conception matérielle (ie YouTube et 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).

Valeurs des couleurs Messenger

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

Polices Messenger

Messenger sur macOS utilise Helvetica Neue à la place de San Francisco, mais tout le reste suit le système par défaut. [19659018] Le logo Instagram " width="1000" height="500" class="aligncenter size-full wp-image-176606" loading="lazy"/>

Valeurs de couleur Instagram

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

Instagram utilise beaucoup couleurs dans leur image de marque, bien que la valeur de couleur mentionnée ci-dessus soit celle utilisée dans leurs propres exemples.

Valeurs de couleur WhatsApp

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

Facebook Color Val ues

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

Valeurs de couleur Twitter

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

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.

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

Polices LinkedIn

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

Snapchat Color Values ​​

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

Polices Snapchat

Se démarquant du troupeau, Snapchat utilise la police Graphik !

Les applications Android, Google et 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
• RGB: rgb (255 0 0)

Valeur de couleur bleue Google

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

Valeur de couleur rouge Google

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

Google Yellow Color Value

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

Google Green Color Value

• Hex: # 34A853
• RGB: rgb (52 1 68 83)

Alphabet Red Color Value

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

• Hex: # ED1C24
• RGB: 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 {
    - messager: 0 132 255;
    --instagram: 225 48 108;
    - WhatsApp: 37 211 102;
    --facebook: 24 119 242;
    - Twitter: 29 161 242;
    --intérêt: 230 0 35;
    - lié: 22 102 197;
    - Snapchat: 255 252 0;
    --youtube: 255 0 0;
}

Ensuite, appelez-les comme ceci:

 .social-icon.facebook {
    couleur de fond: rgb (var (- facebook)); // sans alpha
    couleur de fond: rgb (var (- facebook) / 50%); // avec alpha
}

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