Os valores de cores são usados em propriedades como color
e background-color
, eles podem ter alguns diferentes formatos:
#
- Hexadecimal RGB - Pode ser utilizado em dois formatos:#RRGGBB
- O primeiro par de dítos corresponde ao nível de vermelho, o segundo par ao nível de verde e o terceiro ao de azul. Cada par está em notação hexadecimal no intervalo de 00 até FF. Sendo assim temos vermelho "puro" sendo#FF0000
e verde#00FF00
por exemplo;#RGB
- Essa é uma "abreviação" do formato anterior. Onde o primeiro dígito representa o nível de vermelho, o segundo verde e o terceiro azul. Sempre que tiver valores repetidos nos 3 pares no do formato#RRGGBB
você pode usar apenas 3 dígitos. Temos, por exemplo, o verde#0F0
e o vermelho#F00
.
rgb()
- Funcão RGB - São 3 valores separados por vírgulas, cada um indo de 0 até 255 (rgb(rrr,ggg,bbb)
) ou 0% até 100% (rgb(rrr.rr%,ggg.gg%,bbb.bb%)
). O primeiro sendo o nível de vermelho, o segundo verde e o terceiro azul. Exemplo: vermelhorgb(255,0,0)
e azulrgb(0%,0%,100%)
;rgba()
- Função RGB com alpha - Funciona como o formato anterior adicionado de um terceiro valor: o alpha. Esse valor vai de 0 até 1 e define a transparência, 0 é totalmente transparente, 1 é totalmente opaco, 0.3 é 30% opaco, etc;hsl()
- Função HSL - São 3 valores separados por vírgulas. O primeiro valor, hue (tom da cor), vai de 0 até 360 e representa um ângulo que aponta para um tom da cor na roda de cores. O segundo valor, saturation (saturação), vai de 0% a 100% onde um valor igual a 100% representa saturação e 0% é um leve sombreado cinza de saturação. O terceiro valor, lightness (luminosidade), vai de 0% (preto) e 100% (branco);hsla()
- Função HSL com alpha - Funciona como o formato anterior adicionado de um terceiro valor: o alpha. Esse valor vai de 0 até 1 e define a transparência, 0 é totalmente transparente, 1 é totalmente opaco, 0.3 é 30% opaco, etc;<keyword>
- Palavras-chave - O CSS desde o começo da sua padronização pela W3C reconhece alumas palavras-chave para cores, são 17 cores básicas:aqua
,black
,blue
,fuchsia
,gray
,green
,lime
,maroon
,navy
,olive
,orange
,purple
,red
,silver
,teal
,white
eyellow
. E mais recentemente incluiu as palavras-chave do X11 (X-Window é o toolkit e protocolo padrão para GUI nos sistemas Unix e assemelhados). São 147 palavras-chave que vão desdelavenderblush
atésandybrown
. Aqui uma lista com todas as cores: https://www.w3.org/TR/css-color-3/#svg-color.
FALTANDO IMAGEM
transparent
- Transparente - É uma palavra-chave especial para a corrgba(0,0,0,0)
, ou seja, totalmente transparente.
Valores
Palavras-chave | Cores | Números | Porcentagem | Comprimento