CSS color: como utilizar e definir cores no CSS

Como já vimos anteriormente em nosso artigo sobre o CSS, sabemos o poder dessa linguagem na estilização dos sites. Tornar algo visualmente agradável e bonito cativa o usuário, fazendo com que seu site seja sempre acessado e lembrado. 

O que é a css color?

Para mantermos um design atraente e chamativo, é necessário a utilização de cores. Afinal, o que seria da nossa vida sem a vibração das cores? Já parou para imaginar um mundo totalmente em preto e branco? Não teria tanta graça, certo? 

E é dessa mesma forma que devemos pensar quando estivermos criando os estilos da nossa aplicação web. Como o próprio nome sugere, CSS color é a propriedade que define as cores de texto de um elemento dentro do nosso documento. 

Qual é a sua sintaxe?

Para utilizarmos essa propriedade em nosso arquivo de estilização é bem simples. Primeiro, deveremos selecionar o elemento HTML que receberá essa propriedade. Depois disso, basta colocarmos o nome da propriedade e o valor de cor que ela receberá. Vamos imaginar que selecionamos um elemento com a classe “meu-titulo” e queremos colocar aquele texto em azul, ok? A sintaxe ficaria da seguinte forma:

Valores da propriedade

Os valores da propriedade são informações que passamos para definirmos qual estilização aplicamos no elemento selecionado. Em nosso caso, estamos utilizando a propriedade “color”. Dessa forma, passaremos como valores as cores. Além de receber esse valor com o nome da cor em inglês, conforme demonstrado no exemplo acima, esta propriedade pode ser definida com diversos outros tipos, como, por exemplo: Hexadecimal, RGB, HSL, HWB, entre outros. 

Nesse artigo abordaremos sobre os tipos de RGB, HSL, HWB e nome das cores. 

Como usar o valor HTML em CSS?

No exemplo citado acima, definimos a cor azul como valor da propriedade color. Perceba que escrevemos o seu nome em inglês e em formato de texto. Ou seja, utilizamos o valor HTML dentro do nosso CSS. Essa linguagem suporta 140 cores diferentes, que conseguem ser identificadas pelos navegadores. Caso quiséssemos trocar a cor do nosso título para vermelho, bastaria definir o valor da propriedade como red. Sem nenhum mistério. Tão fácil quanto beber água! 

Como usar o valor RGB em CSS?

Aqui as coisas começam a ficar mais interessantes. Para entendermos sobre o uso desse valor, primeiro precisamos saber que as telas são compostas por pequenas lâmpadas que emitem as cores vermelha(red), verde(green) e azul(blue). Essas três cores combinadas e misturadas formam todas as outras que enxergamos. O que define, de fato, qual é aquela determinada cor que estamos vendo é o valor de intensidade que definimos para o RGB(red, green, blue).  O controle dessa variação fica entre 0 e 255, sendo 0 totalmente apagada e 255 totalmente acesa.

Nesse caso, se quiséssemos definir uma cor preta, bastaria colocar rgb(0,0,0). Se a nossa cor fosse branca ficaria rgb(255, 255, 255). Agora, se nosso elemento fosse vermelho, os valores seriam rgb(255,0,0).

Que tal brincar um pouquinho com esses valores no seu código e ver o resultado que isso te trará?

Como usar o valor HSL em CSS?

Essa declaração de cores não existia na versão anterior do CSS, sendo uma novidade para todos os desenvolvedores. Basicamente, um valor HSL se baseia em tom(hue), saturação(saturation) e luminosidade(lightness). Bem semelhante ao RGB, né? A diferença é que em nossa sintaxe definimos o primeiro valor como um ângulo, expresso em graus, apontando para um tom da cor na paleta de cores, variando entre 0° e 360°. Já os próximos, recebem uma porcentagem de brilho e saturação, sendo 0% o mínimo e 100% o máximo.

Se quiséssemos definir o vermelho como a cor do nosso elemento dessa forma, a sintaxe ficaria hsl(0, 100%, 50%). Se fosse a cor verde, seria hsl(120, 100%, 50%). A melhor forma de você explorar essas variedades de opções é testando seu código.

Como usar o valor HWB em CSS?

O Hue Whiteness Blacknes é uma declaração de cores que se baseia em uma cor determinante, também chamada de matriz, recebendo em seguida a quantidade das tonalidades de branco e preto ali presentes. Sua sintaxe fica dessa forma: hwb(matiz, branco, preto). 

Imaginando que precisássemos definir a cor do texto do nosso parágrafo como verde, utilizaríamos hwb(120, 0%, 50%).

Por se tratar de um padrão sugerido para a versão CSS4, atualmente, esse recurso não é suportado por todos os navegadores.

O que é um valor alfa?

Além das declarações de cores citadas anteriormente, você já deve ter escutado falar ou lido em algum lugar sobre RGBA, HSLA, HWBA e ter se perguntado o que seria esse “A”? Ou, até mesmo, qual a diferença que esse “A” traz comparado a declaração normal, como o RGB?

Não precisa se assustar, é mais simples do que você imagina. Esse valor recebido por “A”, trata-se do valor alfa, que irá definir a opacidade daquela cor. O alfa pode ser um número entre 0 e 1, ou uma porcentagem, onde o número 1 representa 100% de opacidade daquele elemento, tornando-o totalmente visível em tela.

Conclusão

Aprender a lidar com a propriedade de cor dentro do CSS é apenas o início da sua jornada como um desenvolvedor. Essa linguagem de estilização nos permite criar projetos incríveis. 

Aqui na Kenzie Academy Brasil, ensinamos sobre como utilizar o CSS e a estilizar os seus sites de maneira correta. Se você gostou desse conteúdo e gostaria de entrar na área de programação, desenvolvendo suas habilidades pessoais e profissionais, faça a sua inscrição na próxima turma.

Dica Extra

Tá querendo mudar ou colocar uma cor no teu CSS? Se liga nessa dica que separamos pra você!