Tutorials Tonight's Logo
Follow Us

CSS COLOR


Color values in CSS are used to specify colors to HTML elements. Generally this property is used to specify color of the text.

Example:

Red
Green
Blue
Gold
Sienna

.box {  
    border : 3px solid red;  
}
▶ Run the code

Defining CSS color

CSS provides us various methods by which we can define color values.

The three main methods to define colors in CSS are:

  1. RGB value
  2. HEX value
  3. HSL value



1).RGB value

One of the ways to define color in CSS is RGB value.color value can be specified using rgb() property.

rgb(red, green,blue)

rgb() property is defined by setting three numerical values separated by commas in this property. Each define value for red,green and blue.

Example:

<h2 style="color:rgb(200,20,200)">You are learning RGB values.</h2>
<p style="color:rgb(200,20,200)">i am colored using RGB value.</p>
▶ Run the code

2).HEX value

Another way to define color in CSS is HEX value.color in HEX() is defined using the hexadecimal value.

Color is defined as #rrggbb() where rr represent color red,gg represent color green and bb represent color blue.

Example:

<h2 style="color:#b93bca">You are learning HEX values.</h2>
<p style="color:#b93bca">i am colored using HEX value.</p>
▶ Run the code

3).HSL value

It is also a way to define color in CSS.color value can be specified using hsl() property.

hsl() property is defined by setting three values separated by commas in this property.

hsl(hue,saturation,lightness)

In hsl() property hue defines color. Its degree on color wheel 0 is red,120 is green and 240 is blue. Saturation is a shade of grey in percentage value 0% means grey shade 100% means full color. lightness is also a percentage value where 0% is black,50% is nothing and 100% is white.

Example:

<h2 style="color:hsl(120,120%,120%)">You are learning HSL values.</h2>
<p style="color:rgb(120,120%,120%)">i am colored using HSL value.</p>
▶ Run the code

More Learning

Want to learn more about programming and web development? We have a few recommendations for you.


Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.