CSS Colors
In CSS, you can set a color using a predefined color name, or with an RGB, HEX, HSL, RGBA, or HSLA value.
CSS Color Names
A color can be set using one of the predefined color names.
CSS and HTML support 140 standard color names.
Example
Each box uses a different named color as its background.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</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>
CSS Background Color
You can set the background color of HTML elements.
Example
The heading and paragraph use named colors for their backgrounds.
<h1> a DodgerBlue background and a <p> a Tomato background, using inline styles with named colors.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</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>
CSS Text Color
You can set the color of the text.
Example
The heading and paragraphs each use a named text color.
<h1> Tomato, one <p> DodgerBlue, and another <p> MediumSeaGreen, using inline styles with named colors.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</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>
CSS Border Color
You can set the color of borders.
Example
Each heading has a solid border in a different named color.
<h1> elements a 2px solid border in Tomato, DodgerBlue, and Violet, using inline styles.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</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>
CSS Color Values
Colors can also be set using RGB, HEX, HSL, RGBA, and HSLA values.
For example, these all give the same color as the name Tomato: rgb(255, 99, 71), #ff6347, and hsl(9, 100%, 64%). The RGBA and HSLA versions add transparency.
Example
The same color is written in several value formats, with the last two at 50% transparency.
<h1> elements with background colors written as: rgb(255, 99, 71), #ff6347, hsl(9, 100%, 64%) (all the same "Tomato"), then rgba(255, 99, 71, 0.5) and hsla(9, 100%, 64%, 0.5) (the same color at 50% transparency). Use inline styles.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</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.