Cor do CSS

Suporte CSS Mais de 140 nomes de corese valores hexadecimais, valores RGB, valores RGBA, valores HSL, valores HSLA e opacidade.

Cor RGBA

O valor de cor RGBA é uma extensão do valor de cor RGB, com canal alpha - esse canal determina a opacidade da cor.

O valor de cor RGBA é definido assim: rgba(vermelho, verde, azul, alpha) alpha Os parâmetros são números entre 0.0 (completamente transparente) e 1.0 (completamente opaco).

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

Os seguintes exemplos definem diferentes cores RGBA:

Exemplo

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* Vermelho com transparência */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* Verde com transparência */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* Azul com transparência */

Experimente você mesmo

Cor HSL

HSL significa tom, saturação e brilho (Hue, Saturation e Lightness).

O valor de cor HSL é definido assim: hsl(hue, saturation, lightness).

O tom é o grau na cor do anel (de 0 a 360):

  • 0 (ou 360) é vermelho
  • 120 é verde
  • 240 é azul

A saturação é uma porcentagem: 100% é a cor plena.

A brilho também é uma porcentagem: 0% é a cor escura (preto), enquanto 100% é branco.

hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

Abaixo estão exemplos de diferentes cores HSL:

Exemplo

#p1 {background-color: hsl(120, 100%, 50%);}  /* Verde */
#p2 {background-color: hsl(120, 100%, 75%);}  /* Verde claro */
#p3 {background-color: hsl(120, 100%, 25%);}  /* Verde escuro */
#p4 {background-color: hsl(120, 60%, 70%);}   /* Verde pálido */

Experimente você mesmo

Cor HSLA

Os valores de cor HSLA são uma extensão dos valores de cor HSL com canal Alpha - eles definem a opacidade da cor.

Os valores de cor HSLA são definidos pelos seguintes parâmetros: hsla(hue, saturation, lightness, alpha), onde o parâmetro alpha define a opacidade. O parâmetro alpha é um número entre 0.0 (completamente transparente) e 1.0 (completamente opaco).

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

Abaixo estão exemplos de diferentes cores HSLA:

Exemplo

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* Verde com opacidade */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* Verde claro com opacidade */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* Verde escuro com opacidade */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* Verde pálido com opacidade */

Experimente você mesmo

Opacidade

CSS opacity A propriedade define a opacidade do elemento inteiro (a cor de fundo e o texto também serão opacos/transparentes).

opacity O valor da propriedade deve ser um número entre 0.0 (completamente transparente) e 1.0 (completamente opaco).

rgb(255, 0, 0); opacity:0.2;
rgb(255, 0, 0); opacity:0.4;
rgb(255, 0, 0); opacidade:0.6;
rgb(255, 0, 0); opacidade:0.8;

Atenção, o texto acima também será transparente/opaco!

O exemplo a seguir mostra diferentes elementos com opacidade:

Exemplo

#p1 {cor-de-fundo:rgb(255,0,0);opacidade:0.6;}  /* Vermelho com opacidade */
#p2 {cor-de-fundo:rgb(0,255,0);opacidade:0.6;}  /* Verde com opacidade */
#p3 {cor-de-fundo:rgb(0,0,255);opacidade:0.6;}  /* Azul com opacidade */

Experimente você mesmo