Quando precisamos aplicar cores HTML (cores em um documento HTML) também necessitamos saber os valores, os códigos hexadecimais deles. Isso porque o formato HTML suporta apenas esse formato para cores.
Ou seja, precisamos entender como funcionam as cores HTML de um site em um sistema hexadecimal. É por isso que neste artigo você vai encontrar:
- entenda o código hexadecimal
- aplicando as cores HTML como código hexadecimal
- como criar um esquema e escolher as cores do seu cliente
- bônus! o significado das cores
O que é código hexadecimal para cores HTML?
Para mudar as cores HTML do layout de um site ou blog, é preciso entender como funciona o esquema de cores dos códigos hexadecimal.
Antes de tudo, você sabe como as cores em RGB se formam? RGB significa Red, Green, Blue (vermelho, verde e azul), que são as cores primárias usadas na formação de todas as outras cores.
No mundo das telas digitais (TVs e computadores, por exemplo) esse é o padrão. E para que as diversas cores que vemos em um monitor se formarem, elas precisam ser definidas pelo código hexadecimal.
Código decimal: como funciona?
Comece considerando que cada cor tem 256 tons, no código hexadecimal essa cor é definida pelo seguinte:
- sinal de sustenido, ou jogo da velha (#);
- seis dígitos sendo: os dois primeiros referentes a intensidade da cor primária vermelha, os dois seguintes a intensidade da cor verde e os dois últimos dígitos a intensidade do azul.
- números de 0 a 9.
- letras de A a F
Ou seja, o código possui 2 dígitos para cada cor e cada cor pode ter 256 tonalidades. Nesse sentido as cores primárias ficam assim:
- vermelho: #FF0000
- verde: #00FF00
- azul: #0000FF
Mas também existem aqueles códigos decimais com oito espaços. Nesse caso, é porque eles representam a aplicação de configuração das cores HTML como transparência e opacidade. Geralmente FF é a opacidade máxima e 00 totalmente transparente.
Veja só um exemplo de como ficaria o código caso você aplicasse um verde semi transparente como cor HTML do seu site: #7700FF00.
Como aplicar cores HTML com código decimal?
As cores são bem importantes na criação do layout de um site. Por isso, uma forma de tornar esse processo mais simples é ter uma tabela de cores disponível, será por meio dela que a inclusão do código HTML e CSS será feita (isso ajudará, inclusive, na hora de aplicar as bordas e sombras diferentes).
Depois de ter separado essa tabela de cores, verifique se ela tem o nome de cada cor, assim como o código hexadecimal e o valor RGB. Dessa forma, ficará mais simples escolher a cara do seu site e as cores certas para ele!
Existem diversos sites e plataformas que você pode usar para gerar as cores e fazer suas próprias combinações. Além de softwares específicos para isso, e do próprio site da Pantone, você encontra:
- o seletor de cores Site24x7
- HEX Colhedor de cores;
- Identificador de Cores Online – Wibushi.
Como criar um esquema e escolher as cores do seu site?
A escolha das cores de um site é muito importante. Eles vão comunicar não apenas a personalidade do seu negócio, como também podem tornar a experiência do usuário melhor ou pior, imagine, por exemplo, um texto escrito com uma cor fluorescente que incomoda os olhos do usuário?
Com isso em mente, procure seguir as dicas a seguir:
Pense na marca do seu negócio
Como falamos, as cores precisam refletir a identidade da empresa, então pense além da combinação de botões, texto e imagens. É preciso ser consistente na forma com que a marca se apresentará em cada uma das páginas.
Não deixe a combinação de lado
Já ouviu falar em paleta de cores? Pois é, existem combinações que dão certo e algumas mais do que outras. Um site não pode ser monocromático, mas ao mesmo tempo precisa ter um mix de cor cauteloso.
Pesquise bem em sites e faça testes antes de tomar a decisão final e partir para a aplicação das cores no HTML.
Não se esqueça da psicologia das cores
Saber inserir códigos e mudar as cores HTML do seu site é importante, mas se você for fazer tudo isso sozinho (sem a ajuda de um designer ou programador) é preciso entender também como as cores funcionam para a mente humana.
A psicologia das cores se refere ao fato de que reagimos e sentimos emoções diferentes dependendo da cor que vemos, vermelho e amarelo, por exemplo, são cores que estimulam a fome. Aposto que já pensou em alguma marca de fast food com esse set de cor não é?
Bônus: o significado das cores
Com base nesse texto, você já compreendeu como são as cores no código HTML e como funciona o código hexadecimal para fazer sua própria combinação! Como dica final, veja o significado das cores mais usadas e torne o processo mais fácil:
- vermelho: energia, desejo, paixão, raiva, calor, amor;
- rosa: amor, felicidade, romantismo, charme, delicadeza, feminilidade;
- amarelo: sabedoria, conhecimento, imaginação, verão, desonestidade, covardia, inveja;
- laranja: energia, equilíbrio, calor, entusiasmo, extravagância;
- verde: cura, calma, natureza, saudável, renovação, juventude.
- azul: espiritualidade, paz, tranquilidade, calma, harmonia;
- roxo: misterioso, transformação, sabedoria, poder, sensibilidade, intimidade
- marrom: excitação, terra, casa, confiabilidade, conforto, estabilidade
- preto: sofisticação, mistério, medo, profundidade tristeza, remorso;
- branco: respeito,, pureza, limpeza, paz, juventude.
Então, já sabe como funcionam as cores HTML e quer colocar a mão no código e entender melhor a estrutura do texto CSS?
Confira o artigo: Você Sabe o que é CSS? Entenda Como Funciona e Para que Serve.
Portanto, os caminhos para a criação de um site são muitos, mas você sabia que é possível desenvolver uma página profissional, personalizada e completa sem ter nenhum conhecimento de código HTML e outras linguagens de programação?
O Criador de Sites da GoDaddy é uma ferramenta simples e intuitiva para te ajudar nesse processo. Ela possui um grande catálogo de templates personalizáveis para você desenvolver um layout atraente, rico e eficiente para a navegação do usuário.
Gerencie tudo em um único painel e ainda otimize seu site para que ele esteja sempre no topo das pesquisas dos principais buscadores da internet, como o Google e o Yahoo.
Saiba mais como criar um site profissional do zero:
Gostou do conteúdo? Para mais artigos que nem esse, fique de olho nas novidades do blog da GoDaddy! Até a próxima!
