HTML permite que os desenvolvedores da web usem cores diferentes nas páginas da web para torná -las atraentes. As cores são uma ferramenta essencial para criar uma aparência melhor para o nosso aplicativo. As páginas da web com cores interativas são as mais prováveis ​​e chamam facilmente a atenção do usuário. Também ajuda os usuários a se comunicarem com o aplicativo e a entender a ação. Além disso, o HTML oferece vários métodos para aplicar cores ao conteúdo.

Este guia demonstrará:

• O que são códigos de cores HTML?
• Como aplicar cores em html?
• Método 1: Aplicação de cores em HTML usando valores de código hexadecimal
• Método 2: Aplicação de cores em HTML usando RGB
• Método 3: Aplicação de cores em HTML usando HSL

Vamos começar!

O que são códigos de cores HTML?

Os códigos de cores HTML são os identificadores para aplicar cores na página da web. Os códigos de cores HTML comuns são nomes de teclado, “Código hexadecimal","RGB (vermelho, verde, azul)", e "HSL (matiz, saturação, leveza)”.

Como aplicar cores em html?

No HTML, existem três métodos para aplicar cores a uma página da web usando:

• Valores do código hexadecimal
• Rgb
• Hsl

Discutiremos cada um deles com a ajuda da implementação. Em primeiro lugar, é necessário criar um arquivo html.

Exemplo: Aplicação de cores em HTML usando nomes de cores
No arquivo html, adicione uma div dentro da etiqueta corporal. Defina o nome da classe div como “recipiente”. Crie dois elementos para o cabeçalho e o parágrafo dentro da div:

OLÁ MUNDO!

O parágrafo começa daqui ..

Os elementos HTML adicionados ficarão assim:

Vamos tornar a página da web mais atraente aplicando alguns estilos. Para fazer isso, inclua a tag na seção da cabeça do arquivo HTML. Dentro da tag de estilo, aplique estilos CSS para a div como esta:

O código fornecido acima contém as propriedades CSS para a classe DIV, que estão listadas abaixo:

• ““.recipiente”Representa a classe de div.
• ““cor de fundo”A propriedade é utilizada para aplicar a cor de fundo da div.
• ““Margem: Auto”Aplica margem de todos os lados da div.
• ““Alinhamento de texto: centro”Alinhe o texto no centro da div.
• ““altura" e "largura”Pode ser atribuído de acordo com as preferências do usuário.

Saída

Como podemos ver, o “cor de fundo”A propriedade da div agora é alterada para“cardoDe branco. É assim que aplicamos cores em nossas páginas da web, simplesmente usando nomes de cores. No entanto, para aproveitar diferentes tons de cores, existem três métodos para aplicar cores usando códigos de cores.

Método 1: Aplicação de cores em HTML usando valores de código hexadecimal

““Valores do código hexadecimal”São os valores hexadecimais que podem ser usados ​​para aplicação de cores em HTML.

Sintaxe
Você pode escrever código de cores neste formato:

#rrggbb

Na sintaxe acima mencionada, “rr"É para vermelho,"gg"É para verde e"bb”É para azul.

Dê uma olhada na tabela abaixo, representando a cor e seus valores hexadecimais:

Cor	Valor do código hexadecimal
Vermelho	#FF0000
Azul	#0000FF
Verde	#00FF00
Branco	#ffffff
Preto	#000000

Exemplo
Vamos continuar o mesmo exemplo e alterar a cor da div para vermelho usando um valor de código hexadecimal. Para fazer isso, mude o valor da cor de fundo de “cardo" para "#FF0000" do seguinte modo:

Background-Color: #FF0000;

Pode -se observar que a cor de fundo da div é alterada com sucesso para vermelho:

Método 2: Aplicação de cores em HTML usando o código RGB

““Rgb”É o esquema de cores ou modelo que usa cores primárias vermelhas, verdes e azuis da luz. Valores diferentes dessas cores podem ser adicionados para gerar várias cores.

Sintaxe
O esquema RGB funciona de acordo com a fórmula fornecida:

RGB (vermelho, azul, verde)

Vamos dar uma olhada em algumas cores com seus valores de RGB:

Cores	Código de cores RGB
Vermelho	RGB (255,0,0)
Verde	RGB (0,255,0)
Azul	RGB (0,0,255)
Branco	RGB (255.255.255)
Azul	RGB (0,0,0)

Exemplo
Aqui está a demonstração de mudar a cor de fundo do nosso div para “amarelo”Ao aplicar o código RGB. O "cor de fundo"É definido como"RGB (0,0,255)”, Que é o código de cores amarelo RGB:

cor de fundo: rgb (255, 255, 0);

Depois de atribuir o valor RGB (255.255,0) à propriedade de segundo plano, verifique os resultados abaixo:

Método 3: Aplicação de cores em HTML usando HSL

No HTML, as cores também podem ser definidas usando “Hsl” Hue, SAturação e euioteza. Para esse fim, é necessário utilizar o método de código de cores HSL.

Sintaxe
O formato do método de cor HSL () é citado abaixo:

HSL (matiz, saturação, leveza)

Na roda de cores RGB, cada cor indica um ângulo e um valor percentual para os fatores listados abaixo:

• Matiz: É usado para representar o grau, 0 a 360 na roda de cores RGB.
• Saturação: É o valor percentual, onde 0% significa um tom de cinza e 100% é a cor inteira.
• Leveza: É o valor percentual, onde 0% indica preto e 100% é para branco.

Exemplo
Vamos mudar o acima mencionado “div”Cor a um tom de verde tendo um tom“de 106“Graus, saturação“ de 73%”E leveza“ de 58%”:

cor de fundo: HSL (106, 73%, 58%);

O resultado está apresentado abaixo:

Aqui você vai! Você aprendeu os três métodos para aplicar cores em html.

Conclusão

Os códigos de cores HTML são identificadores para aplicar cores diferentes. Além de usar apenas o nome de cor, o HTML nos permite utilizar três métodos: valores de código hexadecimal, cores RGB e HSL. Você pode utilizar essas cores em qualquer elemento HTML definindo os valores desses códigos. Este artigo demonstrou os métodos para aplicar cores em html.