Para quem está começando a criar um site, a escolha das cores é um ponto importante a ser pensado com muito cuidado. Se você está utilizando o WordPress para criar um site, pode ser bem simples aplicar cores.
Mas quando você desenvolve uma página em HTML é preciso saiba como aplicar cores em HTML e CSS.
Aprender o que é HTML e entender um pouco sobre essa linguagem irá proporcionar uma visão abrangente na hora de criar seu site e configurar sua hospedagem de sites.
A história do HTML
O HTML foi criado como uma base para toda a rede mundial de computadores da forma como a conhecemos. Ele foi desenvolvido pelo pai da internet Tim Berners-Lee como parte do seu projeto para a World Wide Web.
Classificação de cores no HTML
Tanto na linguagem HTML, como no CSS as cores podem ser definidas através de comandos. Estes comandos podem ser os seus nomes em inglês, um valor em RGB ou um código hexadecimal.
Confuso sobre o que tudo isso significa? Calma, logo abaixo nós vamos explicar exatamente o que são esses códigos.
.webp)
Hexadecimal
Começando pelo código hexadecimal. Esse código consiste em seis caracteres que podem ser letras e números antecedidos pelo ícone de cerquilha ou hashtag (#).
Cada um dos caracteres do código diz respeito a intensidade de uma cor no espectro RGB. Sendo os dois primeiros referentes ao vermelho (red), o terceiro e quarto referentes ao verde e os dois últimos referente ao azul.
Essa intensidade é medida numa escala que vai de 00 até FF. Sendo 00 o tom mais escuro possível e FF o mais claro.
Existem mais de uma centena desses códigos. Por essa razão desenvolvedores utilizam uma tabela de cores HTML na hora de criar códigos com cores em hexadecimal.
Ao longo do tempo, as cores mais utilizadas acabam sendo memorizadas e torna-se mais intuitivo a formação das fores por meio do código.
RGB
Assim como o código hexadecimal, o RGB também utiliza as cores vermelho, verde e azul em diferentes intensidades para criar outras cores.
A principal diferença aqui se dá pela escala utilizada que utiliza uma numeração crescente de 0 a 255. Sendo 0 a total ausência da cor e 255 a intensidade máxima.
Dessa forma podemos dizer o código rgb (0,0,0) é equivalente a preto pois possui as três cores zeradas e sem intensidade e rgb (255,255,255) é o branco, pois possui todas as cores na intensidade máxima.
E assim por diante: rgb (255,000,00) seria o vermelho, rgb (000,255,00) seria o verde e rgb (000,000,255) seria o azul.
RGBA
Um método criado como uma evolução ao RBG, o RGBA acrescenta o elemento Alpha as cores utilizadas. Sendo que Alpha se refere a opacidade das cores.
Diferente da escala de RGB, o valor de Alpha é medido em uma escala menor que vai de 0.0 a 1.0. Sendo 0.0 transparente e 1.0 opaco.
Esse elemento permite criar sobreposições, máscaras e efeitos interessantes na sua página HTML.
Como por exemplo, na sobreposição de rótulos e áreas de transparência sobre elementos do site, criando um visual mais dinâmico e limpo.
HSL
Agora vamos mudar completamente a abordagem as cores em HTML e deixar de lado o sistema RGB um pouco.
O sistema HSL não utiliza nenhuma das cores como base. Ele de certa forma decompõe as cores em Tom (Hue), Saturação (Saturation) e Luminosidade (Lightness).
Cada um desses valores possui uma métrica. E diferentes medidas dos três combinados produzem as cores.
O tom é médio como um ângulo, por isso é dado em graus. A saturação é medida níveis de porcentagem. Sendo 0% ausência de sombreado de saturação e 100% é a saturação total da cor.
Por fim a luminosidade também é medida em porcentagem, sendo 100% uma cor com iluminação máxima, geralmente branca.
HSLA
Assim como no caso do RGBA, o atributo Alpha é adicionado a este código para representar a opacidade em valor de 0.0 a 1.0.
Cores aplicadas em elementos HTML
É possível customizar as cores em HTML por meio da propriedade style das próprias tags, ou por meio de uma folha de estilos do CSS.
Em geral, o utilizado é a segunda opção devido a praticidade na hora de editar. Abaixo nós explicamos como alterar cores em HTML por meio do inline das tags e pelo CSS, veja só:
Como modificar as cores com inline das tags HTML
O que significa alterar inline? A expressão que significa na tradução literal “na mesma linha” consiste em utilizar a propriedade style para alterar propriedade de estilo “na mesma linha” do elemento.
Ou seja, dentro da mesma tag.
Com a propriedade style podemos editar a cor da fonte. Basta criar a tag normalmente e acrescentar o a propriedade style seguido do símbolo de igual (=) com o nome da cor em inglês. Veja no exemplo:
<p style=” color: red;”>Texto</p>
Dessa forma teremos a seguinte exibição:
<p style=” color: red;”>Texto</p>
É possível ainda acrescentar uma cor de fundo com a propriedade background.
<p style=” color: red; background-color: black”>Texto</p>
Muito simples, mas trabalhoso de ser aplicado tag a tag. Agora vamos ver o CSS.
Como modificar as cores pelo CSS
O CSS irá utilizar uma tag chamada scripts (<script></script) para facilitar a alteração de estilos dentro do documento HTML.
A partir do CSS é possível criar uma codificação que permita marcar várias tags simultaneamente, utilizando uma propriedade chamada de classe (class).
Utilizando uma linha de comando, o CSS pode alterar todas as tags <p> para a mesma cor. Em seguida é possível configurar as cores de cada classe definindo o nome da classe e a cor correspondente. Veja no exemplo abaixo.
Conclusão
Como vimos, aplicar cores em HTML ou CSS não é um processo tão difícil assim. Porém, é preciso de possuir prática e estudo para utilizar esses conhecimentos na hora de criar um site.
Se você tem um projeto para a internet, continue aprendendo sobre HTML e CSS e verifique um bom plano de hospedagem de sites para destacar seu site da concorrência. Lembre-se que quanto mais profissional for o seu projeto, melhor deve ser sua hospedagem.
Gostou de nosso post? Compartilhe:
