CSS Color

In the CSS color tutorial, today we will explain “how can you define color values?”

With the help of CSS color property, you can apply text color in an element.

CSS Color Property Syntax

Let’s see the CSS color property syntax, which is given below:

color: value;

You can define color values in various form, which is given below:

  • Keyword or Name: You can define color name such as color: red;
  • HEX values: You can define color HEX values such as color: #cc6347;
  • HSL values: You can define color HSL values such as color: hsl(9, 100%, 65%);
  • RGB values: You can define color RGB values such as color: rgb(255, 99, 72);
  • RGBA values: You can define color RGBA values such as color: rgba(255, 99, 71, 0.4);
  • HSLA values: You can define color HSLA values such as color: hsla(9, 100%, 64%, 0.6);

Let’s see the given example to understand how color properties works:

CSS Colors Examples

Examples- #1

In this example we use Keyword or Name as a color value.

<!DOCTYPE html> 
<html> 
<head> 
<style> 

.bor-test{
 color:green;}

h3{
color:crimson;
}
 
</style> 
</head> 
<body> 
<h3>Here we use color green.</h3>
<p class="bor-test">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
 
</body> 
</html>

 

Output

Here we use color green.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

 

Examples- #2

In this example we use HEX values as a color value.

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.bor-test {
 color:#0000FF;
}
h3{
color:#FF00FF;
}
 
</style> 
</head> 
<body> 
<h3>Here we use HEX value for color.</h3>
<p class="bor-test">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
 
</body> 
</html>

 

Output

Here we use HEX value for color.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

 
 

Examples- #3

In this example we use RGB values as a color value.

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.bor-test {
 color:rgb(0,255,0);
}
h3{
color:rgb(255,255,0;
}
 
</style> 
</head> 
<body> 
<h3>Here we use RGB value for color.</h3>
<p class="bor-test">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
 
</body> 
</html>

 

Output

Here we use RGB value for color.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

 

Pin It on Pinterest

Shares
Share This