Tutorial: Como usar cores HTML
Em HTML, as cores são usadas para personalizar planos de fundo, textos e bordas, permitindo um design mais atrativo e uma melhor legibilidade. Existem três formas principais para definir cores no código: nomes de cores, códigos hexadecimais e valores RGB.
O que são cores HTML?
Cores HTML são usadas para definir a coloração aplicada a determinados elementos em um documento HTML. Por meio de configurações simples no corpo do documento usando a tag style, você consegue personalizar o plano de fundo, as bordas e os textos em documentos HTML como quiser.
- Fique online com 99,99% de tempo de atividade e segurança robusta
- Aumente o desempenho com um clique à medida que o tráfego cresce
- Inclui domínio gratuito, SSL, e-mail e suporte 24 horas por dia, 7 dias por semana
Quais métodos existem para definir cores HTML?
Existem três métodos diferentes para definir uma cor HTML. Nas seções a seguir, conheceremos o que distingue essas variantes.
Nomes de cores
O HTML suporta 140 nomes de cores reconhecidos pelos navegadores, que podem ser armazenados pelo próprio código. Além de valores padrão, como “blue” (para azul), “gray” (cinza), “red” (vermelho), “orange” (amarelo), “black” (preto) e “White” (branco), variantes mais específicas, como “Chocolate” (tom de marrom), “Cornsilk” (tom de amarelo) e “DarkSeaGreen” (tom de verde), também estão disponíveis.
Neste artigo da w3schools, você encontra uma tabela de cores HTML e seus respectivos nomes.
Códigos hexadecimais de cores
Os códigos hexadecimais de cores são compostos por um valor hexadecimal de seis dígitos precedido pelo símbolo #. Os números variam de 0 a 9 e as letras de A a F. Esses valores representam os níveis de vermelho, verde e azul em pares, sendo 00 o valor mais baixo e FF o mais alto.
Por exemplo, a cor azul é representada pelo código hexadecimal #0000FF, enquanto o rosa escuro (“DeepPink”) tem o valor #FF1493. Nas extremidades do espectro, é possível encontrar o preto (#000000) e o branco (#FFFFFF).
Valores RGB
Além dos códigos hexadecimais, é possível usar os valores de cores RGB na marcação de cores para HTML. Eles também são definidos por proporções de vermelho, verde e azul, sendo que a intensidade dos componentes varia entre 0 a 255. Por exemplo, a cor azul é definida pelo código rgb(0, 0, 255), ciano por rgb(0, 255, 255) e rosa escuro por rgb(255, 20, 147).
Como definir as cores HTML: Sintaxe e exemplos
Agora, conheça a sintaxe e as funcionalidades de definição de cores HTML por meio de alguns exemplos práticos que elaboramos.
Trocar a cor do plano de fundo
Se você quer alterar as cores do seu plano de fundo em HTML, precisará usar o atributo style e a propriedade inline background-color em CSS. Sua sintaxe é a seguinte:
<element style="background-color: valor da cor;">No exemplo abaixo, vamos usar nomes de cores para definir as cores de plano de fundo do título e de dois elementos de parágrafo. Vamos atribuir a cor “SteelBlue” (tom de azul) ao título <h2>. Em seguida, mudaremos a cor do plano de fundo do primeiro parágrafo para “SpringGreen” (tom de verde) e do segundo para “Yellow” (amarelo):
<body>
<h2 style="background-color: SteelBlue;">
Cores para HTML
</h2>
<p style="background-color: SpringGreen; padding: 5px;">
Isso é um parágrafo e sua cor de fundo é <b>SpringGreen</b>.
</p>
<p style="background-color: Yellow;">
Isso é outro parágrafo e sua cor de fundo é <b>yellow</b>.
</p>
</body>
Especificar cores de texto
Um método similar é usado para alterar a cor do texto. No entanto, nesse caso, você precisará modificar a propriedade color. Sua sintaxe é a seguinte:
<element style="color: valor da cor;">Neste exemplo, usaremos valores hexadecimais e definiremos a tonalidade de vermelho “Orange Red” (#FF4500) como a cor da fonte do título. Na primeira seção, aplicaremos o tom de azul “Midnight Blue” (#191970) e, na segunda, a cor “Indigo” (#4B0082):
<body>
<h2 style="color: #FF4500;">
Este título tem a cor Orange Red.
</h2>
<p style="color: #191970;">
A cor da fonte deste parágrafo é <b>Midnight Blue</b>. </p>
<p style="color: #4B0082;">
A cor da fonte deste parágrafo é <b>Indigo</b>.</p>
</body>
Especificar as cores das bordas
Você também pode personalizar as bordas de um texto usando cores HTML. você pode especificar a espessura, o estilo (sólido, tracejado, pontilhado) e a cor da borda. Sua sintaxe é a seguinte:
<element style="border: parâmetros adicionais valor da cor;">No exemplo abaixo, usaremos o terceiro método de definição de cores HTML: os valores RGB. Vamos atribuir o valor rgb(178, 34, 34) (“fire red”, um tom de vermelho escuro) à borda do título. Os dois parágrafos terão bordas nas cores rgb(32, 178, 170) (“light green”, um tom de verde claro) e rgb(205, 133, 63) (“Peru”, um tom de marrom).
<body>
<h2 style="border: 2.5px solid rgb(178, 34, 34);">
A borda do título é fire red</h2>
<p style="border: 2.5px dashed rgb(32, 178, 170); padding: 5px;">
Esta borda é light green.
</p>
<p style="border: 2.5px dotted rgb(205, 133, 63); padding: 5px;">
Esta borda tem a cor chamada Peru.
</p>
</body>
- SSL Wildcard grátis para mais segurança
- Registro privado grátis para mais privacidade
- Domain Connect grátis para configurar DNS fácil