Função rgb() do CSS

Definição e uso

No CSS rgb() A função usa o modelo de cor vermelho-verde-azul (RGB) para especificar a cor. Também é possível adicionar um canal de transparência opcional (que representa a transparência da cor).

O valor de cor RGB é especificado através rgb(vermelho verde azul) Especificar. Cada parâmetro define a intensidade da cor, que pode ser um inteiro entre 0 e 255 ou uma porcentagem entre 0% e 100%.

Por exemplo, o valor rgb(0 0 255) é apresentado como azul, porque o parâmetro azul é configurado no valor máximo (255), enquanto os outros parâmetros são configurados em 0.

Atenção:rgba() A função é rgb() Nome alternativo da função. Recomenda-se usar rgb() Função.

Exemplo

Defina diferentes cores RGB(A):

#p1 {cor-fundo:rgb(255 0 0);} /* Vermelho */
#p2 {cor-fundo:rgb(0 255 0);} /* Verde */
#p3 {cor-fundo:rgb(0 0 255);} /* Azul */
#p4 {cor-fundo:rgb(192 192 192);} /* Cinza */
#p5 {cor-fundo:rgb(255 255 0);} /* Amarelo */
#p6 {cor-fundo:rgb(255 0 255);} /* Cereja */
#p7 {cor-fundo:rgb(255 0 255 / 0.2);} /* Cereja com transparência */
#p8 {cor-fundo:rgb(0 0 255 / 50%);} /* Azul com transparência */

Experimente você mesmo

Sintaxe CSS

Sintaxe de valor absoluto

rgb(R G B / A)
valor descrição
R

Obrigatório. Define a intensidade da cor vermelha, pode ser um inteiro entre 0 e 255 ou uma porcentagem entre 0% e 100%.

Também pode usar none (equivalente a 0%).
G

Obrigatório. Define a intensidade da cor verde, pode ser um inteiro entre 0 e 255 ou uma porcentagem entre 0% e 100%.

Também pode usar none (equivalente a 0%).
B

Obrigatório. Define a intensidade da cor azul, pode ser um inteiro entre 0 e 255 ou uma porcentagem entre 0% e 100%.

Também pode usar none (equivalente a 0%).
/ A

Opcional. Representa o valor do canal de transparência da cor, 0% (ou 0) representa transparência completa, 100% (ou 1) representa opacidade completa.

Também pode usar none (representa canal de transparência sem transparência). O valor padrão é 100%.

Sintaxe de valor relativo

rgb(from cor R G B / A)
valor descrição
from cor

Começa com a palavra-chave from, seguida do valor da cor original.

Esta é a cor original sobre a qual a cor relativa se baseia.
R

Obrigatório. Define a intensidade da cor vermelha, pode ser um inteiro entre 0 e 255 ou uma porcentagem entre 0% e 100%.

Também pode usar none (equivalente a 0%).
G

Obrigatório. Define a intensidade da cor verde, pode ser um inteiro entre 0 e 255 ou uma porcentagem entre 0% e 100%.

Também pode usar none (equivalente a 0%).
B

Obrigatório. Define a intensidade da cor azul, pode ser um inteiro entre 0 e 255 ou uma porcentagem entre 0% e 100%.

Também pode usar none (equivalente a 0%).
/ A

Opcional. Representa o valor do canal de transparência da cor, 0% (ou 0) representa transparência completa, 100% (ou 1) representa opacidade completa.

Também pode usar none (representa canal de transparência sem transparência). O valor padrão é 100%.

Detalhes técnicos

Versão: CSS2

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta completamente essa função pela primeira vez.

Chrome Edge Firefox Safari Opera
rgb()
1 4 1 1 3.5
rgb() com parâmetro de transparência
65 79 52 12.1 52
Parâmetros separados por espaço
65 79 52 12.1 52