Understanding HTML Colors: A Comprehensive Guide
☰Fullscreen
Table of Content:
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.
<!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>
If you will run above code, you will get below output.
