Colors can be specified in HTML pages in two ways—by using a color name, or by using numbers to denote an RGB color value. An RGB color value consists of three two-digit hexadecimal numbers specifying the intensity of the corresponding color.
For example, the color value #FF0000 is rendered red because the red number is set to its highest value, FF (or 255 in decimal form).
When you use the
The following table lists the colors supported as of Internet Explorer 4.0.
> <TABLE class=clsStd cellSpacing=5 cellPadding=0 bgColor=gray border=5> <TBODY> <TR> <TD style="BACKGROUND: aliceblue" align=middle>aliceblue<BR>(#F0F8FF)</TD> <TD style="BACKGROUND: antiquewhite" align=middle>antiquewhite<BR>(#FAEBD7)</TD> <TD style="BACKGROUND: aqua" align=middle>aqua<BR>(#00FFFF)</TD> <TD style="BACKGROUND: aquamarine" align=middle>aquamarine<BR>(#7FFFD4)</TD></TR> <TR> <TD style="BACKGROUND: azure" align=middle>azure<BR>(#F0FFFF)</TD> <TD style="BACKGROUND: beige" align=middle>beige<BR>(#F5F5DC)</TD> <TD style="BACKGROUND: bisque" align=middle>bisque<BR>(#FFE4C4)</TD> <TD style="BACKGROUND: black" align=middle>black<BR>(#000000)</TD></TR> <TR> <TD style="BACKGROUND: blanchedalmond" align=middle>blanchedalmond<BR>(#FFEBCD)</TD> <TD style="BACKGROUND: #0000ff" align=middle>blue<BR>(#0000FF)</TD> <TD style="BACKGROUND: #8a2be2" align=middle>blueviolet<BR>(#8A2BE2)</TD> <TD style="BACKGROUND: brown" align=middle>brown<BR>(#A52A2A)</TD></TR> <TR> <TD style="BACKGROUND: burlywood" align=middle>burlywood<BR>(#DEB887)</TD> <TD style="BACKGROUND: cadetblue" align=middle>cadetblue<BR>(#5F9EA0)</TD> <TD style="BACKGROUND: chartreuse" align=middle>chartreuse<BR>(#7FFF00)</TD> <TD style="BACKGROUND: chocolate" align=middle>chocolate<BR>(#D2691E)</TD></TR> <TR> <TD style="BACKGROUND: coral" align=middle>coral<BR>(#FF7F50)</TD> <TD style="BACKGROUND: #6495ed" align=middle>cornflowerblue<BR>(#6495ED)</TD> <TD style="BACKGROUND: cornsilk" align=middle>cornsilk<BR>(#FFF8DC)</TD> <TD style="BACKGROUND: crimson" align=middle>crimson<BR>(#DC143C)</TD></TR> <TR> <TD style="BACKGROUND: cyan" align=middle>cyan<BR>(#00FFFF)</TD> <TD style="BACKGROUND: darkblue" align=middle>darkblue<BR>(#00008B)</TD> <TD style="BACKGROUND: darkcyan" align=middle>darkcyan<BR>(#008B8B)</TD> <TD style="BACKGROUND: darkgoldenrod" align=middle>darkgoldenrod<BR>(#B8860B)</TD></TR> <TR> <TD style="BACKGROUND: darkgray" align=middle>darkgray<BR>(#A9A9A9)</TD> <TD style="BACKGROUND: darkgreen" align=middle>darkgreen<BR>(#006400)</TD> <TD style="BACKGROUND: darkkhaki" align=middle>darkkhaki<BR>(#BDB76B)</TD> <TD style="BACKGROUND: darkmagenta" align=middle>darkmagenta<BR>(#8B008B)</TD></TR> <TR> <TD style="BACKGROUND: darkolivegreen" align=middle>darkolivegreen<BR>(#556B2F)</TD> <TD style="BACKGROUND: darkorange" align=middle>darkorange<BR>(#FF8C00)</TD> <TD style="BACKGROUND: darkorchid" align=middle>darkorchid<BR>(#9932CC)</TD> <TD style="BACKGROUND: darkred" align=middle>darkred<BR>(#8B0000)</TD></TR> <TR> <TD style="BACKGROUND: darksalmon" align=middle>darksalmon<BR>(#E9967A)</TD> <TD style="BACKGROUND: darkseagreen" align=middle>darkseagreen<BR>(#8FBC8B)</TD> <TD style="BACKGROUND: darkslateblue" align=middle>darkslateblue<BR>(#483D8B)</TD> <TD style="BACKGROUND: darkslategray" align=middle>darkslategray<BR>(#2F4F4F)</TD></TR> <TR> <TD style="BACKGROUND: darkturquoise" align=middle>darkturquoise<BR>(#00CED1)</TD> <TD style="BACKGROUND: darkviolet" align=middle>darkviolet<BR>(#9400D3)</TD> <TD style="BACKGROUND: deeppink" align=middle>deeppink<BR>(#FF1493)</TD> <TD style="BACKGROUND: deepskyblue" align=middle>deepskyblue<BR>(#00BFFF)</TD></TR> <TR> <TD style="BACKGROUND: dimgray" align=middle>dimgray<BR>(#696969)</TD> <TD style="BACKGROUND: dodgerblue" align=middle>dodgerblue<BR>(#1E90FF)</TD> <TD style="BACKGROUND: firebrick" align=middle>firebrick<BR>(#B22222)</TD> <TD style="BACKGROUND: floralwhite" align=middle>floralwhite<BR>(#FFFAF0)</TD></TR> <TR> <TD style="BACKGROUND: forestgreen" align=middle>forestgreen<BR>(#228B22)</TD> <TD style="BACKGROUND: #ff00ff" align=middle>fuchsia<BR>(#FF00FF)</TD> <TD style="BACKGROUND: gainsboro" align=middle>gainsboro<BR>(#DCDCDC)</TD> <TD style="BACKGROUND: ghostwhite" align=middle>ghostwhite<BR>(#F8F8FF)</TD></TR> <TR> <TD style="BACKGROUND: gold" align=middle>gold<BR>(#FFD700)</TD> <TD style="BACKGROUND: goldenrod" align=middle>goldenrod<BR>(#DAA520)</TD> <TD style="BACKGROUND: gray" align=middle>gray<BR>(#808080)</TD> <TD style="BACKGROUND: green" align=middle>green<BR>(#008000)</TD></TR> <TR> <TD style="BACKGROUND: greenyellow" align=middle>greenyellow<BR>(#ADFF2F)</TD> <TD style="BACKGROUND: honeydew" align=middle>honeydew<BR>(#F0FFF0)</TD> <TD style="BACKGROUND: hotpink" align=middle>hotpink<BR>(#FF69B4)</TD> <TD style="BACKGROUND: indianred" align=middle>indianred<BR>(#CD5C5C)</TD></TR> <TR> <TD style="BACKGROUND: indigo" align=middle>indigo<BR>(#4B0082)</TD> <TD style="BACKGROUND: ivory" align=middle>ivory<BR>(#FFFFF0)</TD> <TD style="BACKGROUND: khaki" align=middle>khaki<BR>(#F0E68C)</TD> <TD style="BACKGROUND: lavender" align=middle>lavender<BR>(#E6E6FA)</TD></TR> <TR> <TD style="BACKGROUND: lavenderblush" align=middle>lavenderblush<BR>(#FFF0F5)</TD> <TD style="BACKGROUND: lawngreen" align=middle>lawngreen<BR>(#7CFC00)</TD> <TD style="BACKGROUND: lemonchiffon" align=middle>lemonchiffon<BR>(#FFFACD)</TD> <TD style="BACKGROUND: lightblue" align=middle>lightblue<BR>(#ADD8E6)</TD></TR> <TR> <TD style="BACKGROUND: lightcoral" align=middle>lightcoral<BR>(#F08080)</TD> <TD style="BACKGROUND: lightcyan" align=middle>lightcyan<BR>(#E0FFFF)</TD> <TD style="BACKGROUND: lightgoldenrodyellow" align=middle>lightgoldenrodyellow<BR>(#FAFAD2)</TD> <TD style="BACKGROUND: lightgreen" align=middle>lightgreen<BR>(#90EE90)</TD></TR> <TR> <TD style="BACKGROUND: lightgrey" align=middle>lightgrey<BR>(#D3D3D3)</TD> <TD style="BACKGROUND: lightpink" align=middle>lightpink<BR>(#FFB6C1)</TD> <TD style="BACKGROUND: lightsalmon" align=middle>lightsalmon<BR>(#FFA07A)</TD> <TD style="BACKGROUND: lightseagreen" align=middle>lightseagreen<BR>(#20B2AA)</TD></TR> <TR> <TD style="BACKGROUND: lightskyblue" align=middle>lightskyblue<BR>(#87CEFA)</TD> <TD style="BACKGROUND: lightslategray" align=middle>lightslategray<BR>(#778899)</TD> <TD style="BACKGROUND: lightsteelblue" align=middle>lightsteelblue<BR>(#B0C4DE)</TD> <TD style="BACKGROUND: lightyellow" align=middle>lightyellow<BR>(#FFFFE0)</TD></TR> <TR> <TD style="BACKGROUND: lime" align=middle>lime<BR>(#00FF00)</TD> <TD style="BACKGROUND: limegreen" align=middle>limegreen<BR>(#32CD32)</TD> <TD style="BACKGROUND: linen" align=middle>linen<BR>(#FAF0E6)</TD> <TD style="BACKGROUND: magenta" align=middle>magenta<BR>(#FF00FF)</TD></TR> <TR> <TD style="BACKGROUND: maroon" align=middle>maroon<BR>(#800000)</TD> <TD style="BACKGROUND: mediumaquamarine" align=middle>mediumaquamarine<BR>(#66CDAA)</TD> <TD style="BACKGROUND: mediumblue" align=middle>mediumblue<BR>(#0000CD)</TD> <TD style="BACKGROUND: mediumorchid" align=middle>mediumorchid<BR>(#BA55D3)</TD></TR> <TR> <TD style="BACKGROUND: mediumpurple" align=middle>mediumpurple<BR>(#9370DB)</TD> <TD style="BACKGROUND: mediumseagreen" align=middle>mediumseagreen<BR>(#3CB371)</TD> <TD style="BACKGROUND: mediumslateblue" align=middle>mediumslateblue<BR>(#7B68EE)</TD> <TD style="BACKGROUND: mediumspringgreen" align=middle>mediumspringgreen<BR>(#00FA9A)</TD></TR> <TR> <TD style="BACKGROUND: mediumturquoise" align=middle>mediumturquoise<BR>(#48D1CC)</TD> <TD style="BACKGROUND: mediumvioletred" align=middle>mediumvioletred<BR>(#C71585)</TD> <TD style="BACKGROUND: midnightblue" align=middle>midnightblue<BR>(#191970)</TD> <TD style="BACKGROUND: mintcream" align=middle>mintcream<BR>(#F5FFFA)</TD></TR> <TR> <TD style="BACKGROUND: mistyrose" align=middle>mistyrose<BR>(#FFE4E1)</TD> <TD style="BACKGROUND: moccasin" align=middle>moccasin<BR>(#FFE4B5)</TD> <TD style="BACKGROUND: navajowhite" align=middle>navajowhite<BR>(#FFDEAD)</TD> <TD style="BACKGROUND: navy" align=middle>navy<BR>(#000080)</TD></TR> <TR> <TD style="BACKGROUND: oldlace" align=middle>oldlace<BR>(#FDF5E6)</TD> <TD style="BACKGROUND: olive" align=middle>olive<BR>(#808000)</TD> <TD style="BACKGROUND: olivedrab" align=middle>olivedrab<BR>(#6B8E23)</TD> <TD style="BACKGROUND: orange" align=middle>orange<BR>(#FFA500)</TD></TR> <TR> <TD style="BACKGROUND: orangered" align=middle>orangered<BR>(#FF4500)</TD> <TD style="BACKGROUND: orchid" align=middle>orchid<BR>(#DA70D6)</TD> <TD style="BACKGROUND: palegoldenrod" align=middle>palegoldenrod<BR>(#EEE8AA)</TD> <TD style="BACKGROUND: palegreen" align=middle>palegreen<BR>(#98FB98)</TD></TR> <TR> <TD style="BACKGROUND: paleturquoise" align=middle>paleturquoise<BR>(#AFEEEE)</TD> <TD style="BACKGROUND: palevioletred" align=middle>palevioletred<BR>(#DB7093)</TD> <TD style="BACKGROUND: papayawhip" align=middle>papayawhip<BR>(#FFEFD5)</TD> <TD style="BACKGROUND: peachpuff" align=middle>peachpuff<BR>(#FFDAB9)</TD></TR> <TR> <TD style="BACKGROUND: peru" align=middle>peru<BR>(#CD853F)</TD> <TD style="BACKGROUND: pink" align=middle>pink<BR>(#FFC0CB)</TD> <TD style="BACKGROUND: plum" align=middle>plum<BR>(#DDA0DD)</TD> <TD style="BACKGROUND: powderblue" align=middle>powderblue<BR>(#B0E0E6)</TD></TR> <TR> <TD style="BACKGROUND: purple" align=middle>purple<BR>(#800080)</TD> <TD style="BACKGROUND: red" align=middle>red<BR>(#FF0000)</TD> <TD style="BACKGROUND: rosybrown" align=middle>rosybrown<BR>(#BC8F8F)</TD> <TD style="BACKGROUND: royalblue" align=middle>royalblue<BR>(#4169E1)</TD></TR> <TR> <TD style="BACKGROUND: saddlebrown" align=middle>saddlebrown<BR>(#8B4513)</TD> <TD style="BACKGROUND: salmon" align=middle>salmon<BR>(#FA8072)</TD> <TD style="BACKGROUND: sandybrown" align=middle>sandybrown<BR>(#F4A460)</TD> <TD style="BACKGROUND: seagreen" align=middle>seagreen<BR>(#2E8B57)</TD></TR> <TR> <TD style="BACKGROUND: seashell" align=middle>seashell<BR>(#FFF5EE)</TD> <TD style="BACKGROUND: sienna" align=middle>sienna<BR>(#A0522D)</TD> <TD style="BACKGROUND: silver" align=middle>silver<BR>(#C0C0C0)</TD> <TD style="BACKGROUND: skyblue" align=middle>skyblue<BR>(#87CEEB)</TD></TR> <TR> <TD style="BACKGROUND: slateblue" align=middle>slateblue<BR>(#6A5ACD)</TD> <TD style="BACKGROUND: slategray" align=middle>slategray<BR>(#708090)</TD> <TD style="BACKGROUND: snow" align=middle>snow<BR>(#FFFAFA)</TD> <TD style="BACKGROUND: springgreen" align=middle>springgreen<BR>(#00FF7F)</TD></TR> <TR> <TD style="BACKGROUND: steelblue" align=middle>steelblue<BR>(#4682B4)</TD> <TD style="BACKGROUND: tan" align=middle>tan<BR>(#D2B48C)</TD> <TD style="BACKGROUND: teal" align=middle>teal<BR>(#008080)</TD> <TD style="BACKGROUND: thistle" align=middle>thistle<BR>(#D8BFD8)</TD></TR> <TR> <TD style="BACKGROUND: tomato" align=middle>tomato<BR>(#FF6347)</TD> <TD style="BACKGROUND: turquoise" align=middle>turquoise<BR>(#40E0D0)</TD> <TD style="BACKGROUND: violet" align=middle>violet<BR>(#EE82EE)</TD> <TD style="BACKGROUND: wheat" align=middle>wheat<BR>(#F5DEB3)</TD></TR> <TR> <TD style="BACKGROUND: white" align=middle>white<BR>(#FFFFFF)</TD> <TD style="BACKGROUND: whitesmoke" align=middle>whitesmoke<BR>(#F5F5F5)</TD> <TD style="BACKGROUND: yellow" align=middle>yellow<BR>(#FFFF00)</TD> <TD style="BACKGROUND: yellowgreen" align=middle>yellowgreen<BR>(#9ACD32)</TD></TR></TBODY></TABLE> <H2><A name=unknown_478></A>User-Defined System Colors</H2> <P>Microsoft Windows maintains a set of system colors for painting various parts of the display. In addition to the colors defined in the color table, as of Internet Explorer 4.0 these system colors may also be specified as color values in Web pages. </P> <P>Users can set system colors for future Windows sessions using the Windows Control Panel. The following table illustrates the correspondence of these color names with the colors defined in the Control Panel. </P> <DIV class=clsNote><B>Note</B> The colors that do not correspond to any Control Panel colors can only be set programmatically using Windows APIs and cannot be defined by the user.</DIV><![CDATA[> <TABLE class=clsStd cellSpacing=5 cellPadding=5 bgColor=gray border=5> <TBODY> <TR> <TD style="BACKGROUND: activeborder" align=middle>activeborder</TD> <TD style="BACKGROUND: activecaption" align=middle>activecaption</TD> <TD style="BACKGROUND: appworkspace" align=middle>appworkspace</TD> <TD style="BACKGROUND: background" align=middle>background</TD></TR> <TR> <TD style="BACKGROUND: buttonface" align=middle>buttonface</TD> <TD style="BACKGROUND: buttonhighlight" align=middle>buttonhighlight</TD> <TD style="BACKGROUND: buttonshadow" align=middle>buttonshadow</TD> <TD style="BACKGROUND: buttontext" align=middle>buttontext</TD></TR> <TR> <TD style="BACKGROUND: captiontext" align=middle>captiontext</TD> <TD style="BACKGROUND: graytext" align=middle>graytext</TD> <TD style="BACKGROUND: highlight" align=middle>highlight</TD> <TD style="BACKGROUND: highlighttext" align=middle>highlighttext</TD></TR> <TR> <TD style="BACKGROUND: inactiveborder" align=middle>inactiveborder</TD> <TD style="BACKGROUND: inactivecaption" align=middle>inactivecaption</TD> <TD style="BACKGROUND: inactivecaptiontext" align=middle>inactivecaptiontext</TD> <TD style="BACKGROUND: infobackground" align=middle>infobackground</TD></TR> <TR> <TD style="BACKGROUND: infotext" align=middle>infotext</TD> <TD style="BACKGROUND: menu" align=middle>menu</TD> <TD style="BACKGROUND: menutext" align=middle>menutext</TD> <TD style="BACKGROUND: scrollbar" align=middle>scrollbar</TD></TR> <TR> <TD style="BACKGROUND: threeddarkshadow" align=middle>threeddarkshadow</TD> <TD style="BACKGROUND: buttonface" align=middle>threedface</TD> <TD style="BACKGROUND: buttonhighlight" align=middle>threedhighlight</TD> <TD style="BACKGROUND: threedlightshadow" align=middle>threedlightshadow</TD></TR> <TR> <TD style="BACKGROUND: buttonshadow" align=middle>threedshadow</TD> <TD style="BACKGROUND: window" align=middle>window</TD> <TD style="BACKGROUND: windowframe" align=middle>windowframe</TD> <TD style="BACKGROUND: windowtext" align=middle>windowtext</TD></TR></TBODY></TABLE></div><div id="MySignature"></div> <div class="clear"></div> <div id="blog_post_info_block"> <div id="BlogPostCategory"></div> <div id="EntryTag"></div> <div id="blog_post_info"> </div> <div class="clear"></div> <div id="post_next_prev"></div> </div> </div> <div class = "postDesc">posted @ <span id="post-date">2008-02-26 08:38</span> <a href='http://www.cnblogs.com/kaixin110/'>kaixin110</a> 阅读(<span id="post_view_count">...</span>) 评论(<span id="post_comment_count">...</span>) <a href ="http://i.cnblogs.com/EditPosts.aspx?postid=1081500" rel="nofollow">编辑</a> <a href="#" onclick="AddToWz(1081500);return false;">收藏</a></div> </div> <script type="text/javascript">var allowComments=true,isLogined=false,cb_blogId=10001,cb_entryId=1081500,cb_blogApp=currentBlogApp,cb_blogUserGuid='e496310b-63cf-dd11-9e4d-001cf0cd104b',cb_entryCreatedDate='2008/2/26 8:38:00';loadViewCount(cb_entryId);</script> </div><!--end: topics 文章、评论容器--> </div><a name="!comments"></a><div id="blog-comments-placeholder"></div><script type="text/javascript">var commentManager = new blogCommentManager();commentManager.renderComments(0);</script> <div id="comment_form" class="commentform"> <a name="commentform"></a> <div id="divCommentShow"></div> <div id="comment_nav"><span id="span_refresh_tips"></span><a href="javascript:void(0);" id="lnk_RefreshComments" onclick="return RefreshCommentList();">刷新评论</a><a href="#" onclick="return RefreshPage();">刷新页面</a><a href="#top">返回顶部</a></div> <div id="comment_form_container"></div> <div class="ad_text_commentbox" id="ad_text_under_commentbox"></div> <div id="site_nav_under"><a href="http://www.cnblogs.com/" target="_blank" title="开发者的网上家园">博客园首页</a><a href="http://q.cnblogs.com/" target="_blank" title="程序员问答社区">博问</a><a href="http://news.cnblogs.com/" target="_blank" title="IT新闻">新闻</a><a href="http://home.cnblogs.com/ing/" target="_blank">闪存</a><a href="http://job.cnblogs.com/" target="_blank">程序员招聘</a><a href="http://kb.cnblogs.com/" target="_blank">知识库</a></div> <div id="opt_under_post"></div> <script type="text/javascript"> var enableGoogleAd = canShowAdsense(); fixPostBodyFormat(); </script> <script type='text/javascript'> var googletag = googletag || {}; googletag.cmd = googletag.cmd || []; (function () { if (enableGoogleAd) { var gads = document.createElement('script'); gads.async = true; gads.type = 'text/javascript'; var useSSL = 'https:' == document.location.protocol; gads.src = (useSSL ? 'https:' : 'http:') + '//www.googletagservices.com/tag/js/gpt.js'; var node = document.getElementsByTagName('script')[0]; node.parentNode.insertBefore(gads, node); } })(); </script> <script type='text/javascript'> try { if (enableGoogleAd) { googletag.cmd.push(function() { googletag.defineSlot('/1090369/cnblogs_blogpost_C2', [468, 60], 'div-gpt-ad-1433581717989-0').addService(googletag.pubads()); googletag.defineSlot('/1090369/cnblogs_blogpost_C1_sitehome', [300, 250], 'div-gpt-ad-1433581717989-1').addService(googletag.pubads()); googletag.pubads().enableSingleRequest(); googletag.pubads().collapseEmptyDivs(); googletag.enableServices(); }); }; } catch (e) { } </script> <div id="google_ad_c1" class="c_ad_block"> <div id='div-gpt-ad-1433581717989-1' style='height:250px; width:300px;'> <script type='text/javascript'> try { if (enableGoogleAd) { googletag.cmd.push(function () { googletag.display('div-gpt-ad-1433581717989-1'); }); } else { $('#div-gpt-ad-1433581717989-1').hide(); } } catch (e) { } </script> </div> </div> <div id="under_post_news"></div> <div id="google_ad_c2" class="c_ad_block"> <div id='div-gpt-ad-1433581717989-0' style='height:60px; width:468px;'> <script type='text/javascript'> try { if (enableGoogleAd) { googletag.cmd.push(function () { googletag.display('div-gpt-ad-1433581717989-0'); }); } else { $('#div-gpt-ad-1433581717989-0').hide(); } } catch (e) { } </script> </div> </div> <div id="under_post_kb"></div> <div id="HistoryToday" class="c_ad_block"></div> <script type="text/javascript"> $(function () { loadNewsAndKb(); loadBlogSignature(); LoadPostInfoBlock(cb_blogId, cb_entryId, cb_blogApp, cb_blogUserGuid); GetPrevNextPost(cb_entryId, cb_blogId, cb_entryCreatedDate); loadOptUnderPost(); GetHistoryToday(cb_blogId, cb_blogApp, cb_entryCreatedDate); setTimeout(function () { incrementViewCount(cb_entryId); }, 200); }); </script> </div> </div><!--end: forFlow --> </div><!--end: mainContent 主体内容容器--> <div id="sideBar"> <div id="sideBarMain"> <!--done--> <div class="newsItem"> <h3 class="catListTitle">公告</h3> <div id="blog-news"></div><script type="text/javascript">loadBlogNews();</script> </div> <div id="blog-calendar" style="display:none"></div><script type="text/javascript">loadBlogDefaultCalendar();</script> <div id="leftcontentcontainer"> <div id="blog-sidecolumn"></div><script type="text/javascript">loadBlogSideColumn();</script> </div> </div><!--end: sideBarMain --> </div><!--end: sideBar 侧边栏容器 --> <div class="clear"></div> </div><!--end: main --> <div class="clear"></div> <div id="footer"> <!--done--> Copyright ©2015 kaixin110 </div><!--end: footer --> </div><!--end: home 自定义的最大容器 --> </body> </html>