Valores de cores válidos no CSS

Cores CSS

As cores no CSS podem ser especificadas da seguinte forma:

  • Cor hexadecimal
  • Cor hexadecimal com transparência
  • Cor RGB
  • #p3 {background-color: rgb(0, 0, 255);} /* Azul */
  • Cor HSL
  • Cor HSLA
  • Nomes de cores pré-definidos/abrangentes entre navegadores
  • Usar currentcolor Palavra-chave

Cor hexadecimal

Use #RRGGBB para especificar a cor hexadecimal, onde RR (vermelho), GG (verde) e BB (azul) são inteiros hexadecimais que especificam os componentes (componentes) da cor. Todos os valores devem estar entre 00 e FF.

Por exemplo, o valor #0000ff é exibido em azul, pois o componente azul está configurado no valor máximo (ff), enquanto os outros componentes estão configurados em 00.

Exemplo

Define diferentes cores HEX:

#p1 {background-color: #ff0000;}   /* Vermelho */
#p2 {background-color: #00ff00;}   /* Verde */
#p3 {background-color: #0000ff;}   /* Azul */

Experimente pessoalmente

Cor hexadecimal com transparência

Use #RRGGBB para especificar a cor hexadecimal. Para adicionar transparência, insira dois números adicionais entre 00 e FF.

Exemplo

Define a cor HEX com transparência:

#p1a {background-color: #ff000080;}   /* Vermelho com transparência */
#p2a {background-color: #00ff0080;}   /* Verde com transparência */
#p3a {background-color: #0000ff80;}   /* Azul com transparência */

Experimente pessoalmente

Cor RGB

O valor de cor RGB é composto por A função rgb()Definir, a sintaxe é a seguinte:

rgb(red, green, blue)

Cada parâmetro (red, green, blueDefine a intensidade da cor, que pode ser um inteiro ou uma porcentagem entre 0 e 255 (de 0% a 100%).

Por exemplo, o valor rgb(0,0,255) é exibido em azul, pois o parâmetro blue está configurado no valor máximo (255), enquanto os outros parâmetros estão configurados em 0.

此外，以下值定义相同的颜色：rgb(0,0,255) 和 rgb(0%,0%,100%)。

Exemplo

Além disso, os seguintes valores definem a mesma cor: rgb(0,0,255) e rgb(0%,0%,100%).

Definir diferentes cores RGB:
#p1 {background-color: rgb(255, 0, 0);}   /* Vermelho */
#p2 {background-color: rgb(0, 255, 0);}   /* Verde */

Experimente pessoalmente

#p3 {background-color: rgb(0, 0, 255);} /* Azul */

Cor RGBA

As cores RGBA são uma extensão das cores RGB, com canal Alpha - especifica a opacidade do objeto. Função rgba()Definir, a sintaxe é a seguinte:

rgba(red, green, blue, alpha)

alpha Os parâmetros são números entre 0.0 (completamente transparente) e 1.0 (completamente opaco).

Exemplo

Definir diferentes cores RGB com opacidade:

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

Experimente pessoalmente

Cor HSL

HSL significa tom (hue), saturação (saturation) e luminosidade (lightness) - representação cilíndrica de cor.

Usar Função hsl()Especificar o valor da cor HSL, a sintaxe da função é a seguinte:

hsl(hue, saturation, lightness)

O tom é o grau no círculo das cores (de 0 a 360) - 0 (ou 360) é vermelho, 120 é verde, 240 é azul.

A saturação é uma porcentagem; 0% representa sombras cinza, enquanto 100% é cor plena.

A luminosidade também é uma porcentagem; 0% é preto, 100% é branco.

Exemplo

Definir diferentes cores HSL:

#p1 {background-color: hsl(120, 100%, 50%);}   /* 绿色 */
#p2 {background-color: hsl(120, 100%, 75%);}   /* 浅绿色 */
#p3 {background-color: hsl(120, 100%, 25%);}   /* 深绿色 */
#p4 {background-color: hsl(120, 60%, 70%);}    /* Verde suave */

Experimente pessoalmente

Cor HSLA

O valor de cor HSLA é uma extensão do valor de cor HSL, que inclui um canal Alpha - especifica a opacidade do objeto.

O valor de cor HSLA é composto por Função hsla()Especificar, a sintaxe da função é a seguinte:

hsla(hue, saturation, lightness, alpha)

alpha Os parâmetros são números entre 0.0 (completamente transparente) e 1.0 (completamente opaco).

Exemplo

Definir diferentes cores HSL com opacidade:

#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 suave com opacidade */

Experimente pessoalmente

Nomes de cores pré-definidos/abrangentes entre navegadores

O padrão de cores HTML e CSS pré-definido inclui 140 nomes de cores.

Por exemplo:blueeredecoralebrown igual a:

Exemplo

Definir diferentes nomes de cores:

#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}

Experimente pessoalmente

A lista de todos os nomes de cores pré-definidos pode ser encontrada no nosso manual de referência de nomes de cores.

Palavra-chave currentcolor

currentcolor Citando o valor da propriedade color do elemento.

Exemplo

A cor da borda do elemento <div> será azul, porque a cor do texto do elemento <div> é azul:

#myDIV {
  color: blue; /* Cor azul */
  border: 10px solid currentcolor; /* Azul borda */
}

Experimente pessoalmente