Minicursos - CSS

Cores


No artigo sobre Herança eu dei um exemplo definindo algumas cores e, para isso, usei o próprio nome da cor.

body
{
color:brown;
}

i
{
color:red;
}

Apesar de funcionar, essa não é a maneira correta de se definir cor a algum objeto. Primeiro porque alguns navegadores não reconhecem algumas cores definidas pelo nome e, segundo porque através de nomes poderíamos definir apenas alguns tons e não tiraríamos proveitos dos quase infinitos tons disponíveis. Para solucionar esse problema existem duas formas que podem ser utilizadas, que são a definição através de valores hexadecimais, e pelo sistema RGB (Red, Green, Blue). O inconveniente é que tanto uma quanto a outra são praticamente ilegíveis para nós, humanos, mas para os computadores elas são claras e podem formar qualquer tonalidade de cor.

O sistema hexadecimal também é conhecido como sistema de Base 16, pois conta com 10 números e mais 6 letras, de A até F, para fazer a identificação.

Um exemplo de cor definida através desse sistema seria:

Body
{
Background-color: #DAA520;
}

Percebam que foram usados números, mas também letras. Nesse exemplo utilizei o D como o mais alto valor, representando o número 13 na base decimal, mas poderia ter utilizado até o F, que nessa mesma base representaria o 15. O símbolo # é fundamental e faz parte da sintaxe do comando.

Já o sistema RGB se baseia no princípio de que, combinando as três cores primárias, o vermelho, verde e o azul, pode-se formar qualquer outra tonalidade. A junção das três formaria o branco e a ausência de todas elas, o preto.

A intensidade com que cada cor é inserida nos códigos CSS através do sistema RGB varia de 0 a 255. Aliás, se você está começando a se aventurar no mundo da programação ou da computação em geral, acostume-se com intervalos de 256 unidades, que equivale a 28. Utilizando esse intervalo é possível armazenar cada valor de cor em um 1 byte cheio, ou seja, usando os 8 bits, por isso ele foi escolhido.

Um exemplo de representação de cores usando o sistema RGB seria:

Body
{
Background-color: rgb(200, 255, 150);
}

A regra, em si, é parecida com o sistema hexadecimal, trocando-se apenas o símbolo # pelo rgb e definindo, entre parênteses, a intensidade que se quer de cada uma das cores, na ordem vermelho, verde e azul.

Também é possível utilizar uma variação desse sistema RGB, que é a utilização de porcentagem no lugar do número, como no exemplo abaixo:

Body
{
Background-color: rgb(70%, 50%, 90%);
}

Não é comum encontrarmos quem utilize essa forma, mas coloquei apenas para que você saiba que é possível. Aliás, a forma encontrada na maioria dos sites é a primeira, que utiliza o método hexadecimal.

De qualquer forma, como eu havia dito, nenhuma dessas maneiras é intuitiva e ninguém irá tentar decorar qual combinação formará determinada cor. Sendo assim, vou recomendar um site abaixo, que contém uma enorme variedade de cores e, se elas não forem suficientes, você pode montar sua cor e já ter acesso ao código da mesma.


Clique aqui para acessar o "HTML Color Codes"


No tópico seguinte falarei sobre as unidades de medida do CSS



Veja também

Atari VCS é finalmente lançado e surpreende

O Atari VCS foi lançado recentemente e trouxe suporte a praticamente todos os serviços de streaming de jogos já disponíveis. A única exceção foi por conta do Playstation Now, cujo suporte nativo não é oferecido, mas ele pode ser acessado através do modo PC do VCS, já que o console possui Googl...

Ler Notícia Completa

The King of Fighters XV já tem data para chegar

A SNK finalmente definiu uma data para lançamento do tão esperando The King Of Fighters XV. Segundo comunicado recente, o game de luta deve chegar em 17 de fevereiro de 2022 para os consoles Playstation 4, Playstation 5, Xbox Series X e S, além de PCs. O título contará com 39 personagens e mante...

Ler Notícia Completa

Phil Spencer aprovou o Steam Deck rodando o xCloud

O chefe da divisão XBOX e vice presidente da divisão de jogos da Microsoft, Phil Spencer, recebeu um Steam Deck e passou uma semana testando o dispositivo da Valve. Nas palavras dele: “trata-se de um dispositivo muito legal. É interessante ter os jogos disponíveis em qualquer lu...

Ler Notícia Completa
Ajude o Contém Bits com um cafezinho!

Se você gostou do artigo, se ele lhe foi útil de alguma maneira e você quiser ajudar o Contém Bits, saiba que é simples, fácil e rápido. Basta clicar na imagem do PayPal (ou no cafezinho) e seguir as instruções, em ambiente seguro e com o respaldo do Paypal. Eu agradeço muito! :)


Você gostará destes vídeos!