HTML Colors

HTML Colors

 

 

HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

Color Names

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

Tomato
 
 
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray
 

<!DOCTYPE html>

<html>

<body>

 

<h1 style=”background-color:Tomato;”>Tomato</h1>

<h1 style=”background-color:Orange;”>Orange</h1>

<h1 style=”background-color:DodgerBlue;”>DodgerBlue</h1>

<h1 style=”background-color:MediumSeaGreen;”>MediumSeaGreen</h1>

<h1 style=”background-color:Gray;”>Gray</h1>

<h1 style=”background-color:SlateBlue;”>SlateBlue</h1>

<h1 style=”background-color:Violet;”>Violet</h1>

<h1 style=”background-color:LightGray;”>LightGray</h1>

 

</body>

</html>

 

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

HTML supports 140 standard color names.


Background Color

You can set the background color for HTML elements:

Hello World


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

<!DOCTYPE html>

<html>

<body>

 

<h1 style=”background-color:DodgerBlue;”>Hello World</h1>

 

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

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

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

</p>

 

</body>

</html>

 

Hello World

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

Text Color

You can set the color of text:

Hello World

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

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

<!DOCTYPE html>

<html>

<body>

 

<h3 style=”color:Tomato;”>Hello World</h3>

 

<p style=”color:DodgerBlue;”>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

 

<p style=”color:MediumSeaGreen;”>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

 

</body>

</html>

 

Hello World

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

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

Border Color

You can set the color of borders:

Hello World

Hello World

Hello World

<!DOCTYPE html>

<html>

<body>

 

<h1 style=”border: 2px solid Tomato;”>Hello World</h1>

 

<h1 style=”border: 2px solid DodgerBlue;”>Hello World</h1>

 

<h1 style=”border: 2px solid Violet;”>Hello World</h1>

 

</body>

</html>

 

Hello World

Hello World

Hello World

Color Values

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

Same as color name “Tomato”:

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

Same as color name “Tomato”, but 50% transparent:

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)

<!DOCTYPE html>

<html>

<body>

 

<p>Same as color name “Tomato”:</p>

 

<h1 style=”background-color:rgb(255, 99, 71);”>rgb(255, 99, 71)</h1>

<h1 style=”background-color:#ff6347;”>#ff6347</h1>

<h1 style=”background-color:hsl(9, 100%, 64%);”>hsl(9, 100%, 64%)</h1>

 

<p>Same as color name “Tomato”, but 50% transparent:</p>

<h1 style=”background-color:rgba(255, 99, 71, 0.5);”>rgba(255, 99, 71, 0.5)</h1>

<h1 style=”background-color:hsla(9, 100%, 64%, 0.5);”>hsla(9, 100%, 64%, 0.5)</h1>

 

<p>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.</p>

 

</body>

</html>

 

Same as color name “Tomato”:

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

Same as color name “Tomato”, but 50% transparent:

rgba(255, 99, 71, 0.5)

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

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.