De acordo com as Leis 12.965/2014 e 13.709/2018, que regulam o uso da Internet e o tratamento de dados pessoais no Brasil, ao me inscrever na newsletter do portal DICAS-L, autorizo o envio de notificações por e-mail ou outros meios e declaro estar ciente e concordar com seus Termos de Uso e Política de Privacidade.
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.