HTML Color
HTML colors are specified with predefined color names, or with
RGB, HEX, HSL, RGBA, or HSLA values.
Color Names
In HTML, a color can be specified by using a color name:
Tomato
Orange
Blue
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.
Example
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
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.
Example
<h1 style="color:Tomato;">Hello World</h1>
<p style="color: Blue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Border Color
You can set the color of borders:
Hello World
Hello World
Hello World
Example
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid Blue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
Color Values
In HTML, colors can also be specified using RGB values, HEX
values, HSL values, RGBA values, and HSLA values.
The following three <div> elements have their background
color set with RGB, HEX, and HSL values:
rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)
The following two <div> elements have their background color
set with RGBA and HSLA values, which add an Alpha channel to the color (here we
have 50% transparency):
Example
<h1 style="background-color:rgb(255, 99,
71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%,
64%);">...</h1>
<h1 style="background-color:rgba(255, 99,
71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%,
64%, 0.5);">...</h1>
