CSS colors Colors may be specified as an RGB, HEX, HSL, RGBA, HSLA values or according to their common English names in some cases.
<html>
<body>
<h1 style="background-color:RED;"> red</h1>
<h1 style="background-color:Green;">Green</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:Blue;">Blue</h1>
<h1 style="background-color:Lime;">Lime</h1>
<h1 style="background-color:Yellow;">Yellow</h1>
<h1 style="background-color:Aqua;">Aqua</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>
In RGB color R means Red color intensity,G means Green color intensity,B means blue color intensity. You can change values of these colors to achieve desire result.
Example<html>
<body>
<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 255, 0);">rgb(0, 255, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
</body>
</html>
<html>
<body>
You can use Hex values to obtain desire result.
Example<html>
<body>
<h1 style="background-color:0000bb;">#0000bb</h1>
<h1 style="background-color:#dd82dd;">#dd82dd</h1>
<h1 style="background-color:#cca500;">#cca500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1>
</body>
</html>
You can use HSL values to obtain desire result.
This is expressed as an angle (between 0 and 360 degrees).
This is expressed as a percentage.
This is expressed as a percentage with 0% being white, 50% being normal, and 100% being black.
This is expressed as a number between 0 and 1.0. For example, 0.5 represents 50% transparency, and 0.75 represents 75% transparency.
Example<html>
<style>
body {
background-color: #C8C8C8;
background-color: hsl(0,0%,78%);}
p {
background-color: #ffffff;
background-color: hsla(0,100%,100%,0.5);}
</style>
<body>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<p>
web engineering is an interesting subject.
</p>
</body>
</html>
Shades of grey colors can be obtain by using equal values in Hexa.
Example<html>
<body>
<h1 style="background-color:#111111;">#111111</h1>
<h1 style="background-color:#4f4f4f;">4f4f4f</h1>
<h1 style="background-color:#727272;">#727272</h1>
<h1 style="background-color:#9a9a9a;">#9a9a9a</h1>
<h1 style="background-color:#c0c0c0;">#c0c0c0</h1>
<h1 style="background-color:#dddddd;">#dddddd</h1>
<p>By using equal values for red, green, and blue, you will achieve different shades of gray</p>
</body>
</html>
Shades of different grey colors can be obtain in HSLA same as HSL but in this alpha is involve which is expressed as a number between 0 and 1.0. For example, 0.5 represents 50% transparency, and 0.75 represents 75% transparency.
<html>
<body>
<h1 style="background-color:hsla(10, 100%, 64%, 0);">hsla(10, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(10, 100%, 64%, 0.2);">hsla(10, 100%, 64%, 0.2)</h1>
<h1 style="background-color:hsla(10, 100%, 64%, 0.4);">hsla(10, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(10, 100%, 64%, 0.6);">hsla(10, 100%, 64%, 0.6)</h1>
<h1 style="background-color:hsla(10, 100%, 64%, 0.8);">hsla(10, 100%, 64%, 0.8)</h1>
<h1 style="background-color:hsla(10, 100%, 64%, 1);"> hsla(10, 100%, 64%, 1)</h1>
</body>
</html>
You can make transparent colors by using the RGBA color value.
Example<html>
<body>
<h1 style="background-color:rgba(200, 88, 72, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(200, 88, 72, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(200, 88, 72, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(200, 88, 72, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(200, 88, 72, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(200, 88, 72, 1);">rgba(255, 99, 71, 1)</h1>
</body>
</html>