Design

Códigos de cores de redes sociais e logos famosos

Por

36669

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.

- Publicidade -

11 COMENTÁRIOS

João Pedro 22/03/2017 at 22:55

Tem o codigo da cor verde da razer?

Responder
Roberta Fernandes Almeida 05/10/2016 at 17:41

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

Responder
- Daniel Lemes 05/10/2016 at 19:54
  
  O terceiro azul é sobreposição dos dois com a letra da frente em opacidade reduzida, resulta em #012069 ou rgb 1,32,105.
  
  Responder
Roberta Fernandes Almeida 05/10/2016 at 17:32

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

Responder
- Daniel Lemes 05/10/2016 at 17:44
  
  O azul do texto é #002857 ou rgb 0,40,87. O azul claro é #009add ou rgb 0,154,221 (segundo o Colorzilla).
  
  Responder
Jessica 12/02/2016 at 09:30

Olá,

Gostaria de saber o código da cor da Wine.com.br

Responder
- Daniel Lemes 14/02/2016 at 15:03
  
  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).
  
  Responder
Renato Lopes 31/12/2015 at 11:32

Valeu cara, parabéns... encontrei o q precisava

Responder
ZorT 12/11/2015 at 23:47

Show

Responder
Filipe Vasconcelos 02/05/2015 at 18:52

Muito bom! valeu

Responder
Monike Laiz 10/03/2015 at 10:41

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

Responder