HTML Colors
In HTML, we use colors for the text, background, shadows, borders, etc., of the HTML elements.
In HTML, we can specify color using any of the following.
- Predefined Colors
- RGB
- HEX
- HSL
- RGBA
- HSLA
HTML Predefined Color Names
There are 140 predefined color names. These color names are supported by all browsers.
All of these predefined color names are provided in the following example, displayed with the name against the actual color.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body > div {
margin: 5px;
}
body div div {
height: 50px;
width: 150px;
text-align: center;
line-height: 50px;
display: table-cell;
border-radius: 5px;
}
</style>
</head>
<body>
<div><div>aliceblue</div><div style="background:aliceblue"></div></div>
<div><div>antiquewhite</div><div style="background:antiquewhite"></div></div>
<div><div>aqua</div><div style="background:aqua"></div></div>
<div><div>aquamarine</div><div style="background:aquamarine"></div></div>
<div><div>azure</div><div style="background:azure"></div></div>
<div><div>beige</div><div style="background:beige"></div></div>
<div><div>bisque</div><div style="background:bisque"></div></div>
<div><div>black</div><div style="background:black"></div></div>
<div><div>blanchedalmond</div><div style="background:blanchedalmond"></div></div>
<div><div>blue</div><div style="background:blue"></div></div>
<div><div>blueviolet</div><div style="background:blueviolet"></div></div>
<div><div>brown</div><div style="background:brown"></div></div>
<div><div>burlywood</div><div style="background:burlywood"></div></div>
<div><div>cadetblue</div><div style="background:cadetblue"></div></div>
<div><div>chartreuse</div><div style="background:chartreuse"></div></div>
<div><div>chocolate</div><div style="background:chocolate"></div></div>
<div><div>coral</div><div style="background:coral"></div></div>
<div><div>cornflowerblue</div><div style="background:cornflowerblue"></div></div>
<div><div>cornsilk</div><div style="background:cornsilk"></div></div>
<div><div>crimson</div><div style="background:crimson"></div></div>
<div><div>cyan</div><div style="background:cyan"></div></div>
<div><div>darkblue</div><div style="background:darkblue"></div></div>
<div><div>darkcyan</div><div style="background:darkcyan"></div></div>
<div><div>darkgoldenrod</div><div style="background:darkgoldenrod"></div></div>
<div><div>darkgray</div><div style="background:darkgray"></div></div>
<div><div>darkgrey</div><div style="background:darkgrey"></div></div>
<div><div>darkgreen</div><div style="background:darkgreen"></div></div>
<div><div>darkkhaki</div><div style="background:darkkhaki"></div></div>
<div><div>darkmagenta</div><div style="background:darkmagenta"></div></div>
<div><div>darkolivegreen</div><div style="background:darkolivegreen"></div></div>
<div><div>darkorange</div><div style="background:darkorange"></div></div>
<div><div>darkorchid</div><div style="background:darkorchid"></div></div>
<div><div>darkred</div><div style="background:darkred"></div></div>
<div><div>darksalmon</div><div style="background:darksalmon"></div></div>
<div><div>darkseagreen</div><div style="background:darkseagreen"></div></div>
<div><div>darkslateblue</div><div style="background:darkslateblue"></div></div>
<div><div>darkslategray</div><div style="background:darkslategray"></div></div>
<div><div>darkslategrey</div><div style="background:darkslategrey"></div></div>
<div><div>darkturquoise</div><div style="background:darkturquoise"></div></div>
<div><div>darkviolet</div><div style="background:darkviolet"></div></div>
<div><div>deeppink</div><div style="background:deeppink"></div></div>
<div><div>deepskyblue</div><div style="background:deepskyblue"></div></div>
<div><div>dimgray</div><div style="background:dimgray"></div></div>
<div><div>dimgrey</div><div style="background:dimgrey"></div></div>
<div><div>dodgerblue</div><div style="background:dodgerblue"></div></div>
<div><div>firebrick</div><div style="background:firebrick"></div></div>
<div><div>floralwhite</div><div style="background:floralwhite"></div></div>
<div><div>forestgreen</div><div style="background:forestgreen"></div></div>
<div><div>fuchsia</div><div style="background:fuchsia"></div></div>
<div><div>gainsboro</div><div style="background:gainsboro"></div></div>
<div><div>ghostwhite</div><div style="background:ghostwhite"></div></div>
<div><div>gold</div><div style="background:gold"></div></div>
<div><div>goldenrod</div><div style="background:goldenrod"></div></div>
<div><div>gray</div><div style="background:gray"></div></div>
<div><div>grey</div><div style="background:grey"></div></div>
<div><div>green</div><div style="background:green"></div></div>
<div><div>greenyellow</div><div style="background:greenyellow"></div></div>
<div><div>honeydew</div><div style="background:honeydew"></div></div>
<div><div>hotpink</div><div style="background:hotpink"></div></div>
<div><div>indianred</div><div style="background:indianred"></div></div>
<div><div>indigo</div><div style="background:indigo"></div></div>
<div><div>ivory</div><div style="background:ivory"></div></div>
<div><div>khaki</div><div style="background:khaki"></div></div>
<div><div>lavender</div><div style="background:lavender"></div></div>
<div><div>lavenderblush</div><div style="background:lavenderblush"></div></div>
<div><div>lawngreen</div><div style="background:lawngreen"></div></div>
<div><div>lemonchiffon</div><div style="background:lemonchiffon"></div></div>
<div><div>lightblue</div><div style="background:lightblue"></div></div>
<div><div>lightcoral</div><div style="background:lightcoral"></div></div>
<div><div>lightcyan</div><div style="background:lightcyan"></div></div>
<div><div>lightgoldenrodyellow</div><div style="background:lightgoldenrodyellow"></div></div>
<div><div>lightgray</div><div style="background:lightgray"></div></div>
<div><div>lightgrey</div><div style="background:lightgrey"></div></div>
<div><div>lightgreen</div><div style="background:lightgreen"></div></div>
<div><div>lightpink</div><div style="background:lightpink"></div></div>
<div><div>lightsalmon</div><div style="background:lightsalmon"></div></div>
<div><div>lightseagreen</div><div style="background:lightseagreen"></div></div>
<div><div>lightskyblue</div><div style="background:lightskyblue"></div></div>
<div><div>lightslategray</div><div style="background:lightslategray"></div></div>
<div><div>lightslategrey</div><div style="background:lightslategrey"></div></div>
<div><div>lightsteelblue</div><div style="background:lightsteelblue"></div></div>
<div><div>lightyellow</div><div style="background:lightyellow"></div></div>
<div><div>lime</div><div style="background:lime"></div></div>
<div><div>limegreen</div><div style="background:limegreen"></div></div>
<div><div>linen</div><div style="background:linen"></div></div>
<div><div>magenta</div><div style="background:magenta"></div></div>
<div><div>maroon</div><div style="background:maroon"></div></div>
<div><div>mediumaquamarine</div><div style="background:mediumaquamarine"></div></div>
<div><div>mediumblue</div><div style="background:mediumblue"></div></div>
<div><div>mediumorchid</div><div style="background:mediumorchid"></div></div>
<div><div>mediumpurple</div><div style="background:mediumpurple"></div></div>
<div><div>mediumseagreen</div><div style="background:mediumseagreen"></div></div>
<div><div>mediumslateblue</div><div style="background:mediumslateblue"></div></div>
<div><div>mediumspringgreen</div><div style="background:mediumspringgreen"></div></div>
<div><div>mediumturquoise</div><div style="background:mediumturquoise"></div></div>
<div><div>mediumvioletred</div><div style="background:mediumvioletred"></div></div>
<div><div>midnightblue</div><div style="background:midnightblue"></div></div>
<div><div>mintcream</div><div style="background:mintcream"></div></div>
<div><div>mistyrose</div><div style="background:mistyrose"></div></div>
<div><div>moccasin</div><div style="background:moccasin"></div></div>
<div><div>navajowhite</div><div style="background:navajowhite"></div></div>
<div><div>navy</div><div style="background:navy"></div></div>
<div><div>oldlace</div><div style="background:oldlace"></div></div>
<div><div>olive</div><div style="background:olive"></div></div>
<div><div>olivedrab</div><div style="background:olivedrab"></div></div>
<div><div>orange</div><div style="background:orange"></div></div>
<div><div>orangered</div><div style="background:orangered"></div></div>
<div><div>orchid</div><div style="background:orchid"></div></div>
<div><div>palegoldenrod</div><div style="background:palegoldenrod"></div></div>
<div><div>palegreen</div><div style="background:palegreen"></div></div>
<div><div>paleturquoise</div><div style="background:paleturquoise"></div></div>
<div><div>palevioletred</div><div style="background:palevioletred"></div></div>
<div><div>papayawhip</div><div style="background:papayawhip"></div></div>
<div><div>peachpuff</div><div style="background:peachpuff"></div></div>
<div><div>peru</div><div style="background:peru"></div></div>
<div><div>pink</div><div style="background:pink"></div></div>
<div><div>plum</div><div style="background:plum"></div></div>
<div><div>powderblue</div><div style="background:powderblue"></div></div>
<div><div>purple</div><div style="background:purple"></div></div>
<div><div>rebeccapurple</div><div style="background:rebeccapurple"></div></div>
<div><div>red</div><div style="background:red"></div></div>
<div><div>rosybrown</div><div style="background:rosybrown"></div></div>
<div><div>royalblue</div><div style="background:royalblue"></div></div>
<div><div>saddlebrown</div><div style="background:saddlebrown"></div></div>
<div><div>salmon</div><div style="background:salmon"></div></div>
<div><div>sandybrown</div><div style="background:sandybrown"></div></div>
<div><div>seagreen</div><div style="background:seagreen"></div></div>
<div><div>seashell</div><div style="background:seashell"></div></div>
<div><div>sienna</div><div style="background:sienna"></div></div>
<div><div>silver</div><div style="background:silver"></div></div>
<div><div>skyblue</div><div style="background:skyblue"></div></div>
<div><div>slateblue</div><div style="background:slateblue"></div></div>
<div><div>slategray</div><div style="background:slategray"></div></div>
<div><div>slategrey</div><div style="background:slategrey"></div></div>
<div><div>snow</div><div style="background:snow"></div></div>
<div><div>springgreen</div><div style="background:springgreen"></div></div>
<div><div>steelblue</div><div style="background:steelblue"></div></div>
<div><div>tan</div><div style="background:tan"></div></div>
<div><div>teal</div><div style="background:teal"></div></div>
<div><div>thistle</div><div style="background:thistle"></div></div>
<div><div>tomato</div><div style="background:tomato"></div></div>
<div><div>turquoise</div><div style="background:turquoise"></div></div>
<div><div>violet</div><div style="background:violet"></div></div>
<div><div>wheat</div><div style="background:wheat"></div></div>
<div><div>white</div><div style="background:white"></div></div>
<div><div>whitesmoke</div><div style="background:whitesmoke"></div></div>
<div><div>yellow</div><div style="background:yellow"></div></div>
<div><div>yellowgreen</div><div style="background:yellowgreen"></div></div>
</body>
</html>
HEX Color Values
The format of hexadecimal color value is
#RRGGBB
where RR, GG, and BB are the red, green, and blue components of the color.
We can also provide an optional transparency as shown in the following.
#RRGGBBAA
where AA is for transparency.
The range of values for RR, GG, BB, and AA components is [00, FF]. We can provide any value from 00 to FF (including these).
We can also use shortcut format of these color values. The shortcut format is
#RGB
and with transparency
#RGBA
The following are some of the examples for valid hexadecimal color values.
#644 /* #RGB format */
#ff07 /* #RGBA format */
#ff00aa /* #RRGGBB format */
#ff00aa77 /* #RRGGBBAA format */
In the following HTML, we apply background colors for divs, using these hexadecimal color values.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {
display: inline-block;
margin:10px;
width: 100px;
height: 100px;
}
#div1 {
background: #644;
}
#div2 {
background: #ff07;
}
#div3 {
background: #ff00aa;
}
#div4 {
background: #ff00aa77;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>
RGB or RGBA Color Values
The format of RGB color value is
rgb(red, blue, green)
where red, blue, and green are integers in the range [0, 255] or percentage values in the range [0%, 100%] representing the respective components of the color.
The format of RGBA color value is
rgba(red, blue, green, alpha)
where alpha specifies the opacity. alpha takes value in the range [0.0, 1.0] where 0.0 is fully transparent, and 1.0 is fully opaque.
The following are some of the examples for valid hexadecimal color values.
rgb(24, 142, 255)
rgb(24, 142, 255, 0.5)
In the following HTML, we apply background colors for divs, using these RBG or RGBA color values.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {
display: inline-block;
margin:10px;
width: 100px;
height: 100px;
}
#div1 {
background: rgb(24, 142, 255);
}
#div2 {
background: rgb(24, 142, 255, 0.5);
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
HSL or HSLA Color Values
The format of HSL color value is
hsl(hue, saturation, lightness)
where
- hue is degree on the color wheel. The value of hue ranges from 0 to 360, where 0 indicates red, 120 indicates green and 240 indicates blue.
- saturation is the percentage of colorfulness. The value of saturation ranges from 0% to 100%, where 0% means no color and may result in a shade of gray, and 100% means full color.
- lightness is the percentage of light in the color. The value of saturation ranges from 0% to 100%, where 0% means black, and 100% means white.
The format of HSLA color value is
hsla(hue, saturation, lightness, alpha)
where alpha specifies the opacity. alpha takes value in the range of [0.0, 1.0] where 0.0 is fully transparent, and 1.0 is fully opaque.
The following are some of the examples for valid hexadecimal color values.
hsl(24, 42%, 50%)
hsla(24, 42%, 50%, 0.6)
In the following HTML, we apply background colors for divs, using these HSL or HSA color values.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {
display: inline-block;
margin:10px;
width: 100px;
height: 100px;
}
#div1 {
background: hsl(140, 42%, 50%);
}
#div2 {
background: hsla(140, 42%, 50%, 0.6);
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
Conclusion
In this HTML Tutorial, we learned about Colors in HTML, and how to use them for elements in HTML.