Cores

As cores exibidas nas telas dos monitores são definidas por meio da combinação do vermelho, verde e azul (RGB). Essa combinação é feita determinando uma intensidade para cada cor, colocando a quantificação de cada uma separada por vírgula (0, 0, 0), primeiro para o vermelho, em seguida para o verde e, por último, para o azul. Os valores podem variar entre 0 e 255 (essa faixa de valores é representada através de 1 byte, ou seja, 8 bits) para cada cor, o que nos dá um conjunto de mais de dezesseis milhões de cores possíveis de serem usadas (256 x 256 x 256).

Em CSS, as cores são, geralmente, definidas usando o sistema de numeração hexadecimal (base 16), o qual possui como dígitos: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E e F. Para representar uma cor por esse sistema, você precisará entender como funciona a conversão de cada valor de intensidade (Vermelho, Verde e Azul) do sistema decimal para o hexadecimal. É importante que se tenha a consciência de que existem outros sistemas de numeração, e que as cores podem ser, e na maioria das vezes são, representadas pelo sistema hexadecimal.

Como mostrado anteriormente, o sistema RGB vai de 0 a 255 em decimal. Em hexadecimal, é representada pelos dígitos 00 a FF. Assim, uma cor que fosse representada pela sequência (0, 0, 255) é representada por (00, 00, FF), ou, simplesmente, 0000FF. O primeiro par de dígitos representa a intensidade da cor vermelha, o segundo par a intensidade da cor verde e o último a intensidade da cor azul. Assim, 0000FF representa a cor azul (pura), pois a intensidade do azul é FF, a máxima possível, enquanto as outras são 00.

As cores são definidas em CSS através de duas propriedades: color e background-color. A propriedade color determina a cor de qualquer elemento (X)HTML, enquanto background-color determina a cor de plano de fundo (de qualquer elemento). Existem três maneiras de definir valores para essas propriedades: através do sistema hexadecimal, pelo sistema RGB, ou pelo nome da cor (palavra-chave).