Este artículo se actualizó en noviembre de 2019 para reflejar los colores y las fuentes más recientes utilizados por las redes sociales como Facebook, Twitter e Instagram.
Por primera vez, esto no incluye Google Plus, que ahora está extinto. ¿Alguna vez estuvo realmente vivo?
Los Botones de inicio de sesión social, enlaces a canales de redes sociales: en 2019, esto sigue siendo algo importante en el diseño web y el diseño de aplicaciones.
Quiero decir, ¿qué negocio no está en las redes sociales en estos días?
Tener una colección de activos de marca utiliza redes sociales, para que podamos incorporarlos en nuestros propios diseños, es bastante útil.
Es algo que buscamos en Google cada vez que creamos una aplicación o sitio web
❓¿Cuál es el color utilizado por Facebook?
❓¿Cuál es el código de color de Facebook?
o simplemente, Facebook azul. De hecho, ¡apuesto a que es así como encontraste este artículo!
Bueno, no te haré esperar. Echemos un vistazo a los colores y fuentes utilizados por Facebook , Twitter , Pinterest , Instagram , Snapchat , LinkedIn , Facebook Messenger , YouTube y Google Material Design.
🏅Colores principales de Facebook, Twitter, Instagram, YouTube, Pinterest
Fuentes y colores utilizados por Facebook
Códigos de color «Facebook Blue»
Hex: # 4267b2
RGB: 66,103,178
Fuentes de Facebook
Windows: Segoe UI
macOS: San Francisco
iOS: San Francisco
Android: Roboto
Facebook usa la fuente Segoe UI para la versión de Windows de su sitio web de escritorio y la fuente San Francisco hecha por Apple para la versión macOS (ambas son la fuente predeterminada del sistema).
Para iOS y Android, son San Francisco y Roboto respectivamente (una vez más, ambas fuentes del sistema, por facilidad de lectura y familiaridad. Estas fuentes se están convirtiendo en un estándar.
Fuentes y colores utilizados por Twitter
Códigos de color de Twitter
Hex: # 38A1F3
RGB: 56,161,243
Combinado con variantes de «Twitter Grey» (que contiene una mezcla de tonos azules, negros y blancos), Twitter blue (# 38A1F3) se utiliza como el color principal de la marca.
Fuentes de Twitter
Windows: Helvética
macOS: Helvetica Neue
iOS: San Francisco
Android: Roboto
Si bien Twitter también ha predeterminado las fuentes del sistema para sus aplicaciones móviles (como lo hacen la mayoría de las redes sociales), la versión de Windows del sitio web utiliza Helvetica y la versión de MacOS Helvetica Neue, algo desactualizada, pero estoy seguro de que tienen sus razones.
Fuentes y colores utilizados por Pinterest
Códigos de color de Pinterest
Hex: # BD081C
RGB: 189,8,28
¡El clásico color rojo de Pinterest nunca ha cambiado!
Fuentes de Pinterest
Windows: Segoe UI
macOS: San Francisco
iOS: San Francisco
Android: Roboto
Dato curioso: mientras Pinterest usa aproximadamente las mismas fuentes que son estándar con otras redes sociales, Pinterest usa la fuente Hiragino para japonés y otros idiomas orientales, que se lee mejor en comparación con las fuentes usadas con idiomas romanos.
Fuentes y colores utilizados por Instagram
Códigos de color «gris de Instagram»
Hex: # 231F20
RGB: 35,31,32
Instagram también usa una combinación de diferentes gradientes.
Para ser honesto, es raro ver estos colores en la naturaleza: aquellos que hacen referencia a sus canales de redes sociales tienden a usar «Instagram Grey».
Fuentes de Instagram
Windows: Segoe UI
macOS: San Francisco
iOS: San Francisco
Android: Roboto
Nada fuera de lo común aquí. Como puedes, Segoe UI, San Francisco y Roboto se están convirtiendo en un estándar con las redes sociales, ya que Instagram no es diferente.
✅Snapchat
Fuentes y colores utilizados por Snapchat
Códigos de color de Snapchat
Hex: # FFFC00
RGB: 255,252,0
Fuentes de Snapchat
Windows: Avenir Next
macOS: Avenir Next
iOS: San Francisco
Android: Roboto
Por extraño que parezca, la fuente utilizada en la versión web de Snapchat es un poco diferente a la mayoría, ya que la mayoría tiende a volver a la fuente del sistema. Snapchat, sin embargo, usa Avenir Next.
✅Facebook Messenger
Fuentes y colores utilizados por Facebook Messenger
Códigos de color de Facebook Messenger
Aunque es una aplicación de Facebook, el azul utilizado por Messenger es ligeramente diferente:
Hex: # 0084FF
RGB: 0,132,255
Y el logotipo también usa infusiones de este color:
Hex: # 00C6FF
RGB: 0,198,255
Fuentes de Facebook Messenger
Messenger usa el mismo conjunto de fuentes que Facebook:
Windows: Segoe UI
macOS: San Francisco
iOS: San Francisco
Android: Roboto
✅Youtube
Códigos de color de YouTube
Hex: # ED3833
RGB: 237,56,51
Fuentes de YouTube
YouTube, propiedad de Google, usa solo Roboto.
Sí, eso es correcto. Todas las aplicaciones de Google y muchas aplicaciones de Android de terceros (por familiaridad y coherencia) utilizan el sistema de diseño de Google conocido como Material Design System.
El diseño del material contiene un sistema de color de colores aceptables (no obligatorio, pero sí recomendado) y la fuente predeterminada de Google, ampliamente reconocida, Roboto.
