Tabela de cores HTML: aplicando cores nas tags HTML

Durante o desenvolvimento de um website, existem diversos fatores que interferem diretamente na qualidade do mesmo, e em como o usuário receberá as informações do conteúdo. Uma das coisas mais importantes para a criação de um layout é a escolha certa das cores a utilizar. Por esta razão, ter à mão ferramentas que facilitem no processo como uma tabela de cores HTML  é essencial.

Através das linhas de código HTML e CSS, podemos aplicar cores tanto para fontes como para seus elementos. Podemos até mesmo aplicar cores às bordas ou sombreamentos. São muitas possibilidades que nos permite criar layouts mais complexos e com diversas características.

Com os diversos tipos de display, grids, flexbox, floats, é possível criar inúmeras possibilidades visuais só utilizando o HTML e CSS, assim como aplicar diversos backgrounds, animações e até mesmo vetores.

Assim, é importante entender quais são os padrões de cores que o HTML suporta, e como são formados. Após compreender esse tema, você poderá então começar aplicar as cores através do estilos em HTML e CSS.  Para tanto, disponibilizamos uma tabela de cores HTML, com os nomes das cores, o código hexadecimal e o valor RGB prontos para usar diretamente no seu estilo!

Tópicos deste artigo:

• Tabela de cores HTML
• Breve história do HTML
• As cores no HTML (hexadecimal, RGB, RGBA, HSL e HSLA)
• Aplicando cores nos elementos HTML
• Modificando as cores com inline das tags HTML
• Modificando as cores através de uma folha de estilos CSS
• Ferramentas para utilizar em conjunto com a tabela de cores HTML

Tabela de cores HTML

Na tabela de cores HTML, você poderá encontrar diversos exemplos de cores com seu código hexadecimal, assim como o nome em inglês e o código RGB, já prontos para copiar diretamente para o seu código HTML/CSS:

Já imaginou como seria um website apenas com cores preto e branco e sem a inserção de multimídia?

Antes do surgimento do protocolo HTTP e da linguagem HTML, a navegação de sites era apresentada através de uma tela similar ao do terminal, com fundo preto e fonte branca ou verde, onde a navegação era através do teclado. Um ótimo exemplo disso é o The Gopher Project.

Em 1989 o britânico Tim Berners-Lee dava ínicio a um projeto que mais tarde seria conhecido como HyperText Markup Language, o HTML, a principal linguagem quando o assunto é desenvolvimento web. Em 1991 surge o primeiro website, que ainda está online.

Com o HTML, passou a ser possível a inserção de multimídia e uma melhor manipulação de fontes, cores e posicionamento de elementos. Por consequência, conforme foram lançando novas versões, o HTML foi recebendo novas funcionalidades, até chegar no que conhecemos hoje, o HTML5.

As cores no HTML e CSS

No HTML e CSS, as cores podem ser definidas através de seu nome (em inglês), através do código hexadecimal, ou através do seu valor RGB. Com as novas versões do CSS, é possível também utilizar os valores RGBA, HSL e HSLA. Esses valores são intensidades de cores ou propriedades (como saturação e opacidade) que juntos formam uma outra cor.

Então, após compreender como as cores funcionam, é interessante estar sempre com a tabela de cores HTML com fácil acesso para consultar sempre que precisar.

Cores Hexadecimais

O código Hexadecimal para cores consiste em seis letras ou números precedidos do “#”. Os dois primeiros elementos representam a intensidade de vermelho, o terceiro e quarto elementos representam a intensidade de verde e os dois últimos a intensidade de azul. Desta forma, o resultado final será a combinação dessas três cores em diferentes intensidades, formando a cor desejada. Os valores variam entre 00 (mais escuro) até FF (mais claro). Por exemplo, temos o código #FFFFFF, que representa a cor branca, pois tem a intensidade máxima das três cores. Do mesmo modo, #FF0000 representa a cor vermelha, com intensidade máxima de vermelho e nenhuma intensidade para verde e azul. Na tabela de cores HTML, é possível encontrar mais de 100 códigos hexadecimais das cores mais utilizadas.

RGB

Do mesmo modo, valor RGB significa Red, Green, Blue (vermelho, verde, azul) e sua teoria é a mesma, a intensidade dessas três cores formarão a cor final. Os RGB é declarado com três valores com escala entre 0 e 255. Dessa forma temos o código rgb(255,255,255) para a cor branca, rgb(255,0,0) para a cor vermelha e rgb(0,0,0) para a cor preta. Na tabela de cores HTML, é possível encontrar mais de 100 valores RGB das cores mais utilizadas.

RGBA

No sistema RGBA, é utilizado o mesmo código do sistema RGB porém acrescenta-se um novo valor, o Alpha. O valor alpha significa a opacidade da cor, que varia de uma escala entre decimais de 0.0(transparente) e 1.0 (opaco). É muito utilizado para a sobreposição de elementos, sem perder a visibilidade do elemento inferior, dando a sensação de transparência. Por exemplo: para a cor preta com 50% de opacidade, utilizamos o rgba(0,0,0,0.5).

HSL

Diferentemente, o sistema HSL representa Hue (tom), Saturation (saturação) e Lightness (luminosidade). O valor do tom é medido em ângulos expresso em graus. O valor de saturação é medido em porcentagem, sendo 0% um leve sombreado de saturação e 100% uma saturação total da cor. O valor de luminosidade também é expresso em porcentagem. Por exemplo: um valor igual a 100% resulta em cor branca e 0 em cor preta, sendo 50% o valor mais usual.

HSLA

Assim como no RGBA, no sistema HSLA segue o mesmo padrão do HSL, acrescentando o valor Alpha, que representa a opacidade. Também varia numa escala entre 0.0 e 1.0.

Aplicando cores nos elementos HTML

No HTML, podemos customizar as cores nos elementos através do seu estilo, podendo ser feito na própria tag, com a utilização da propriedade style ou através de uma folha de estilo, seja ela interna ou externa. Após a leitura, realize testes práticos, utilize a tabela de cores HTML do início deste artigo e aplique em seus elementos.

Modificando as cores inline das tags HTML

Para modificar o estilo de um elemento inline, basta acrescentar dentro da tag do elemento o atributo style e assim realizar as modificações.

Por exemplo: se tivermos um elemento p e queremos alterar sua fonte para a cor azul, bastaria utilizar o código:

<p style=”color:blue”>Azul</p>

Como resultado, teremos:

Azul

Mas e se quisermos modificar também o background do elemento? Então podemos utilizar a propriedade background-color para isso!

Dessa forma, vamos aplicar ao nosso elemento p um fundo vermelho:

<p style=”color: blue; background-color: red”>Azul</p>

Como resultado, teremos:

Azul

Fácil, não é?

Escolha algumas cores, através da tabela de cores HTML, e pratique!

Modificando as cores através de uma folha de estilos CSS

Através das tags <script></script>, podemos inserir um código CSS dentro dela, ou podemos também aplicar um estilo externo. Dessa forma, fica muito mais fácil para alterar os estilos dos elementos.

Por exemplo, vejamos a seguinte estrutura em HTML:

<body>
    <p>Olá mundo</p>
    <p>Olá mundo</p>
    <p class="vermelho">Eu sou vermelho</p>
    <p class="azul">Eu sou Azul</p>
    <p class="bgciano">Eu tenho um Background ciano!</p>
</body>

Como resultado inicial, teremos:

Olá mundo

Olá mundo

Eu sou vermelho

Eu sou Azul

Eu tenho um Background ciano!

Repare que nada aconteceu, pois ainda não aplicamos nenhum estilo. Mas se quisermos aplicar a cor púrpura a todos os elementos p, basta utilizar o CSS:

p{ 
    color: #ff00ff; 
}

O resultado será:

Olá mundo

Olá mundo

Eu sou vermelho

Eu sou Azul

Eu tenho um Background ciano!

Aplicando agora o estilo para as classes, teremos um novo resultado.

p{
  color: #FF00FF; 
}
p.vermelho{
  color:red;
} 
.azul{
  color:rgb(0,0,255);
}
.bgciano{
  background-color: #00FFFF;
}

Olá mundo

Olá mundo

Eu sou vermelho

Eu sou Azul

Eu tenho um Background ciano!

Da mesma forma, você também pode aplicar essa técnica para diversos elementos e propriedades, gerando cores para os textos e background do seu site. Contudo, para criar um layout bonito, é importante entender como as cores funcionam e interagem entre si. Mas se você não puder se aprofundar no estudo da Teoria das Cores, há ferramentas que podem auxiliar.

Ferramentas para utilizar em conjunto com a tabela de Cores HTML e CSS

Vale a pena utilizar algumas paletas de cores, veja abaixo algumas sugestões:

• Material UI Colors: Neste site é possível encontrar as cores padrões mais utilizadas no Material Design, são cores vibrantes porém sofisticadas e modernas, muito utilizadas para produção de websites hoje em dia. Ao clicar em cima da cor, a ferramenta já copia o código hexadecimal automaticamente para você, podendo colar diretamente no arquivo HTML e CSS! Vale a pena dar uma olhada;
• Color Hunt: Neste Site, é possível encontrar diversas paletas de cores, feitas tanto por profissionais como por amadores, você pode selecionar as que mais te agradem e utilizar;
• Adobe Color: Esta ferramente pertence a Adobe, é muito útil para gerar combinações de cores, ao clicar em uma cor, ela já seleciona as cores que se enquadram na mesma, vale muito apena utilizar essa ferramenta!

Após escolher as cores com a ajuda das ferramentas acima, você pode utilizar a nossa tabela de cores HTML para copiar o código hexadecimal, nome ou valores RGB diretamente para seu código.