Um valor de cor RGB representa luz VERMELHA, VERDE e AZUL fontes.
Em CSS, uma cor pode ser especificada como um valor RGB, usando esta fórmula:
rgb(vermelho, verde, azul)
Cada parâmetro (vermelho, verde e azul) define a intensidade da cor entre 0 e 255.
Por exemplo, rgb(255, 0, 0) é exibido em vermelho, porque o vermelho está definido para seu valor mais alto (255) e os outros são definido como 0.
Para exibir preto, defina todos os parâmetros de cor como 0, assim: rgb(0, 0, 0).
Para exibir branco, defina todos os parâmetros de cor para 255, como isto: rgb(255, 255, 255).
Experimente misturar os valores RGB abaixo:
RED
GREEN
BLUE
Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>Specify colors using RGB values</h1>
<h2 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h2>
<h2 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h2>
<h2 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h2>
<h2 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h2>
<h2 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h2>
<h2 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h2>
</body>
</html>
Os tons de cinza são frequentemente definidos usando valores iguais para todas as 3 fontes de luz:
Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>Shades of gray</h1>
<p>By using equal values for red, green, and blue, you will get different shades of gray:</p>
<h2 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h2>
<h2 style="background-color:rgb(90, 90, 90);">rgb(90, 90, 90)</h2>
<h2 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h2>
<h2 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h2>
<h2 style="background-color:rgb(210, 210, 210);">rgb(210, 210, 210)</h2>
<h2 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h2>
</body>
</html>
Os valores de cores RGBA são uma extensão dos valores de cores RGB com um canal alfa - que especifica a opacidade de uma cor.
Um valor de cor RGBA é especificado com:
rgba(vermelho, verde, azul, alfa)
O parâmetro alfa é um número entre 0,0 (totalmente transparente) e 1,0 (nada transparente):
Experimente misturar os valores RGBA abaixo:
RED
GREEN
BLUE
ALPHA
Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>Make transparent colors with RGBA</h1>
<h2 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h2>
<h2 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h2>
</body>
</html>