você está aqui: Home  → Arquivo de Mensagens

Cores CSS - Definição com as funções RGB e RGBA

Colaboração: Maurício (Maujor) Samy Silva

Data de Publicação: 16 de novembro de 2017

As especificações do W3C para as CSS preveem várias propriedades, tais como color, background-color, border-color e outras, destinadas a definir cores. Os valores possíveis para tais propriedades podem ser definidos usandos-se os seguintes tipos de dados:

  • valor expressso por uma palavra-chave,
  • valor expressso em número hexadecimal,
  • valor expressso por uma função RGB,
  • valor expressso por uma função RGBA,
  • valor expressso por uma função HSL,
  • valor expressso por uma função HSLA.

Funções RGB e RGBA

Nessa dica mostraremos a definição de cores em CSS com uso das funções RGB e RGBA.

Função RGB

A função RGB tem o formato geral rgba(R, G, B, A). Ela admite três parâmetros, que definem a proporção das cores RED, GREEN e BLUE que entram na composição da cor.

Os parâmetros da função podem ser definidos com duas sintaxes, conforme descritas a seguir. A escolha de uma ou outra sintaxe é uma questão de preferência pessoal.

  • por um número inteiro no intervalo [ 0 - 255 ] onde 0 significa ausência da cor componente e 255 significa máxima proporção da cor componente.
  • em porcentagem expressa por um número inteiro onde 0 significa ausência da cor componente e 100% significa máxima proporção da cor componente.

A sintaxe CSS para definir uma cor com esta função é conforme mostrada a seguir.

  1. seletor { color: rgb(255, 127, 84); }
  2. seletor { color: rgb(100%, 50%, 33%); }

As duas cores mostradas são iguais. Notar que na proporção para mistura da cor: 255 equivale a 100%, 127 é 50% de 255 e 84 é igual a 33% de 255. As cores definidas com as duas sintaxes, são iguais. No cálculo da porcentagem arredonda-se o número resultante para o inteiro mais próximo.

Alerta: Na sintaxe em porcentagem é obrigatório usar o sinal de porcentagem ( % ) ainda que o valor seja 0 (zero).

Função RGBA

A função RGBA tem o formato geral rgb(R, G, B, A). Ela admite quatro parâmetros, que definem a proporção das cores RED, GREEN e BLUE que entram na composição da cor e o quarto parâmetro A (canal alpha da cor) que definine a opacidade.

O valor de A é expresso por um número no intervalo [ 0 - 1 ] onde 0 significa transparência total e 1 opacidade total.

A grande vantagem do uso desta função em lugar da propriedade CSS opacity em um container, por exemplo, é que ela aplica a transparência somente na cor de fundo do container sem interferir com a opacidade de seus conteúdos ao passo que a propriedade CSS opacity aplica a transparência na cor de fundo e nos conteúdos do container.

Os parâmetros da função podem ser definidos com duas sintaxes, conforme descritas a seguir. A escolha de uma ou outra sintaxe é uma questão de preferência pessoal.

  1. seletor { color: rgba(255, 255, 0, 0.5); }
  2. seletor { color: rgba(100%, 100%, 0%, 0.8); }

As duas cores mostradas são iguais, contudo a primeira é "mais transparente" que a segunda.

Alerta: Na sintaxe em porcentagem é obrigatório usar o sinal de porcentagem ( % ) ainda que o valor seja 0 (zero).

Área interativa

Nessa área interativa existem quatro campos de texto nos quais você poderá entrar os valores dos parâmetros R, G e B na faixa [ 0 - 255 ] (não há opção para entrada em porcentagem) e o valor para o parâmetro A na faixa [ 0 - 1 ].
Notar que definir A = 1 equivale a aplicar a função rgb(R, G, B).

O retângulo na cor preta está atrás do retângulo onde será aplicada a cor e destina-se a facilitar a visualização da opacidade quando ela for definida.

Altere os valores RGBA nos campos a seguir e clique OK.

A cor RGBA escolhida será aplicada
como fundo deste retângulo

Aprenda praticando! :-)

Sobre o autor

Maurício Samy Silva também conhecido como "Dinossauro das CSS" ou simplesmente Maujor® é graduado em Engenharia Civil pelo Instituto Militar de Engenharia (IME).

No segundo semestre de 2003, com a pretensão de suprir a falta de material de consulta gratuita, em língua portuguesa, na internet, decidiu criar o site de tutoriais denominado Maujor, hospedado em http://www.maujor.com/ e destinado a divulgar as técnicas de desenvolvimento frontend. Maujor é autor de 15 livros de desenvolvimento web (http://livrosdomaujor.com.br) e está escrevendo mais um sobre CSS Grid Layout com previsão de lançamento em novembro de 2017.

Saiba mais: Facebook , Twitter.



Veja a relação completa dos artigos de Maurício (Maujor) Samy Silva

 

 

Opinião dos Leitores

Seja o primeiro a comentar este artigo
*Nome:
Email:
Me notifique sobre novos comentários nessa página
Oculte meu email
*Texto:
 
  Para publicar seu comentário, digite o código contido na imagem acima
 


Powered by Scriptsmill Comments Script