As cores desempenham um papel vital na transmissão de informações não verbais. Um site com cores interativas é considerado atraente e visualmente atraente. Existem diferentes métodos para aplicar cores aos elementos HTML: RGB, RGBA, HEX Code, HSLA e HSL. No entanto, você pode encontrar códigos de cores inspecionando a página, selecionando cores no seletor de cores ou usando o recurso de conta-gotas no painel de ferramentas do desenvolvedor.
Neste estudo, discutiremos os métodos para encontrar o código de cores em HTML
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 a opção “ Inspecionar ” opção do menu, que fornecerá acesso ao “ Ferramentas de desenvolvimento ” painel:
Como resultado, o “ elementos ” será exibida na parte inferior do navegador:
Etapa 3: ajustar o local do painel da ferramenta do desenvolvedor
Ao clicar nos três pontos do canto, você pode selecionar o posicionamento do painel. Por exemplo, selecionamos o ícone destacado em verde. Além disso, a janela de inspeção pode ser redimensionada arrastando seus cantos:
Etapa 4: Selecione o elemento para inspecionar
Em seguida, clique no ícone destacado para selecionar o elemento que deseja inspecionar:
Etapa 5: escolha o elemento
Passe o mouse sobre 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 conforme mostrado pela caixa destacada em verde:
Etapa 6: escolha a cor no seletor de cores
Copie o código de cores da janela do seletor de cores aberta:
A imagem abaixo indica que também podemos selecionar cores clicando nas pequenas caixas coloridas destacadas pela cor vermelha. Considerando que 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 conta-gotas
O recurso 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 em qualquer lugar da janela exibida.
Observação: O recurso Conta-gotas é representado pela caixa destacada em vermelho na imagem abaixo:
Aqui está uma demonstração do funcionamento da ferramenta Conta-gotas:
Depois de selecionar a cor do seu elemento, copie o código da cor e cole no CSS do seu projeto.
Conclusão
Existem diferentes métodos para aplicar cores aos elementos HTML: RGB, RGBA, HEX Code, HSLA e HSL. Você pode encontrar códigos de cores por “ inspecionando ” qualquer página da web ou selecionando cores no “ seletor de cores ” e usando o “ Conta-gotas ' funcionalidade. Este artigo demonstrou o procedimento para localizar códigos de cores em HTML com exemplos detalhados.