Cores e suas representações

Definição de cores por nome

No CSS as cores podem ser definidas de várias formas. Uma das formas válidas, é indicar a cor desejada através do nome dessa cor - em inglês.

Atualmente existem 140 cores que podem ser definidas pelos seus respectivos nomes. Para a lista completa das cores disponíveis, consulte https://www.w3schools.com/cssref/css_colors.asp

Abaixo segue trecho de CSS que utiliza o nome da cor para definição da cor de fundo da página HTML:

body {
   background-color: "green";
}

Definição de cores código decimal

Outra representação das cores é por meio do padrão RGB (Red Green Blue) que define uma cor através da composição de três componentes da cor: vermelho (Red), verde (Green) e azul (Blue).

Nesse caso, é necessário indicar um valor que varia entre 0 e 255 para cada componente. Com essa definição é possível alcançar cerca de 16 milhões de cores!

A sintaxe para definição da cor deve ser: rgb(vermelho, verde, azul). Veja o exemplo abaixo:

body {
   background-color: rgb(0, 255, 0);
}

Acesse o simulador de cores do W3C através deste link e divirta-se.

Notação hexadecimal

Outra forma é utilizar a notação hexadecimal. Essa forma utiliza a mesma lógica da notação decimal em que devemos definir um valor para cada componente RGB. A diferença é que, em vez de definir um valor decimal entre 0 e 255, devemos definir em hexadecimal entre 0 e FF. Caso não conheça o sistema de representação hexadecimal, acesse este link para entender um pouco mais.

Para definir uma cor com notação hexadecimal, devemos preceder o número do caractere "#", conforme o exemplo abaixo:

body {
   background-color: #00FF00;
}

Este exemplo é equivalente ao exemplo da notação decimal em que a componente vermelho e azul possuem valor zero e a componente verde possui valor máximo (FF).

Essa notação é muito utilizada, pela sua forma enxuta.