Tabela de cores HTML: veja os códigos para aplicar cores nas tags HTML

O desenvolvimento de um site exige que diversos fatores sejam avaliados antes de ser disponibilizado para o usuário. Se você quer que as pessoas que navegam em seu site tenham uma boa experiência, é preciso priorizar não só o conteúdo, mas principalmente as cores. 

Muitos desenvolvedores usam a tabela de cores HTML para guiar suas decisões.

Isso torna o ambiente mais agradável de navegar, além de estimular algumas reações dos usuários. 

Exatamente a escolha da coloração pode fazer com que o seu usuário passe mais ou menos tempo no site. Neste artigo, você entenderá melhor sobre isso e conhecerá a tabela de cores HTML. Vamos lá? Continue a leitura!

Entenda as cores e as diferenças entre elas

A diferença entre as cores está relacionada com as suas variações. Na construção do código, são as versões diferenciadas que permitem que as cores tenham maior ou menor opacidade, luminosidade, e tons diferentes. Assim, é fundamental entender, primeiramente, a fórmula base das cores e, depois, seus elementos de variação.

Toda vez que uma cor é adicionada em um código HTML, é necessário escrever um formato que a representa. Essa nomenclatura está diretamente ligada a seus nomes. Além disso, é importante definir quais são os níveis de cores em cada elemento.

Na programação em HTML, cada vez que se usa uma cor é importante informá-la de maneira detalhada com esses códigos, mas essa não é a única requisição. Isso porque, em muitos momentos, as cores podem ter algum efeito visual. Esses detalhes ajudam a dar maior legibilidade e visualização a elementos dentro do site.

Agora você conhece melhor a ideia de código de cores e suas características. Assim, você entenderá as possibilidades na programação em HTML. A seguir, confira as principais!

Cores hexadecimais

As cores hexadecimais têm seis letras ou são representadas pelo símbolo “#” seguido de números que estão no sistema hexadecimal. Essas seis letras representam:

• a intensidade do vermelho (duas primeiras);
• a intensidade do verde (terceira e quarta);
• a intensidade do azul (duas últimas).

Esses valores utilizados vão desde 00, que representa o tom mais escuro, até o FF, que representa cores mais claras.

Cores RGB

RGB é a categoria de cor que leva as iniciais de três nomes: Red (vermelho), Green (verde) e Blue (azul). Para formar o RGB, são considerados três valores que vão de 0 a 255, justamente para medir o nível de intensidade em vermelho, verde e azul.

Cores RGBA

Já o RGBA tem uma sensível mudança em relação ao RGB: o valor Alpha. Esse elemento é usado para representar o nível de opacidade na cor em questão, indo de 0.0, que significa transparente, até 1.0, que significa opaco.

A utilização desse sistema é bastante comum em elementos com algum tipo de sobreposição a outros. Assim, a opacidade pode ser aplicada para dar um efeito que permita visualizar todos os itens na interface, ainda que sobrepostos.

Cores HSL

O sistema HSL é um pouco diferente e está mais ligado a variações características em cores. O seu nome é um acrônimo para as seguintes palavras: Hue (tom), Saturation (saturação) e Lightness (luminosidade).

É importante saber que quanto às medidas:

• o tom é medido em ângulos expressos em graus;
• a saturação é representada por porcentagem, indo de sombreado sensível (0%) até saturação completa (100%);
• a luminosidade é representada por porcentagem, sendo 100% uma cor totalmente branca e 0% uma cor preta.

Cores HSLA

HSLA é a representação HSL, mas com a adição do Alpha (assim como na relação RGB/RGBA). Da mesma forma, o A representará o nível de opacidade da cor, indo de 0.0 a 1.0.

Cores cores Html / CSS online

Cores RGB / Cores Hexadecimal online

	Nome da cor	código de cores hexadecimal	RGB
	black	#000000	0,0,0
	silver	#C0C0C0	192,192,192
	gray	#808080	128,128,128
	white	#FFFFFF	255,255,255
	maroon	#800000	128,0,0
	red	#FF0000	255,0,0
	purple	#800080	128,0,128
	fuchsia	#FF00FF	255,0,255
	green	#008000	0,128,0
	lime	#00FF00	0,255,0
	olive	#808000	128,128,0
	yellow	#FFFF00	255,255,0
	navy	#000080	0,0,128
	blue	#0000FF	0,0,255
	teal	#008080	0,128,128
	aqua	#00FFFF	0,255,255

O que pode colocar cor em um site?

Todos os elementos do HTML podem ter cor, mas é preciso utilizar algumas propriedades de CSS para que as cores sejam aplicadas. 

A propriedade color, por exemplo, define a cor aplicada no primeiro plano de fundo do elemento HTML. Já a propriedade background-color vai definir a cor do plano de fundo do elemento. Ambas podem ser usadas em quase todos os elementos HTML. Saiba mais sobre as aplicações abaixo!

Colocando cores no Texto

Na renderização de um elemento, as propriedades abaixo são usadas na definição da cor do texto, do plano de fundo e outras possibilidades para decorar tudo que envolve o texto, como:

Color 

Define a cor usada para decorar o texto, adicionando sublinhados, tachados etc.

Background-color

Define a cor do plano de fundo do texto.

Text-shadow

Define o efeito de sombra que será aplicado ao texto. A cor base da sombra é uma das opções, que é desfocada e mesclada no plano de fundo, seguindo a base dos outros parâmetros.

Text-decoration-color (en-US)

O padrão nas decorações de textos é usar a propriedade color para definir as cores. Porém, existe a possibilidade de sobrepor esse comportamento, usando uma cor diferente com a propriedade text-decoration-color.

Text-emphasis-color(enUS)

É usada no desenho de símbolos de ênfase adjacentes em cada caractere do texto. Geralmente, tem como utilidade, desenhar texto em idiomas do Leste Asiático.

Caret-color (en-US)

Também conhecido como cursos de entrada, o caret-color é usado para desenhar elementos editáveis, como <input> e <textarea> ou elementos em que o atributo HTML contenteditable está definido.

Colocando cores nas caixas

Todos os elementos são caixas com conteúdo dentro, formadas por um plano de fundo e uma borda. Assim, elas são compostas por:

Background-color

É a cor do plano de fundo, usado nas áreas do elemento que não têm conteúdo no primeiro plano

Column-rule-color (en-US)

Utilizada para desenhar a linha que separa as colunas de texto;

Outline-color(en-US)

Faz o contorno fora do elemento, mas é diferente da borda, pois não há espaço reservado para ele no documento. Por isso, pode sobrepor outros conteúdos. Em geral, essa marcação é usada como um indicador de foco, mostrando que o elemento vai receber entrada de informações.

Colocando cores nas bordas

Todos os elementos podem ter bordas em seu entorno. As bordas básicas de elemento são linhas desenhadas ao redor dos conteúdos. 

A propriedade border (en-US) pode ser usada para configurar toda a borda de uma só vez, inclusive outras características que não são da cor, como largura, estilo etc. Outras funções importantes são:

Border-color (en-US)

Define uma só cor para toda a borda do elemento;

Border-left-color, border-right-color (EUA), border-top-color (EUA) e border-bottom-color (EUA)

São usadas para definir a cor do lado correspondente da borda do elemento;

Border-block-start-color (EUA) e border-block-end-color (EUA)

Usadas para definir a cor que desenhará as bordas mais próximas do começo e do fim do bloco que ela está em torno;

Border-inline-start-color (EUA) e border-inline-end-color (EUA): 

São usadas para definir a cor das beiradas da borda mais próxima do fim e do começo das linhas de texto de dentro da caixa. As propriedades writing-mode, direction (en-US) e text-orientation (en-US) podem ser usadas para ajustar a direção do texto de acordo com o idioma.

Como escolher as cores certas para o seu projeto

Defina uma cor de base

A cor de base é aquela que vai definir o website ou o assunto em torno dele. Por exemplo, o azul está sempre relacionado com a cor do céu ou do oceano, por isso costuma ser utilizado em produtos e soluções marítimas. 

Para encontrar uma cor associada a sua estratégia, considere alguns pontos:

• procure uma cor que já está associada ao tópico do seu conteúdo naturalmente, como vermelho para produtos românticos, por exemplo;
• se o site é sobre um produto específico, use cores que já estão presentes no próprio produto;
• busque referências em outros sites relacionados ou dos concorrentes para se inspirar.

Alguns navegadores contam com extensões que permitem selecionar cores do conteúdo e isso pode te ajudar a testar até encontrar a cor ideal.

Crie uma paleta de cores

Algumas soluções online também podem lhe ajudar a construir uma paleta de cores. Depois de definir a cor base, a paleta será essencial para que você consiga estruturar o restante do site, pensando em cores que conversam entre si. Depois de defini-las, trabalhe sempre com um número menor de tonalidades para não poluir o layout do site.

Agora que você já sabe como usar as propriedades de cores e como escolher as cores certas para o site que está construindo, já pode começar a aplicar as cores nas tags HTML. 

Para tornar esse trabalho mais fácil, criamos uma tabela de cores HTML, com os nomes, os códigos e as cores. Assim, você pode usá-la como base. Veja abaixo!

Tabela de cores HTML: confira os nomes, os códigos e as cores

O que é tabela de cores HTML?

Tabela de cores é uma referência com os códigos que são usados em HTML para formar cores e criar imagens, designs e outros elementos digitais na web.

Como utilizar a tabela de cores?

Confira a lista com o nome das cores em inglês e nas colunas ao lado, verifique qual é o código hexadecimal ou o código RGB para incluir em seu código HTML.

Curtiu este conteúdo? Ele foi útil? Então, compartilhe nas suas redes sociais para que outras pessoas também conheçam essas dicas!

Resumindo