Colors in CSS

css Colors in CSS Different Css Colors

CSS Color Types

CSS colors Colors may be specified as an RGB, HEX, HSL, RGBA, HSLA values or according to their common English names in some cases.

Common colors

Example <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>

RGB color

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>

HEX color

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.

HSLA Color Values

Example <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>

RGBA Color Values

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>
css Different Css Colors Chapter Next »