Marusya's School Notes

RGBA Colors

RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color. The syntax to create an RGBA color value is:

rgba(red, green, blue, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque):

HTML file:	Displayed by browser:
<body> <h3>Various alpha parameters applied to red:</h3> <div style="background: rgba(255, 0, 0, 0.0);">This is rgba (255, 0, 0, 0.0)</div> <div style="background: rgba(255, 0, 0, 0.1);">This is rgba (255, 0, 0, 0.1)</div> <div style="background: rgba(255, 0, 0, 0.2);">This is rgba (255, 0, 0, 0.2)</div> <div style="background: rgba(255, 0, 0, 0.3);">This is rgba (255, 0, 0, 0.3)</div> <div style="background: rgba(255, 0, 0, 0.4);">This is rgba (255, 0, 0, 0.4)</div> <div style="background: rgba(255, 0, 0, 0.5);">This is rgba (255, 0, 0, 0.5)</div> <div style="background: rgba(255, 0, 0, 0.6);">This is rgba (255, 0, 0, 0.6)</div> <div style="background: rgba(255, 0, 0, 0.7);">This is rgba (255, 0, 0, 0.7)</div> <div style="background: rgba(255, 0, 0, 0.8);">This is rgba (255, 0, 0, 0.8)</div> <div style="background: rgba(255, 0, 0, 0.9);">This is rgba (255, 0, 0, 0.9)</div> <div style="background: rgba(255, 0, 0, 1.0);">This is rgba (255, 0, 0, 1.0)</div> <h3>Various colors with alpha = 0.3:</h3> <div style="background-color:rgba(0,0,0,0.3);">This is rgba (0,0,0,0.3): Black</div> <div style="background-color:rgba(255,0,0,0.3);">This is rgba (255,0,0,0.3): Red</div> <div style="background-color:rgba(0,255,0,0.3);">This is rgba (0,255,0,0.3): Green</div> <div style="background-color:rgba(0,0,255,0.3);">This is rgba (0,0,255,0.3): Blue</div> <div style="background-color:rgba(192,192,192,0.3);">This is rgba (192,192,192,0.3): Grey</div> <div style="background-color:rgba(255,255,0,0.3);">This is rgba (255,255,0,0.3): Yellow</div> <div style="background-color:rgba(255,0,255,0.3);">This is rgba (255,0,255,0.3): Cerise</div> <div style="background-color:rgba(255,255,255,0.3);">This is rgba (255,255,255,0.3): White</div> </body>	Various alpha parameters applied to red: This is rgba (255, 0, 0, 0.0) This is rgba (255, 0, 0, 0.1) This is rgba (255, 0, 0, 0.2) This is rgba (255, 0, 0, 0.3) This is rgba (255, 0, 0, 0.4) This is rgba (255, 0, 0, 0.5) This is rgba (255, 0, 0, 0.6) This is rgba (255, 0, 0, 0.7) This is rgba (255, 0, 0, 0.8) This is rgba (255, 0, 0, 0.9) This is rgba (255, 0, 0, 1.0) Various colors with alpha = 0.3: This is rgba (0,0,0,0.3): Black This is rgba (255,0,0,0.3): Red This is rgba (0,255,0,0.3): Green This is rgba (0,0,255,0.3): Blue This is rgba (192,192,192,0.3): Grey This is rgba (255,255,0,0.3): Yellow This is rgba (255,0,255,0.3): Cerise This is rgba (255,255,255,0.3): White

HTML file:

Displayed by browser:

<body>
<h3>Various alpha parameters applied to red:</h3>

<div style="background: rgba(255, 0, 0, 0.0);">This is rgba (255, 0, 0, 0.0)</div>
<div style="background: rgba(255, 0, 0, 0.1);">This is rgba (255, 0, 0, 0.1)</div>
<div style="background: rgba(255, 0, 0, 0.2);">This is rgba (255, 0, 0, 0.2)</div>
<div style="background: rgba(255, 0, 0, 0.3);">This is rgba (255, 0, 0, 0.3)</div>
<div style="background: rgba(255, 0, 0, 0.4);">This is rgba (255, 0, 0, 0.4)</div>
<div style="background: rgba(255, 0, 0, 0.5);">This is rgba (255, 0, 0, 0.5)</div>
<div style="background: rgba(255, 0, 0, 0.6);">This is rgba (255, 0, 0, 0.6)</div>
<div style="background: rgba(255, 0, 0, 0.7);">This is rgba (255, 0, 0, 0.7)</div>
<div style="background: rgba(255, 0, 0, 0.8);">This is rgba (255, 0, 0, 0.8)</div>
<div style="background: rgba(255, 0, 0, 0.9);">This is rgba (255, 0, 0, 0.9)</div>
<div style="background: rgba(255, 0, 0, 1.0);">This is rgba (255, 0, 0, 1.0)</div>

<h3>Various colors with alpha = 0.3:</h3>

<div style="background-color:rgba(0,0,0,0.3);">This is rgba (0,0,0,0.3): Black</div>
<div style="background-color:rgba(255,0,0,0.3);">This is rgba (255,0,0,0.3): Red</div>
<div style="background-color:rgba(0,255,0,0.3);">This is rgba (0,255,0,0.3): Green</div>
<div style="background-color:rgba(0,0,255,0.3);">This is rgba (0,0,255,0.3): Blue</div>
<div style="background-color:rgba(192,192,192,0.3);">This is rgba (192,192,192,0.3): Grey</div>
<div style="background-color:rgba(255,255,0,0.3);">This is rgba (255,255,0,0.3): Yellow</div>
<div style="background-color:rgba(255,0,255,0.3);">This is rgba (255,0,255,0.3): Cerise</div>
<div style="background-color:rgba(255,255,255,0.3);">This is rgba (255,255,255,0.3): White</div>
</body>

Various alpha parameters applied to red:

This is rgba (255, 0, 0, 0.0)

This is rgba (255, 0, 0, 0.1)

This is rgba (255, 0, 0, 0.2)

This is rgba (255, 0, 0, 0.3)

This is rgba (255, 0, 0, 0.4)

This is rgba (255, 0, 0, 0.5)

This is rgba (255, 0, 0, 0.6)

This is rgba (255, 0, 0, 0.7)

This is rgba (255, 0, 0, 0.8)

This is rgba (255, 0, 0, 0.9)

This is rgba (255, 0, 0, 1.0)

Various colors with alpha = 0.3:

This is rgba (0,0,0,0.3): Black

This is rgba (255,0,0,0.3): Red

This is rgba (0,255,0,0.3): Green

This is rgba (0,0,255,0.3): Blue

This is rgba (192,192,192,0.3): Grey

This is rgba (255,255,0,0.3): Yellow

This is rgba (255,0,255,0.3): Cerise

This is rgba (255,255,255,0.3): White