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.
26 Comments
OLÁ POST BACANA E ÚTIL ESSE QUE VOCÊ ESCREVEU.
PARABÉNS!
ESTOU ESCREVENDO A PÁGINA DE CONTATOS DO MEU SITE E PRECISAVA SABER A COR DO TELEGRAM.
TEM COMO ME AJUDAR?
GRATIDÃO.
#3390ec, se for a cor do logotipo padrão.
Cara esse seu post ajuda mto gente, usei em um projeto para personalizar um arquivo aqui no trabalho, Você podia atualizar ele com os pedidos dos comentários e de quebra colocar as fontes usadas pois vou ter que pesquisar agora rsr.
Ola, qual a cor hex. do logo Sky tv? por favor
Se for exatamente aquele do logotipo no site da Sky, é #e30609
Gostaria de saber o código das cores do Canva, é aquele site de designer!
A cor do logotipo é #00C4CC ou rgb(0,196,204). Explico aqui como descobrir cores no navegador. Além do ColorZilla, tem o Colorpick e outras extensões.
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!