HTML Colors

HTML colors help you to make your webpage more attractive and interactive.

With the help of HTML colors, you can set the color of the background, the color of text, the color of borders, RGB values, HEX values, HSL values, RGBA values, HSLA values, and others.

Either predefined color names or RGB, HEX, HSL, RGBA, HSLA values are used to specify the HTML colors.

Now, in this chapter, you will learn how to specify HTML colors using different ways.

Color Names

HTML allows you to specify a color using a color name.

HTML supports more than 130 standard color names, where commonly used HTML color names include white, black, Olive, Yellow, aqua, purple, blue, orange, silver, gray etc.

Example:

<!DOCTYPE html>
<html>
<body>
<h2 style="background-color:Tomato;"> Mango </h2>
<h2 style="background-color:Orange;"> Orange </h2>
<h2 style="background-color:SlateBlue;"> Strawberry </h2>
<h2 style="background-color:Violet;"> Watermelon </h2>
<h2 style="background-color:MediumSeaGreen;"> Pineapple </h2>
</body>
</html>

Background Color

HTML allows you to set the background color of all HTML elements.

Example:

<!DOCTYPE html>
<html>
<body>
<h2 style="background-color:Yellow;"> Good Morning </h2>
<p style="background-color:DarkOrange;"> Have a positive and wonderful day </p>
</body>
</html>

Text Color

HTML allows you to set the specific color to the text.

Example:

<!DOCTYPE html>
<html>
<body>
<h2 style="color:Yellow;"> Good Morning </h2>
<p style="color:DarkOrange;"> Have a positive and wonderful day </p>
</body>
</html>

Border Color

HTML allows you to set the specific color to the border.

Example:

<!DOCTYPE html>
<html>
<body>
<h2 style="border:2px solid Tomato;"> Good Morning </h2>
<p style="border:2px solid DarkOrange;"> Have a positive and wonderful day </p>
</body>
</html>

Color Values

As we have earlier said that in HTML, you can specify the color using color names or color values. Now, here you will learn how to set the different types of color values.

For example, a color ‘Green‘ can be specified with color values as:

RGB value - rgb(0,128,0)

HEX value - #008000

HSL value - hsl(120, 100%, 25%)

RGBA value - rgba(0, 255, 0, 0.3)

HSLA value - hsla(120,100%,50%,0.3)

Example:

<!DOCTYPE html>
<html>
<body>
<p> Different color values of Green </p>
<h2 style="background-color:rgb(0,128,0);"> Good Morning </h2>
<h2 style="background-color:#008000;"> Good Morning </h2>
<h2 style="background-color:hsl(120, 100%, 25%);"> Good Morning </h2>
<h2 style="background-color:rgba(0, 255, 0, 0.3);"> Good Morning </h2>
<h2 style="background-color:hsla(120,100%,50%,0.3);"> Good Morning </h2>
</body>
</html>

Let’s discuss these color values in detail

RGB Value

RGB value is defined using this formula

rgb(red, green, blue)

which means a mixture of 3 colors is used to give the full range.


Here, each parameter has a value between 0 and 255 i.e. total 256 values.

When the RGB value is rgb(255, 0, 0), it means the color is red as it has highest value 255, whereas others have 0.

If it is rgb(255,90,70), the red is set to value 255, green is set to 90 and blue is set to 70. The mixture of all these values will give the actual color.

If you want shades of gray, the values of all parameters should be equal, like:

rgb(120, 120, 120)

rgb(180, 180, 180)

The second one will display a light shade of gray than the first one.

HEX Value

In HTML, the color can also be specified using hexadecimal value, it is like:

#rrggbb

Where rr signifies red, gg signifies green, bb signifies blue and all these parameters have a hexadecimal value between 00 and ff, similar to decimal value from 0 to 255.

When the HEX value is #ff0000, it means the displayed color is red which is set to the highest value ff, whereas gg and bb values are set to 00.

If you want shades of gray, the values of all parameters should be equal, like:

#787878

#f0f0f0

The second one will display a light shade of gray than the first one.

HSL Value

In HTML, the color can also be specified using hue, saturation and lightness values, it is like:

hsl(hue, saturation, lightness)

Here, hue specifies the value from 0 to 360, where 0 signifies red, 120 signifies green and 240 signifies blue.

Saturation specifies the percentage value, where 0% signifies a shade of gray and 100% signifies the full color.

Lightness also specifies the percentage value like saturation but in descending order, like 0% signifies black, 100% signifies white and 50% signifies neither dark nor light color.

If you want shades of gray, the values of hue and saturation is set to be 0, whereas you need to adjust the lightness from 0% to 100% to get darker to lighter shades, like:

hsl(0, 0%, 25%)

hsl(0, 0%, 90%)

The second one will display a lighter shade of gray than the first one.

RGBA Value

RGBA values are actually the extension of RGB values but with alpha channel, which is used to specify the opacity of a color.

RGBA color values are used to make transparent colors. It is like:

rgba(red, green, blue, alpha)

where the value of the alpha parameter is from 0.0 (fully transparent) and 1.0 (zero transparent)

rgba(255, 99, 71, 0) – Fully transparent

rgba(255, 99, 71, 0.6) – Partial transparent

rgba(255, 99, 71, 1) – No transparent

HSLA Value

HSLA values are actually the extension of HSL values but with alpha channel, which is used to specify the opacity of a color.

HSLA color values are used to make transparent colors. It is like:

hsla(hue, saturation, lightness, alpha)

where the value of the alpha parameter is from 0.0 (fully transparent) and 1.0 (zero transparent)

hsla(9, 100%, 64%, 0) – Fully transparent

hsla(9, 100%, 64%, 0.6)– Partial transparent

hsla(9, 100%, 64%, 1)– No transparent