CSS Colors

CSS Colors property is used to set color in web page. CSS allows you to Declare Color for both Foreground and Background.

From Foreground Color we mean Color Colors, Border Color, Outlines, Text Colors, and Elements in Color Settings. You can easily Declare Color for any HTML Element.

CSS Color Adding Methods

There are many ways to Declare Color. But, not all ways are supported by all browsers. So we are talking about three prevailing methods here. These methods are supported by all the browsers.

Three Popular Ways to Add a CSS Color:

  • Hex Value
  • RGB Value
  • Color Name

Hex Value

Hex means hexadecimal Hexadecimal Code is a 6 digit code. Which contains the hex value of red, green and blue colors, respectively. The first two digits represent the red, the middle two points green and the last two digits represent the blue.

Hexadecimal values ​​are Alphanumeric. Including both Alphabets and Numbers. You can type Hex Value in either type of lowercase or uppercase. As Lowercase is easy to write and Uppercase is easy to read.

Example

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1>

<p>In HTML, you can specify colors using Hex values.</p>

</body>
</html>

RGB Value

RGB is made up of three words. In which R stands for Red, G stands for Green and B means Blue. RGB values ​​are written by RGB. You can also Declare RGB Value in Percent.

RGB shows the intensity of any color between 0 and 255. The more value you would declare to a Color, the more color it will appear in Color.

Example

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>
<h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>
<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>
<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>

<p>In HTML, you can specify colors using RGB values.</p>

</body>
</html>

Color Name

You can Declare Color Value with Color Name as well. Which are the easiest way. But, you can not declare all the colors to their name. Nor is it possible to do this.

Declare Color by their name is simple, but do not support ColorName by all browser. Hence this method is not used much.

One of the reasons for this is that we can not even remember the names of human colors. And all colors can not be named. Because the potential number of colors is equal to 255x255x255.

Example

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:red;">red</h1>
<h1 style="background-color:green;">green</h1>
<h1 style="background-color:slateblue;">slateblue</h1>
<p>In HTML, you can specify colors using Color Name.</p>

</body>
</html>