Valores de Cor CSS

Existem várias maneiras de definir valores de cor no CSS.

Palavras-chave de cor

Palavras-chave de cor são identificadores insensíveis a maiúsculas e minúsculas, que representam cores específicas, como vermelho, verde, azul, amarelo, preto, etc.

　　h1　{
　　　cor:  vermelho;
　　}
　　p {
　　　background-cor:  amarelo;
　　}

VerPalavras-chave de corlista completa

Palavras-chave de cor transparente

A palavra-chave 'transparente' representa uma cor completamente transparente.

A palavra-chave pode ser vista como uma abreviação do rgba(0,0,0,0), também conhecido como seu valor calculado.

　　h1　{
　　　Esta palavra-chave pode ser vista como uma abreviação do rgba(0,0,0,0), também conhecido como seu valor calculado.
　　}
　　p {
　　　background-Esta palavra-chave pode ser vista como uma abreviação do rgba(0,0,0,0), também conhecido como seu valor calculado.
　　}

Palavra-chave transparente

Expandiu os valores de cor para incluir a palavra-chave transparente, permitindo que seja usada com todos os atributos que aceitam valores de cor.

Valores de cor RGB

O modelo de cor RGB (vermelho, verde, azul) é o método mais usado para definir valores de cor no CSS. Pode usar o modelo RGB de duas maneiras:-9Notação hexadecimal

Os valores RGB na notação hexadecimal # são três ou seis caracteres hexadecimais (0

　　h1　{
　　　，af) composto por caracteres.8Quando se usa o símbolo de seis dígitos (#rrggbb), o primeiro par (rr) representa o valor vermelho, o segundo par (gg) representa o valor verde e o último par (bb) representa o valor azul.
　　}
　　p {
　　　background-color: #f880;
　　}

Notação de função

A notação de função RGB especifica os valores RGB: rgb(red, green, blue). Cada parâmetro (red, green e blue) define a intensidade da cor, pode ser um valor inteiro (de 0 a255) ou um valor percentual (de 0% a100%)

　　h1　{
　　　color: rgb(0,255,255});
　　}
　　p {
　　　background-color: rgb(0%,100%,100%);
　　}

O valor 0 ou 0% significa que não há valor específico de cor presente, enquanto o valor255,100% e f ou ff significam que o valor da cor está completamente presente.

Ver mais sobreCSS3Cordo tutorial, para entender informações sobre novos símbolos de função (por exemplo) rgba(), hsl() e hsla() usados para definir valores de cor.