Cores HTML | RGB, Hex, HSL explicou

As cores HTML aprimoram a aparência da página da web. Nas cores HTML, podem ser especificadas para qualquer elemento usando o atributo de estilo. Quando falamos sobre cores HTML, o “cor" e "cor de fundo”As propriedades são usadas com bastante frequência no atributo de estilo HTML para definir a cor do texto e da cor de fundo de um elemento HTML.

Este artigo demonstrará como adicionar cores a um elemento/documento HTML. Ele fornecerá uma visão geral de convenções básicas de cores como "nomes de cores", "valores de RGB", "valores hexadecimais" etc. Então vamos começar!

Nomes de cores html

A primeira maneira de implementar as cores HTML é simplesmente usar o nome da cor i.e. Palavras em inglês para a cor como verde, amarelo, vermelho, etc. HTML suporta mais de cem nomes de cores padrão.

Exemplo

Suponha que tenhamos um parágrafo em nosso HTML:

Um parágrafo

Para dar uma cor, digamos verde, podemos fazer isso:

Um parágrafo

Cor hexadecimal html

HTML suporta outra maneira de adicionar cores eu.e. os valores hexadecimais. Os valores hexadecimais podem ser escritos usando dezesseis dígitos 0-9 e A-F. É determinado por um “#”Símbolo seguido por três ou seis dígitos. Por exemplo: #Rrggbb. Aqui, os dois primeiros slots representam vermelho, os dois slots adjacentes mostram verde, e os dois últimos mostram o valor azul.

Exemplo

Suponha que tenhamos um parágrafo em nosso HTML:

Um parágrafo

Desta vez, tentaremos definir a cor de fundo de

Tag para cinza usando valores hexadecimais e podemos fazer isso usando o seguinte código HTML:

Um parágrafo

No código acima, "#e3e3e3" é o código hexadecimal de cor cinza.

Os valores hexadecimais podem ser escritos usando apenas três dígitos em vez de seis dígitos. Por exemplo, o valor hexadecimal #f00 produzirá a mesma cor que #FF0000.

Cores HTML RGB

Outro método usado com mais frequência para cores são os valores de RGB. São necessários três valores i.e. vermelho, verde e azul. Em vez de usar os números estranhos hexadecimais, a propriedade RGB utiliza números de 0 a 255. Esses números determinam a intensidade de cada parâmetro de cor, por exemplo, para utilizar a cor preta definir todos os parâmetros para 0 i.e. RGB (0, 0, 0). O RGB (0, 0, 255) exibirá a cor azul e assim por diante.

Exemplo

Vamos considerar o mesmo parágrafo:

Um parágrafo

Agora, tentaremos definir sua cor de fundo para laranja usando valores RGB e podemos fazer isso usando o seguinte código HTML:

Um parágrafo

No código acima, “RGB (255, 165, 0)” são os valores de RGB para a cor laranja.

Cores HTML RGBA

Os valores de RGBA são uma extensão dos valores de cores RGB em que “A”Representa o canal alfa que especifica a opacidade para uma cor. Um parâmetro alfa é um número entre 0 (transparente) e 1 (opaco).

Exemplo

Este exemplo mostra como o parâmetro alfa “A”Será especificado:

Um parágrafo

O código acima foi implementado o parâmetro alfa em

elemento. Agora, o resultado estará de acordo com a quantidade de transparência, conforme mostrado na seguinte saída:

Cores HTML HSL

Html fornece outra convenção de cores i.E hsl determina uma cor com seu tom, saturação e luz. Opcionalmente, ele pode ter um parâmetro alfa também.

• O termo tono determina um anjo dentro da roda de cores e.g. 0 ou 360 graus representa a cor vermelha, da mesma forma, as cores restantes são separadas ao redor do círculo. Por exemplo, verde é igual a 120 graus, ciano é igual a 180 graus e assim por diante.
• Enquanto o segundo valor em HSL é a saturação que determina a intensidade da cor e é representada por um % de sinal.
• O terceiro valor é a leveza que determina os níveis de leveza representados pelo % de sinal.

Por exemplo, cem por cento significa luz completa eu.e. branco enquanto zero por cento significa sem luz eu.e. preto e assim por diante.

Exemplo

O script abaixo dado implementará a convenção de cores HSL em diferentes elementos HTML:

Um parágrafo

Teremos a seguinte saída para o código acima:

Conclusão

HTML fornece várias convenções de cores para definir a cor do texto, a cor de fundo, etc. Existem quatro maneiras de colorir um elemento HTML: nome de cor, valores de RGB, valores hexadecimais e valores HSL. Para definir a cor usando "Nome da cor", especifique o nome da cor i.e. vermelho verde. Para RGB, combine valores de cores vermelhos, verdes e azuis entre 0 e 255. Para cor hexadecimal, escreva três ou seis dígitos Código de cores. Para HSL, defina os valores de matiz, saturação e luz.