Valores de cores legais CSS
Cores CSS
As cores em CSS podem ser especificadas pelos seguintes métodos:
- Cores hexadecimais
- Cores hexadecimais com transparência
- Cores RGB
- Cores RGBA
- Cores HSL
- Cores HSLA
- Nomes de cores predefinidos/entre navegadores
- Com a palavra-
currentcolorchave
Cores hexadecimais
Uma cor hexadecimal é especificada com: #RRGGBB, onde os inteiros hexadecimais RR (vermelho), GG (verde) e BB (azul) especificam os componentes da cor. Todos os valores devem estar entre 00 e FF.
Por exemplo, o valor #0000ff é renderizado como azul, porque o componente azul é definido como seu valor mais alto (ff) e os outros são definidos como 00.
Exemplo
Defina diferentes cores HEX:
#p1 {background-color: #ff0000;} /* red */
#p2 {background-color: #00ff00;} /* green */
#p3 {background-color: #0000ff;} /* blue */
Cores hexadecimais com transparência
Uma cor hexadecimal é especificada com: #RRGGBB. Para adicionar transparência, adicione dois dígitos adicionais entre 00 e FF.
Exemplo
Defina diferentes cores HEX com transparência:
#p1a {background-color: #ff000080;} /* red transparency */
#p2a {background-color: #00ff0080;} /* green
transparency */
#p3a {background-color: #0000ff80;} /* blue
transparency */
Cores RGB
Um valor de cor RGB é especificado com a função rgb() , que tem a seguinte sintaxe:
rgb(red, green, blue)
Cada parâmetro (vermelho, verde e azul) define a intensidade da cor e pode ser um número inteiro entre 0 e 255 ou um valor percentual (de 0% a 100%).
Por exemplo, o valor rgb(0,0,255) é renderizado como azul, porque o parâmetro blue é definido como seu valor mais alto (255) e os outros são definidos como 0.
Além disso, os seguintes valores definem cores iguais: rgb(0,0,255) e rgb(0%,0%,100%).
Exemplo
Defina diferentes cores RGB:
#p1 {background-color: rgb(255, 0, 0);} /* red */
#p2 {background-color: rgb(0, 255, 0);} /* green */
#p3 {background-color: rgb(0, 0, 255);} /* blue */
Cores RGBA
Os valores de cor RGBA são uma extensão dos valores de cor RGB com um canal alfa - que especifica a opacidade do objeto.
Uma cor RGBA é especificada com a função rgba() , que possui a seguinte sintaxe:
rgba(red, green, blue, alpha)
O parâmetro alfa é um número entre 0,0 (totalmente transparente) e 1,0 (totalmente opaco).
Exemplo
Defina diferentes cores RGB com opacidade:
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */
Cores HSL
HSL significa matiz, saturação e leveza - e representa uma representação de cores de coordenadas cilíndricas.
Um valor de cor HSL é especificado com a função hsl() , que tem a seguinte sintaxe:
hsl(hue, saturation, lightness)
Matiz é um grau na roda de cores (de 0 a 360) - 0 (ou 360) é vermelho, 120 é verde, 240 é azul. A saturação é um valor percentual; 0% significa um tom de cinza e 100% é a cor completa. A leveza também é uma porcentagem; 0% é preto, 100% é branco.
Exemplo
Defina diferentes cores HSL:
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
Cores HSLA
Os valores de cor HSLA são uma extensão dos valores de cor HSL com um canal alfa - que especifica a opacidade do objeto.
Um valor de cor HSLA é especificado com a função hsla() , que tem a seguinte sintaxe:
hsla(hue, saturation, lightness, alpha)
O parâmetro alfa é um número entre 0,0 (totalmente transparente) e 1,0 (totalmente opaco).
Exemplo
Defina diferentes cores HSL com opacidade:
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */
Nomes de cores predefinidos/com vários navegadores
140 nomes de cores são predefinidos na especificação de cores HTML e CSS.
Por exemplo: blue, red, coral, brown, etc:
Exemplo
Defina nomes de cores diferentes:
#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}
Uma lista de todos os nomes predefinidos pode ser encontrada em nossa Referência de Nomes de Cores .
A palavra-chave cor atual
A currentcolorpalavra-chave se refere ao valor da propriedade color de um elemento.
Exemplo
A cor da borda do seguinte elemento <div> será azul, porque a cor do texto do elemento <div> é azul:
#myDIV {
color: blue; /* Blue text color */
border: 10px solid currentcolor;
/* Blue border color */
}