Tabela de cores HTML: códigos HEX, RGB e conversor de cores

Durante o desenvolvimento de um website, existem diversos fatores que interferem diretamente na qualidade dele 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 o 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 permitem 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 a 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!

Conversor de cores HTML e verificador de contraste

Escolha uma cor no seletor, digite o código em qualquer formato — HEX, RGB, HSL ou o nome em inglês — ou clique numa das 148 cores com nome do CSS. A ferramenta mostra os três códigos, testa se o texto fica legível sobre o fundo e gera o código pronto para colar na tag.

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 à do terminal, com fundo preto e fonte branca ou verde, em que a navegação era feita por meio do teclado. Um ótimo exemplo disso é o The Gopher Project.

Em 1989, o britânico Tim Berners-Lee dava início 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 ao 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á a cor final. Os RGB são declarados 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 em 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 expressos em graus. O valor de saturação é medido em porcentagem, sendo 0% um tom de cinza, sem cor, e 100% a cor mais viva possível. 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>

Funciona, mas teste no verificador de contraste: azul sobre vermelho tem contraste de 2,14 : 1 — muito abaixo do mínimo de 4,5 para ser lido com conforto.

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 <style> e </style>, podemos inserir um código CSS dentro dela, ou podemos também aplicar um estilo externo. Dessa forma, fica muito mais fácil 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

Para converter códigos, testar o contraste e gerar o código pronto, use o conversor no início deste artigo. Vale a pena utilizar algumas paletas de cores; veja abaixo algumas sugestões:

• Material UI Colors: Neste site é possível encontrar as cores padrão mais utilizadas no Material Design. São 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 ferramenta pertence à Adobe, é muito útil para gerar combinações de cores. Ao clicar em uma cor, ela já seleciona as cores que se enquadram nela. Vale muito a pena 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.