HTML Colors| Courses

It is very important for colors to give your website a good look and feel. You can specify colors on page level via < body > tags, or use bgcolor attribute for each tag.

The <body> tag has following attributes which can be used to set different colors −

bgcolor − sets a color for the background of the page.
text − sets a color for the body text.
alink − sets a color for active links or selected links.
link − sets a color for linked text.
vlink − sets a color for visited links − that is, for linked text that you have already clicked on.

There are following three different methods to set colors in your web page

Color names − You can specify color names directly like green, blue or red.
Hex codes − A six-digit code representing the amount of red, green, and blue that makes up the color.
Color decimal or percentage values − This value is specified using the rgb( ) property.

In HTML, a color can be specified by using a color name:

Tomato	Orange	DodgerBlue	MediumSeaGreen
Gray	SlateBlue	Violet	LightGray

Example:

<!DOCTYPE html>

<html>

<body>

<h2 style="background-color:Tomato;">Tomato</h2>

<h2 style="background-color:Orange;">Orange</h2>

<h2 style="background-color:DodgerBlue;">DodgerBlue</h2>

<h2 style="background-color:MediumSeaGreen;">MediumSeaGreen</h2>

<h2 style="background-color:Gray;">Gray</h2>

<h2 style="background-color:SlateBlue;">SlateBlue</h2>

<h2 style="background-color:Violet;">Violet</h2>

<h2 style="background-color:LightGray;">LightGray</h2>

</body>
</html>

Output:

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

You can set the background color for HTML elements:

Example:

<!DOCTYPE html>

<html>

<body>

<h2 style="background-color:yellow;">I have a background color.</h2>

<p style="background-color:Tomato;">

Lorem ipsum dolor sit amet,  nibh euismod ex ea commodo consequat tincidunt ut laoreet dolore magna aliquam erat volutpat. 
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip consectetuer adipiscing elit, 
sed diam nonummy laoreet dolore magna..

</p>

</body>
</html>

Output:

I have a background color.

Lorem ipsum dolor sit amet, nibh euismod ex ea commodo consequat tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip consectetuer adipiscing elit, sed diam nonummy laoreet dolore magna..

You can set the color of text:

Example:

<!DOCTYPE html>
<html>
<body>

<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod, consectetuer adipiscing elit tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, suscipit lobortis nisl ut aliquip ex ea commodo consequat quis nostrud exerci tation ullamcorper.</p>

</body>
</html>

Output:

Hello World

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

Ut wisi enim ad minim veniam, suscipit lobortis nisl ut aliquip ex ea commodo consequat quis nostrud exerci tation ullamcorper.

You can set the color of borders:

Example:

<!DOCTYPE html>
<html>
<body>

<h2 style="border: 2px solid Tomato;">Hello World</h2>
<h2 style="border: 2px solid DodgerBlue;">Hello World</h2>
<h2 style="border: 2px solid Violet;">Hello World</h2>

</body>
</html>

Output:

Hello World

In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values:

Same as color name "Orange":

Example:

<!DOCTYPE html>

<html>

<body>

<p>Same as color name "Orange":</p>

<h2 style="background-color:rgb(255,165,0);">rgb(255,165,0)</h2>

<h2 style="background-color:#FFA500;">#FFA500</h2>

<h2 style="background-color:hsl(0.11, 100%, 50%);\">hsl(0.11, 100%, 50%)</h2>
<p>Same as color name "Orange", but 50% transparent:</p>

<h2 style="background-color:rgba(255,165,0,0.5);">rgba(255,165,0, 0.5)</h2>

<h2 style="background-color:hsla(0.11, 100%, 50%, 0.5);">hsla(0.11, 100%, 50%, 0.5)</h2>

</body>

</html>

Note: In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.

Output:

Same as color name "Orange":

rgb(255,165,0)

#FFA500

hsl(0.11, 100%, 50%)

Same as color name "Orange", but 50% transparent:

rgba(255,165,0, 0.5)

hsla(0.11, 100%, 50%, 0.5)

This color value is specified using the rgb( ) property. This is a three - value property, one for red, green, and blue. The value can range from 0 to 255 or a percentage.

Note: All the browsers does not support rgb() property of color so it is recommended not to use it.

This is a list of few colors that display RGB values.

**RGB Values**
	rgb(255, 0, 0)
	rgb(0, 0, 255);
	rgb(60, 179, 113)
	rgb(238, 130, 238)
	rgb(255, 165, 0)
	rgb(106, 90, 205)

Shades of gray are often defined using equal values for all the 3 light sources:

Example:

<!DOCTYPE html>
<html>
<body>

<h2 style="background-color:rgb(0, 0, 0);">rgb(0, 0, 0)</h2>

<h2 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h2>

<h2 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h2>

<h2 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h2>

<h2 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h2>

<h2 style="background-color:rgb(255, 255, 255);">rgb(255, 255, 255)</h2>

</body>

</html>

Output:

rgb(0, 0, 0)

rgb(60, 60, 60)

rgb(120, 120, 120)

rgb(180, 180, 180)

rgb(240, 240, 240)

rgb(255, 255, 255)

Note:By using equal values for red, green, and blue, you will get different shades of gray.

In HTML, a color can be specified using a hexadecimal value in the form:

#rrggbb

Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).

For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00).

Example:

<!DOCTYPE html>

<html>

<body>

<h2 style="background-color:#ff0000;">#ff0000</h2>

<h2 style="background-color:#0000ff;">#0000ff</h2>

<h2 style="background-color:#3cb371;">#3cb371</h2>

<h2 style="background-color:#ee82ee;">#ee82ee</h2>

<h2 style="background-color:#ffa500;">#ffa500</h2>

<h2 style="background-color:#6a5acd;">#6a5acd</h2>

</body>

</html>

Output:

#ff0000

#0000ff

#3cb371

#ee82ee

#ffa500

#6a5acd

In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the form:

hsl(hue, saturation, lightness)

The color wheel Hue is a grade between 0 and 360. Saturation is a percentage value;

it is a gray shade; 0% and 100% is a full color; 0 is red, 120 are green and 240 is blue.

Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white

Example:

<!DOCTYPE html>

<html>

<body>

<h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>

<h2 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h2>

<h2 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h2>

<h2 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h2>

<h2 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h2>

<h2 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h2>

</body>

</html>

Output:

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)

Saturation can be described as the intensity of a color. The pure color is 100 percent, no gray shades 50 percent, but the color is still visible. You ca n't see the color any more, 0 per cent is totally gray.

Example:

<!DOCTYPE html>
<html>
<body>

<h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>

<h2 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h2>

<h2 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h2>

<h2 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h2>

<h2 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h2>

<h2 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h2>

<p>With HSL colors, less saturation mean less color. 0% is completely gray.</p>

</body>
</html>

Output:

hsl(0, 100%, 50%)

hsl(0, 80%, 50%)

hsl(0, 60%, 50%)

hsl(0, 40%, 50%)

hsl(0, 20%, 50%)

hsl(0, 0%, 50%)

Note: With HSL colors, less saturation mean less color. 0% is completely gray.

The lightness of a color can be described as the light you want the color to display, where 0 percent means that no light (black) means, 50 percent (not dark and neither light).

Example:

<!DOCTYPE html> <html> <body> <h2 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h2> <h2 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h2> <h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2> <h2 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h2> <h2 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h2> <h2 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h2> <p>With HSL colors, 0% lightness means black, and 100 lightness means white.</p> </body> </html>

Output:

hsl(0, 100%, 0%)

hsl(0, 100%, 25%)

hsl(0, 100%, 50%)

hsl(0, 100%, 75%)

hsl(0, 100%, 90%)

hsl(0, 100%, 100%)

Note: With HSL colors, 0% lightness means black, and 100 lightness means white.

RGBA color values are an extension of RGB alpha channel color values, indicating a color opacity.

An RGBA color value is specified with:

rgba(red, green, blue, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):

Example:

<!DOCTYPE html>

<html>

<body>

<h2 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h2>

<h2 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h2>

<h2 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h2>

<h2 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h2>

<h2 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h2>

<h2 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h2><p>You can make transparent colors by using the RGBA color value.</p>

</body>

</html>

Output:

rgba(255, 99, 71, 0)

rgba(255, 99, 71, 0.2)

rgba(255, 99, 71, 0.4)

rgba(255, 99, 71, 0.6)

rgba(255, 99, 71, 0.8)

rgba(255, 99, 71, 1)

Note: The RGBA color value can be used to create transparent colours.

HSLA color values are an alpha channel extension of HSL color values, which specify the color opacity.

An HSLA color value is specified with:

hsla(hue, saturation, lightness, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):

Example:

<!DOCTYPE html>
<html>
<body>

<h2 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h2>

<h2 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h2>

<h2 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h2>

<h2 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h2>
<h2 style=\"background-color:hsla(9, 100%, 64%, 0.8);\">hsla(9, 100%, 64%, 0.8)</h2>

<h2 style=\"background-color:hsla(9, 100%, 64%, 1);\">hsla(9, 100%, 64%, 1)</h2><p>You can make transparent colors by using the HSLA color value.</p>

</body>
</html>

Output:

HTML Colors

What is HTML Color ?

HTML Color Coding Methods

Color Names

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

Background Color

Output:

I have a background color.

Text Color

Hello World

Border Color

Hello World

Hello World

Hello World

Color Values

rgb(255,165,0)

#FFA500

hsl(0.11, 100%, 50%)

rgba(255,165,0, 0.5)

hsla(0.11, 100%, 50%, 0.5)

HTML Colors - RGB Values

rgb(0, 0, 0)

rgb(60, 60, 60)

rgb(120, 120, 120)

rgb(180, 180, 180)

rgb(240, 240, 240)

rgb(255, 255, 255)

HEX Value

#ff0000

#0000ff

#3cb371

#ee82ee

#ffa500

#6a5acd

HSL Value

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)

Saturation

hsl(0, 100%, 50%)

hsl(0, 80%, 50%)

hsl(0, 60%, 50%)

hsl(0, 40%, 50%)

hsl(0, 20%, 50%)

hsl(0, 0%, 50%)

Lightness

hsl(0, 100%, 0%)

hsl(0, 100%, 25%)

hsl(0, 100%, 50%)

hsl(0, 100%, 75%)

hsl(0, 100%, 90%)

hsl(0, 100%, 100%)

RGBA Value

rgba(255, 99, 71, 0)

rgba(255, 99, 71, 0.2)

rgba(255, 99, 71, 0.4)

rgba(255, 99, 71, 0.6)

rgba(255, 99, 71, 0.8)

rgba(255, 99, 71, 1)

HSLA Value

hsla(9, 100%, 64%, 0)

hsla(9, 100%, 64%, 0.2)

hsla(9, 100%, 64%, 0.4)

hsla(9, 100%, 64%, 0.6)

hsla(9, 100%, 64%, 0.8)

hsla(9, 100%, 64%, 1)

HTML Tutorials