Colors in CSS


css Colors in CSS Rgb Color

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>

HSL COLOR

You can use HSL values to obtain desire result.

HUE

This is expressed as an angle (between 0 and 360 degrees).

SATURATION

This is expressed as a percentage.

LIGHTNESS

This is expressed as a percentage with 0% being white, 50% being normal, and 100% being black.

ALPHA

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 Rgb Color Chapter Next »