Cores HTML: Entenda Os Códigos Hexadecimais E Acerte Seu Layout

Colorindo seu site

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

Entenda o código hexadecimal

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. 

Mas como?

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 hexadecimais 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. 

Aplicando as cores HTML como código hexadecimal

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, além do próprio site da Pantone, você encontra:

  • o seletor de cores Site24x7
  • HEX Colhedor de cores;
  • Identificador de Cores Online – Wibushi.

cores html

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 da cor em 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.

Imagem de: pexels.com

Carina Xavier
Jornalista apaixonada por literatura, música e cinema. É Analista de Conteúdo na Agência Mestre e, antes disso, foi produtora editorial, assessora de imprensa e teve vários blogs ao longo do caminho. A escrita é sua paixão e acredita que a comunicação pode mover barreiras.