Como encontrar um código de cores em html

As cores desempenham um papel vital na transmissão de informações não verbalmente. Um site com cores interativas é considerado atraente e visualmente atraente. Existem diferentes métodos para aplicar cores para os elementos HTML: RGB, RGBA, Código Hex, HSLA e HSL. No entanto, você pode encontrar códigos de cores inspecionando a página, selecionando cores do seletor de cores ou usando o recurso de conta -gotas do colírio do painel de ferramentas de desenvolvedores.

Neste estudo, discutiremos os métodos para encontrar código de cores em HTML

• Inspecionando a página
• Usando o recurso de conta -gotas

Método 1: Encontre um código de cores em HTML inspecionando a página da web

A seguir estão as etapas para encontrar o código de cores inspecionando a página.

Etapa 1: Abra a página da web

Primeiro, abra a página da web necessária:

Etapa 2: Selecione a opção Inspecionar

Clique com o botão direito do mouse na página e selecione o “Inspecionar”Opção do menu, que fornecerá acesso ao“Ferramentas de desenvolvimentoPainel:

Como resultado, o “Elementos”A guia será exibida na parte inferior do navegador:

Etapa 3: Ajuste o local do painel de ferramentas do desenvolvedor

Ao clicar nos três pontos do canto, você pode selecionar a colocação do painel. Por exemplo, selecionamos o ícone destacado verde. Além disso, a janela Inspecion pode ser redimensionada arrastando seus cantos:

Etapa 4: selecione elemento para inspecionar

Em seguida, clique no ícone destacado para selecionar o elemento que você deseja inspecionar:

Etapa 5: Escolha o elemento

Passe o elemento cujo código de cores precisa ser encontrado e clique nele. Como resultado, o “Estilos”A guia abre e exibe as propriedades de estilo do elemento selecionado, de onde você deve selecionar a cor, como mostrado pela caixa destacada verde:

Etapa 6: Escolha a cor do seletor de cores

Copie o código de cores da janela aberta do seletor de cores:

A imagem abaixo indica que também podemos selecionar cores clicando nas pequenas caixas de cores destacadas pela cor vermelha. Enquanto a caixa amarela representa um ponteiro que é alterado gradualmente para ver a cor do elemento selecionado:

Etapa 7: ajuste a opacidade da cor

Você também pode ajustar a opacidade da cor, conforme demonstrado no GIF abaixo:

Método 2: Encontre um código de cores em HTML usando o recurso de conta -gotas

O recurso de conta -gotas também pode ser utilizado para escolher qualquer cor na página da web. Esse recurso é muito útil, pois pode selecionar uma cor de qualquer lugar na janela exibida.

Observação: O recurso de conta -gotas é representado pela caixa destacada vermelha na imagem abaixo:

Aqui está uma demonstração do funcionamento da ferramenta de conta -gotas:

Depois de selecionar a cor do seu elemento, copie o código de cores e cole -o no CSS do seu projeto.

Conclusão

Existem diferentes métodos para aplicar cores para os elementos HTML: RGB, RGBA, Código Hex, HSLA e HSL. Você pode encontrar códigos de cores por “Inspecionar“Qualquer página da web ou selecionando cores do“seletor de cores”E usando o“Conta-gotas" recurso. Este artigo demonstrou o procedimento para encontrar códigos de cores em HTML com exemplos detalhados.