HTML Colors
HTML colors can be set with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.
Color Names
A color can be set using a color name. HTML supports 140 standard color names.
Example
Several colors shown by name.
Prompt
A page showing several CSS color names as colored blocks: Tomato, Orange, DodgerBlue, MediumSeaGreen, Gray, SlateBlue, Violet, and LightGray, each block filled with its own color.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Names</title>
</head>
<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>
Background Color
You can set the background color of HTML elements with the background-color property.
Example
A heading and paragraph with colored backgrounds.
Prompt
A page setting background color with color names: an h1 with a DodgerBlue background reading "Hello World" and a paragraph with a Tomato background of lorem ipsum text.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bg Color</title>
</head>
<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.</p>
</body>
</html>
Text Color
You can set the color of text with the color property.
Example
A heading and paragraphs in different text colors.
Prompt
A page setting text color with color names: a Tomato h1 "Hello World" and two paragraphs of lorem ipsum colored DodgerBlue and MediumSeaGreen.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Color</title>
</head>
<body>
<h1 style="color:Tomato;">Hello World</h1>
<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>
Border Color
You can set the color of borders with the border property.
Example
Headings with borders in different colors.
Prompt
A page setting border color with color names: three h1 headings each reading "Hello World" with a 2px solid border in Tomato, DodgerBlue, and Violet.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border Color</title>
</head>
<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>
Color Values
Colors can also be set with RGB, HEX, HSL, RGBA, and HSLA values. RGB, HEX, and HSL all describe the same color in different ways. RGBA and HSLA add an Alpha channel, which sets transparency (for example, 50% see-through).
Example
The same color set with RGB, HEX, HSL, and the transparent RGBA and HSLA forms.
Prompt
A page showing the same color set as a background using different value formats: RGB rgb(255, 99, 71), HEX #ff6347, HSL hsl(9, 100%, 64%), plus RGBA and HSLA versions at 50% transparency.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Values</title>
</head>
<body>
<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>
<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>
</body>
</html>
Learn more about Color Values
You will learn more about RGB, HEX, and HSL in the next chapters.