Free Web Development Online Tutorials, Learn to Code
how to write Css Color Codes, get color from hex code in css style, web page designing

Use Color using CSS Code Example

We can write CSS Color Codes in three ways.

You need to play with color in webpage very often; Using CSS there are different ways to specify color for any HTML element.

  • Color using Hex Code
  • Color using RGB
  • Color using Name

CSS Color using Hex Code Example

We can form color using hex code, this is the most common approach that all web designer use in their web page designing.

<style>
.splDiv
{
    color: #000;
    background-color: #dcdcdc;
}
</style>

Here are some example of getting css color code using hex number

color hex code
#df2020
style="background-color:#df2020;"
color hex code
#df8020
style="background-color:#df8020;"

CSS Color using RGB Example

This approach is not so popular in web designing, but graphic designer most of the time use rgb or cmyk, so to match the exact color for any graphic we can use rgb in css code to form any color.

<style>
.splDiv
{
color:rgb(186,32,24);
    background-color: rgb(255,255,255);
}
</style>

Here are some example of getting css color code using rgb number

rgb color
rgb(128, 223, 32)
style="background-color:rgb(128, 223, 32);"
rgb color
rgb(223, 223, 32)
style="background-color:rgb(223, 223, 32);"

CSS Color Name Example

Color names are NOT case-sensitive (it doesn't matter whether you use lowercase or UPPERCASE)

<style>
.splDiv
{
    color: white;
    background-color: red;
}
</style>

getting css color using color name as defined above.

color name
red
style="background-color:red;"
color name
green
style="background-color:green;"

Set color for html element

You can define color to any html element, here are some examples

<div class="splDiv"></div>
<span class="splDiv"></span>
<p class="splDiv"></p>

You can use any code (hex, name, rgb), the result will be same.

CSS Style Examples