Design

Códigos de cores de redes sociais e logos famosos

Google+ Pinterest LinkedIn Tumblr
Anúncios Google

Esses dias estava eu desenhando uns botões de rede social quando precisei saber rapidinho o código da cor azul característica do Facebook. Mesmo sendo fácil descobrir o hexadecimal de uma cor no Photoshop, é ainda mais fácil jogar “Facebook hex color” no Google e ver no que dá, não é verdade?

Foi assim que encontrei uma lista pequena num site gringo e resolvi ampliá-la, e deu nisso aqui: um listão de códigos de cores de vários sites e serviços online, além de algumas marcas famosas.

Se você conhece design web o bastante pra estilizar seus blogs ou sites, deve saber como usar os códigos. Em todo o caso, é simples: digamos que você quer um botão estilizado com CSS usando a mesma cor do Yahoo!, aquele tom lilás. É só copiar o hexadecimal da lista e usar na folha de estilos, por exemplo:

background: #400191;

Também pode usar o código rgb, que em CSS fica assim:

background: rgb(64,1,145);

Mas se você manja dos CSSs, já deve saber isso… Bem, fique aí com a lista e se tiver alguma cor de marca que faltou e está precisando, comente e a lista vai sendo ampliada.

Nota: tem outro jeito muito fácil de pegar o código de cores de qualquer lugar: é só usar alguma extensão no navegador. Pra quem, como eu, usa o Chrome, tem o ColorZilla, que oferecerá um conta-gotas com essa finalidade: é só clicar no lugar de onde quer copiar a cor e pronto. Existe também pra Firefox.

Nota 2: dica rápida é que você também pode definir a cor em rgba, assim terá o quarto canal como transparência do objeto. Supondo que quero aquele mesmo botão do Yahoo! ficando semi-transparente ao passar o mouse, seria só criar um estilo “hover” com a cor de fundo assim:

background: rgba(64,1,145,0.5);

E teria 50% de transparência, lembrando que varia de 0 (totalmente transparente) até 1 (totalmente opaco). Mas sem mais enrolação, a lista:

Facebook
HEX: #3b5998
RGB: 59, 89, 152

Twitter
HEX: #00aced
RGB: 0, 172, 237

Google+
HEX: #dd4b39
RGB: 221, 75, 57

YouTube
HEX: #bb0000
RGB: 187, 0, 0

Linkedin
HEX: #007bb6
RGB: 0, 123, 182

Instagram
HEX: #517fa4
RGB: 81, 127, 164

Pinterest
HEX: #cb2027
RGB: 203, 32, 39

Quora
HEX: #a82400
RGB: 168, 36, 0

Flickr (rosa)
HEX: #ff1981
RGB: 255, 25, 129

Flickr (azul)
HEX: #006add
RGB: 0, 106, 221

Tumblr
HEX: #385774
RGB: 56, 87, 116

VK
HEX: #45668e
RGB: 69, 102, 142

Vimeo (azul)
HEX: #20b9eb
RGB: 32, 185, 235

Vimeo (verde)
HEX: #aad450
RGB: 170, 212, 80

Foursquare
HEX: #0072b1
RGB: 0, 114, 177

Adobe
HEX: #ff0000
RGB: 255, 0, 0

deviantART (verde)
HEX: #627870
RGB: 98, 120, 112

deviantART (amarelo)
HEX: #bbd353
RGB: 187, 211, 83

AIM
HEX: #fdd500
RGB: 253, 213, 0

Amazon
HEX: #ff6600
RGB: 255, 102, 0

Android
HEX: #a4c639
RGB: 164, 198, 57

Behance
HEX: #1769ff
RGB: 23, 105, 255

Bing
HEX: #fcd116
RGB: 252, 209, 22

Blogger
HEX: #f57d00
RGB: 245, 125, 0

bitly (laranja)
HEX: #ee6123
RGB: 238, 97, 35

bitly (azul)
HEX: #61b3de
RGB: 97, 179, 222

Coca-Cola
HEX: #ed1c16
RGB: 237, 28, 22

Orkut
HEX: #f82790
RGB: 248, 39, 144

Dropbox
HEX: #007ee5
RGB: 0, 126, 229

Excel
HEX: #008641
RGB: 0, 134, 65

Google (ícone)
HEX: #4c89e3
RGB: 76, 137, 227

HTML5
HEX: #e34f26
RGB: 227, 79, 38

Last FM
HEX: #c3000d
RGB: 195, 0, 13

LinkedIn
HEX: #0976b4
RGB: 9, 118, 180

McDonald’s (vermelho)
HEX: #d3222a
RGB: 211, 34, 42

McDonald’s (amarelo)
HEX: #ffc82d
RGB: 255, 200, 45

PayPal 1
HEX: #253b80
RGB: 37, 59, 128

PayPal 2
HEX: #179bd7
RGB: 23, 155, 215

PowerPoint
HEX: #f04e23
RGB: 240, 78, 35

Rdio
HEX: #007dc3
RGB: 0, 125, 195

RSS
HEX: #f26522
RGB: 242, 101, 34

Skype
HEX: #00aff0
RGB: 0, 175, 240

Spotify
HEX: #7ab800
RGB: 122, 184, 0

Twitch.tv
HEX: #6441a5
RGB: 100, 65, 165

Word
HEX: #0054a6
RGB: 0, 84, 166

WordPress.org
HEX: #464646
RGB: 70, 70, 70

WordPress.com
HEX: #1e8cbe
RGB: 30, 140, 190

Yahoo!
HEX: #400191
RGB: 64, 1, 145

Xbox
HEX: #107b11
RGB: 16, 123, 17

PlayStation
HEX: #0069c1
RGB: 0, 105, 193

Windows 8
HEX: #00bcf2
RGB: 0, 188, 242

Linux Ubuntu
HEX: #dd4814
RGB: 221, 72, 20

WhatsApp
HEX: #34af23
RGB: 52, 175, 35

Windows Phone
HEX: #68217a
RGB: 104, 33, 122

Ask.fm
HEX #93ce00
RGB 147, 206, 0

eBay (vermelho)
HEX #e43137
RGB 228, 49, 55

eBay (azul)
HEX #0063d1
RGB 0, 99, 209

eBay (amarelo)
HEX #f4ae01
RGB 244, 174, 1

eBay (verde)
HEX #85b716
RGB 133, 183, 22

StackOverflow (laranja)
HEX #f47a20
RGB 244, 122, 32

StackOverflow (cinza)
HEX #818185
RGB 129, 129, 133

Google logo (vermelho)
HEX #da4d39
RGB 218, 77, 57

Google logo (azul)
HEX #1166e8
RGB 17, 102, 232

Google logo (amarelo)
HEX #ffc113
RGB 255, 193, 19

Google logo (verde)
HEX #009c58
RGB 0, 156, 88

About.me
HEX #00405d
RGB 0, 64, 93

Precisa de outro ou acha que faltou algum importante? Comente.

Anúncios Google

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

16 Comentários

  1. Roberta Fernandes Almeida Responder

    Boa tarde, a logo do Paypal têm 2 tons de azuis. Quais são os códigos de ambos? Tem um mais escuro e um mais claro. Obrigada

  2. Roberta Fernandes Almeida Responder

    Gostaria de saber o código da cor azul do meio de pagamento Moip. Obrigada

    • Olá, se for o tom de roxo do logo, é #5e003e (é só tirar um print da tela e jogar no Photoshop, então pegar a amostra de cor com a Ferramenta Conta-Gotas).

  3. Que show! Parabéns pelo material, vai ser de bom proveito. Continue assim galera do Tutoriart!

Deixe um Comentário

Pin