Definindo cores com rgb em CSS

No início do tutorial, quando estudamos cores, eu disse que uma cor pode ser definida por uma palavra em inglês, por rgb, ou por #. Os dois últimos formatos permitem obter qualquer tonalidade de cor. Vamos entender como exatamente esses formatos funcionam.

Para compreender esses métodos, primeiro precisamos entender como a cor desejada é produzida na tela do computador.

Na verdade, um ponto individual da tela (pixel) não pode brilhar com todas as cores que são necessárias, pois isso seria tecnicamente muito complexo. Cada ponto da tela só pode brilhar com três cores: vermelho, verde e azul. Mas simultaneamente e em proporções diferentes.

Combinando essas cores, podemos obter qualquer cor necessária, de maneira semelhante à forma como os pintores fazem com tintas: misturando várias cores, eles obtêm uma nova.

Para misturar cores em CSS, você precisa especificar a palavra-chave rgb como valor da propriedade, seguida por uma lista separada por vírgulas que define as proporções em que essas três cores básicas devem ser usadas. As próprias cores podem variar de 0 a 255. Sendo que zero - é a ausência de cor, e 255 é a cor pura (por exemplo, vermelho puro).

As próprias letras rgb significam red (vermelho), green (verde), blue (azul).

Vejamos alguns exemplos.

Exemplo

Vamos misturar vermelho puro e azul puro. Para isso, definimos o primeiro valor como 255, o segundo como 0 e o terceiro - como 255. Obtaremos a cor roxa:

:

Exemplo

Agora, vamos definir o primeiro valor como 255 e todos os outros - como zero. Como resultado, obteremos vermelho puro:

:

Exemplo

Desta forma, obteremos verde puro:

:

Exemplo

E se para o verde definirmos não 255, mas 100, obteremos verde parcial:

:

Exemplo

Vamos misturar todas as três cores em proporções arbitrárias. Veja o que aconteceu:

:

Exemplo

Se definirmos todos os valores como 255, obteremos branco puro:

Exemplo

Se definirmos todos os valores como 0, obteremos preto puro:

Tarefas Práticas