Introdução ao nome da cor em HTML

O nome da cor em HTML desempenha um papel muito importante no processo de criação da web e do aplicativo. Ajuda a alterar a aparência do nosso site ou aplicativo. Além disso, torna nosso aplicativo mais atraente e interativo. Existem várias maneiras de definir o Nome da cor no HTML no formato de codificação HTML. pode-se usar propriedades CSS adicionais para usá-lo de forma mais eficaz. Podemos usar o nome da cor HTML no nível da página, incluindo-o na parte do corpo, também capaz de definir a cor individual para o elemento específico. O nome da cor em HTML é usado propositadamente para a cor do texto, cor do plano de fundo, cor da borda, sombras, gradientes e muito mais.

Sintaxe

  • Existem várias maneiras de usar cores HTML. Vamos ver um por um.
  • O uso muito básico da cor HTML é aplicá-la ao texto. basta usar como cor do texto para mostrar texto em diferentes cores HTML.

1. Sintaxe da cor do texto

color : color_name;

Vamos ver como essa sintaxe funcionará,

Welcome to EDUBCA

No exemplo acima, ele mostrará o texto Bem-vindo ao EDUBCA em uma cor azul como:

  • Com a ajuda das cores HTML, também é possível adicioná-las como cor de fundo.

2. Sintaxe da cor de fundo

background-color:color_name;

Vamos ver como essa sintaxe funcionará,

A categoria abriga todas as informações de Design espalhadas por várias subcategorias no curso de Design.

  • Também é possível adicionar uma borda colorida em torno de qualquer texto ou elemento usando a cor HTML, usando a seguinte sintaxe:

3. Cor da borda Sintaxe: borda

value color_name;

Vamos ver como essa sintaxe funcionará,

EDUCBA free certification course

Tipos do nome da cor em HTML

Existem diferentes maneiras de definir os nomes das cores em HTML. É difícil lembrar um nome diferente em cores diferentes. Portanto, deve-se decidir atribuir alguns valores a cores diferentes. Vamos ver um por um

1. Valor RGB

  • É uma das maneiras de definir nomes de cores HTML na combinação dos valores de formato de cores Vermelho, Verde e Azul. Qual é usado para definir a intensidade da cor entre o número de 0 a 255?
  • Suponha que desejemos definir uma cor preta usando a combinação RGB, e ela gostará de RGB (0, 0, 0). Aqui todos os parâmetros de cor serão definidos como 0. Portanto, ele exibirá uma cor preta.
  • Como outro RGB (0, 0, 255), a cor azul será exibida, pois 255 é definido como o valor mais alto para azul e o outro é 0.
  • Se formos obter 3 valores iguais de RGB, ele gerará tons de cinza.

Exemplo: RGB (0, 0, 0) para a cor mais escura, onde RGB (255.255.255) para a cor mais clara.

2. Valor HEX

  • É o formato mais usado de um nome de cor em HTML no qual o nome da cor será definido no formato de um valor hexadecimal.
  • O formato #rrggbb inclui valores de RR para vermelho, gg para verde e bb para azul são colocados entre 00 toff de valor hexadecimal.
  • Vamos considerar um exemplo que define a cor # 00ff00. portanto, esses valores serão gerados em verde por causa do verde que contém o valor mais alto (ff) em que o outro deve ser definido como 00.

3. Valor HSL

  • Outro formato para definir a cor HTML na forma de Matiz, Saturação, Luminosidade.
  • Agora veremos todos os termos um por um. Matiz é definido como o grau de cor entre 0 e 360. em que 0 para vermelho, 120 para verde e 240 para azul.
  • A saturação define o valor da cor na porcentagem, na qual 0% diz que o tom de cinza é 100% para a cor total.
  • A luminosidade também funciona como a porcentagem que define 0% para preto, 50% não é clara nem escura, onde 100% é branco.

4. valor RGBA

  • Esse tipo de cor HTML define a extensão da cor RGB, incluindo o valor alfa. Onde alfa é usado para definir a opacidade da cor.
  • O valor alfa varia entre 0, 0 (totalmente transparente) a 1, 0 (nem um pouco transparente)
  • Exemplo é rgba (255, 99, 71, 0)

5. Valor HSLA

  • Funciona da mesma forma que o valor das cores HSL, além do valor alfa, para definir a opacidade da cor.
  • hsla (8.100%, 80%, 0) para cores totalmente transparentes.
  • hsla (8.100%, 80%, 0.9) para cores não muito transparentes.

Exemplos de nome de cor em HTML

Vamos ver como o nome da cor em HTML é usado com a ajuda de alguns exemplos mencionados abaixo:

Exemplo 1

Vamos considerar um exemplo geral que mostra como o nome da cor de exemplo em HTML será usado:

Código HTML:



About Life…..
Creativity Is Intelligence Having Fun



About Life…..
Creativity Is Intelligence Having Fun



About Life…..
Creativity Is Intelligence Having Fun



About Life…..
Creativity Is Intelligence Having Fun



About Life…..
Creativity Is Intelligence Having Fun

Você aprende mais com o fracasso do que com sucesso. Não deixe isso parar você. Falha cria caráter. Se você está trabalhando em algo com o qual realmente se importa, não precisa ser pressionado. A visão puxa você

Resultado:

Exemplo 2

Agora, estamos tomando outro exemplo que definirá todos os tipos de cores HTML da seguinte maneira:

Código HTML:



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade

Resultado:

No exemplo acima, podemos ver o uso de diferentes tipos de cores HTML e como eles são nomeados em HTML.

Exemplo 3

Mais um uso da cor HTML é definir uma borda para o elemento, que é o seguinte:

No exemplo, aqui podemos adicionar uma borda ao corpo do código, alterando também o plano de fundo e a cor do texto.

Código HTML:

A teoria de auto-atualização fala de recompensas intrínsecas inerentes ao desempenho da tarefa, como satisfação no trabalho, sentimento de conquista, etc.

Resultado:

Conclusão

Descobrimos que as cores HTML são definidas com nomes diferentes, valor percentual, valor hexadecimal, valor alfa e muito mais. O nome da cor em HTML é usado para colorir o texto, o plano de fundo, a borda e as gradações. Existem diferentes tipos para definir o nome da cor HTML como RGB, hex, hsl, rgba, hsla.

Artigos recomendados

Este é um guia para o Nome da cor em HTML. Aqui discutimos a introdução Tipos do nome da cor em HTML, juntamente com exemplos, sintaxe e códigos HTML. Você também pode consultar nossos outros artigos sugeridos para saber mais -

  1. Atributo de estilo HTML
  2. Tags de tabela HTML
  3. Link de imagem em HTML
  4. Criar tabelas em HTML
  5. Eventos HTML

Categoria:

Ferramentas de Desenvolvimento Web