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.