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 |
Twitter |
|
Google+ |
YouTube |
|
Linkedin |
Instagram |
|
Pinterest |
Quora |
|
Flickr (rosa) |
Flickr (azul) |
|
Tumblr |
VK |
|
Vimeo (azul) |
Vimeo (verde) |
|
Foursquare |
Adobe |
|
deviantART (verde) |
deviantART (amarelo) |
|
AIM |
Amazon |
|
Android |
Behance |
|
Bing |
Blogger |
|
bitly (laranja) |
bitly (azul) |
|
Coca-Cola |
Orkut |
|
Dropbox |
Excel |
|
Google (ícone) |
HTML5 |
|
Last FM |
LinkedIn |
|
McDonald’s (vermelho) |
McDonald’s (amarelo) |
|
PayPal 1 |
PayPal 2 |
|
PowerPoint |
Rdio |
|
RSS |
Skype |
|
Spotify |
Twitch.tv |
|
Word |
WordPress.org |
|
WordPress.com |
Yahoo! |
|
Xbox |
PlayStation |
|
Windows 8 |
Linux Ubuntu |
|
WhatsApp |
Windows Phone |
|
Ask.fm |
eBay (vermelho) |
|
eBay (azul) |
eBay (amarelo) |
|
eBay (verde) |
StackOverflow (laranja) |
|
StackOverflow (cinza) |
Google logo (vermelho) |
|
Google logo (azul) |
Google logo (amarelo) |
|
Google logo (verde) |
About.me |
Precisa de outro ou acha que faltou algum importante? Comente.
19 Comments
Cara que postagem bem bolada, parabéns! Já estou utilizando aqui pra criar artes pras redes sociais. Abraço.
Qual o código da cor do modo escuro do YouTube?
Bem parece que em algumas páginas eles utilizam rgba ou algo do tipo mas no bruto, as cores são:
O corpo é #1f1f1f
A barra que que segue na lateral e no topo é: #282828
Os ícones não selecionados: #909090
e as fontes escuras #aaa
E do musical.ly?
Preciso o azul da Samsung, não achei ali nas cores
Ok. Muito bom. Mas nao encontrei o da VIVO. Afinal é azul ou roxo, ou violeta? Grato. Armando Fantini
Obrigado. #660099, copiado do site da Vivo.
Tem o codigo da cor verde da razer?
#00D801
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
O terceiro azul é sobreposição dos dois com a letra da frente em opacidade reduzida, resulta em #012069 ou rgb 1,32,105.
Gostaria de saber o código da cor azul do meio de pagamento Moip. Obrigada
O azul do texto é #002857 ou rgb 0,40,87. O azul claro é #009add ou rgb 0,154,221 (segundo o Colorzilla).
Olá,
Gostaria de saber o código da cor da Wine.com.br
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).
Valeu cara, parabéns… encontrei o q precisava
Show
Muito bom! valeu
Que show! Parabéns pelo material, vai ser de bom proveito. Continue assim galera do Tutoriart!