Tabela de Cores HTML com nome, RGB e hexadecimal

 

Valores Hexadecimais

Valores hexadecimais usados em tabela de cor HTML não são especialmente complicados, mas podem ser difíceis para se lembrar. Como o prefixo “hexa-“ indica, estas notações incluem 6 algarismos totais, o que pode ser letras ou números.

Os 6 dígitos de uma notação hexadecimal ou hex em uma tabela de cor HTML indicam a quantidade de vermelho, verde e azul, ou RGB presentes em cor particular. O vermelho é indicado pelos 2 primeiros dígitos, verde pelos 2 dígitos do meio, e a quantidade de azul é com base nos 2 dígitos finais.

Um valor de “00” em notação hex é o menor valor possível, e em tabela de cor HTML indica nenhuma quantidade dessa cor. Isto quer dizer que uma notação hex de “000000” não tem vermelho, verde, ou azul, e assim, é exibido como preto.

O valor mais alto possível neste tipo de notação hex é “FF”, que indica tanto quanto de uma cor possível. Uma notação hex de “FFFFFF” em uma tabela de cor HTML indica branco, o valor mais alto possível de todas as 3 cores combinadas.

E vários tons e sombras diversos podem ser gerados por meio desta notação hex, que normalmente são mostrados em tabela de cor HTML. Ao invés de mostrar cada combinação possível, no entanto, estas tabelas geralmente mostram uma gama limitada ou paleta que é funcional e pode guiar alguém usando HTML.

Muitas tabelas mostram 216 cores que são relacionadas como “seguras para web” quando monitores tinham uma paleta potencial mais limitada. Existem milhões de cores que podem ser geradas usando notação hex, embora o diferencial entre “0010FF” e “0011FF” se mostra muito difícil para notar.

Paleta de Cor e Usuário

Não importa qual método prefere, códigos de cor RGB e hex são baseados em misturar e intensificar as 3 cores para criar muitas cores diferentes. No entanto, cores na web misturam juntas diferentemente do que pode esperar se misturasse tinta de cor diferente.

Sliding Scale

Sliding scale da cor é o que a maioria das representações das paletas de cor usa em lugar de um círculo de cor. E segue através de todas as cores do arco-íris, começando em vermelho, e continuando pelo laranja, amarelo, verde, azul, roxo e rosa até que retorna para o vermelho.

O valor RGB de vermelho é responsável pelos tons quentes de cor, como vermelho, rosa e laranja. Quanto mais alto este valor, mais quente a cor será. O vermelho é a primeira cor encontrada na sliding scale, com um valor de rgb(255, 0, 0), ou #FF0000.

Conforme trabalha pela escala, mais do valor verde RGB é adicionado para criar laranja, então amarelo. Amarelo com valor de rgb(255, 255, 0), ou #FFFF00, é a cor que vermelho e verde têm em comum. A partir deste ponto, o valor vermelho é reduzido para oferecer diferentes tons de verde.

Eventualmente vai atingir verde em sliding scale, com um valor de rgb(0, 255, 0) ou #00FF00. A partir dali, o valor azul RGB é adicionado para eventualmente criar ciano. Ciano com um valor de rgb(0, 255, 255) ou #00FFFF, é a cor que verde e azul têm em comum.

Similar a antes, o valor verde é então reduzido para criar tons diferentes de azul. Para o final de sliding scale, pode começar adicionando o valor vermelho RGB de volta para criar cores como roxo e rosa. Uma vez que atinge magenta, com um valor de rgb(255, 00, 255), ou #FF00FF, o valor azul é então reduzido para eventualmente alcançar a cor vermelho original que começou.

Valores RGB e Hexadecimal

Na conclusão, ambos valores RGB e hexadecimal podem ser usados para mostrar cores em página web. Não há certo ou errado para escrever valores de cor, mas cada um tem suas vantagens e desvantagens a depender da tarefa que está tentando completar.

Além disso, independente de qual convenção de nome de cor usar, pode facilmente manipular o tom de cor por ajustar os valores que está utilizando. Não há uma única técnica que pode oferecer um código para cada e toda cor.

Por vezes precisa de um tom mais brilhante, ou um mais turvo, que não pode ser obtido por simplesmente mudar um ou dois valores. Não ter medo de ajustar todos os 3 valores, os resultados podem ficar melhores do que estava desejando antes.

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. 

Tabela de Cores HTML com nome, RGB e hexadecimal em PDF

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.

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.

vIA: godaddy

VEJA TAMBÉM O GUIA EMOCIONAL DAS CORES

 

Tabela de Cores HTML com nome, RGB e hexadecimal em PDF