Cores HTML RGB e RGBA
Uma extensão de RGB que inclui o canal Alfa é denotada pelo valor de cor RGBA (opacidade).
Valores de cores HTML RGB
Aqui está como o HTML especifica as cores como valores RGB:
rgb ( vermelho, verde , azul )
A intensidade de cada parâmetro de cor (vermelho, verde e azul) é definida por um valor entre 0 e 255 . Existem 16777216 cores possíveis se multiplicarmos 256 por 256 por 256!
Por exemplo, rgb(255, 0, 0) é mostrado como vermelho , pois o vermelho é definido como seu valor mais alto (255) e o verde e o azul são definidos como 0 .
Em outro exemplo, rgb(0, 255, 0) é exibido como verde , pois o verde é definido como seu valor mais alto (255), enquanto vermelho e azul são definidos como zero .
Para retratar o preto , coloque todos os parâmetros de cor em 0 , como segue: rgb(0, 0, 0) como se trata de cores HTML RGB .
Você pode exibir o branco definindo todos os parâmetros de cor para 255 , rgb as rgb(255, 255, 255) .
Abaixo estão os valores RGB que você pode experimentar:
RGB(255,99,71)
VERMELHO
VERDE
AZUL
Example
Tons de azul
É comum que todos os três parâmetros sejam iguais ao definir tons de azul quando se trata de HTML Colors RGB :
Example
Exemplo de Explicação
O código acima demonstra o uso de códigos de cores RGB em HTML. Neste exemplo, temos uma página HTML simples com seis elementos de título (<h1>) cada um com uma cor de fundo diferente definida usando o atributo style.
O atributo style nos permite definir estilos CSS embutidos, diretamente no elemento HTML. Nesse caso, estamos usando a propriedade background-color para definir a cor de fundo de cada elemento de cabeçalho.
O código de cores RGB é especificado como três valores separados por vírgula dentro da função rgb() . O primeiro valor representa a quantidade de vermelho na cor, o segundo valor representa a quantidade de verde e o terceiro valor representa a quantidade de azul. Cada valor pode variar de 0 a 255, com 0 indicando a ausência dessa cor e 255 indicando a presença máxima dessa cor.
Neste exemplo, definimos a cor de fundo do primeiro elemento de cabeçalho como rgb(7, 0, 196), que tem uma pequena quantidade de vermelho, nenhum verde e uma alta quantidade de azul, resultando em uma cor azul profundo. Os elementos de título a seguir têm quantidades progressivamente maiores de verde, resultando em uma variedade de cores verde-azuladas.
Valores de cores RGBA
Esta é uma extensão dos valores de cores RGB do HTML Colors que inclui um canal Alfa que especifica a opacidade.
Os valores de cor RGBA são definidos da seguinte forma:
rgba ( vermelho, verde , azul, alfa )
O parâmetro alfa é um valor entre 0,0 (totalmente transparente) e 1,0 (totalmente opaco):
A experimentação com os valores HTML Colors RGB OU RGBA é mostrada abaixo:
rgba(255,99,71,0,5)
VERMELHO
VERDE
AZUL
ALFA
Example
Benefícios das cores HTML RGB e RGBA
Há uma série de vantagens em usar as cores HTML RGB e RGBA em relação a outros modelos de cores. Listamos abaixo algumas das principais vantagens:
Compatibilidade: As cores RGB e RGBA são suportadas por quase todos os navegadores modernos, tornando-os escolhas populares para web design.
Familiaridade: os códigos de cores RGB têm sido uma escolha popular entre web designers e desenvolvedores há anos. Como resultado, as cores RGB e RGBA podem ser facilmente usadas e integradas aos fluxos de trabalho de web design existentes.
Precisão: as cores RGB e RGBA fornecem altos níveis de precisão e controle sobre os valores das cores, facilitando a obtenção das cores desejadas.
Transparência: O esquema de cores RGBA oferece o benefício adicional da transparência, permitindo que os designers criem elementos com vários níveis de opacidade. Usando este método, efeitos sutis podem ser criados ou vários elementos podem ser colocados em camadas.
Acessibilidade: certifique-se de que o contraste entre as cores do texto e do plano de fundo seja adequado para otimizar as cores RGB e RGBA para acessibilidade. Para garantir que o conteúdo da web seja acessível a todos, inclusive aos deficientes visuais, essa etapa é essencial.
