Horje
How to create HTML RGBA Color Values

RGBA color values are an extension of RGB color values with an Alpha channel - which specifies the opacity for a color.

An RGBA color value is specified with:

rgba(red, green, blue, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):

Experiment by mixing the RGBA values below:


Example of HTML RGBA Color Values

<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>

Full Example of HTML RGBA Color Values

index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>

</body>
</html>

Output should be:

Full Example of HTML RGBA Color Values





Related Articles
What is HTML RGB and RGBA Colors HTML RGB and RGBA Colors
How to create HTML Shades of Gray Color HTML RGB and RGBA Colors
How to create HTML RGBA Color Values HTML RGB and RGBA Colors

Single Articles
Example of HTML RGBA Color ValuesHTML RGB and RGBA Colors
Full Example of HTML RGBA Color ValuesHTML RGB and RGBA Colors

Read Full:
HTML RGB and RGBA Colors
Category:
Web Tutorial
Sub Category:
HTML RGB and RGBA Colors
Uploaded:
1 year ago
Uploaded by:
Admin
Views:
59


Reffered: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_color_rgba

Share on: