×

注意!页面内容来自https://www.w3schools.com/html/html_colors.asp,本站不储存任何内容,为了更好的阅读体验进行在线解析,若有广告出现,请及时反馈。若您觉得侵犯了您的利益,请通知我们进行删除,然后访问 原网页

<> #subtopnav { position:fixed; background-color: #282A35; color:#f1f1f1; padding:0; letter-spacing:1px; font-family: 'Source Sans Pro Topnav'sans-serif; font-size:0; top:56px; z-index:2; width:100%; white-space:nowrap; overflow:auto; scrollbar-width: none; max-width:1750px; margin:auto; left:0; right:0; } #subtopnav a{ display:inline-block; width:auto; margin:0!important; padding:5px 15px 5px 15px !important; font-size:15px!important; text-decoration: none; line-height: 1.5; } #subtopnav a:hover,#subtopnav a:focus,#subtopnav a:active{ background-color:#000000 !important; color:#ffffff !important; } #subtopnav a.active{ background-color: #04AA6D!important; color:#fff!important; } #btn_container_subtopnav { position:fixed; right:0; top:56px; font-size:0; xxborder-left:10px solid rgba(404253,0.5); } #btn_container_subtopnav a{ line-height:1.3!important; padding-top:7px!important; padding-bottom:6px!important; font-size:15px; background-color:#282A35; } #scroll_left_btn { cursor:pointer; display:none; position:fixed; left:0; top:56px; font-size: 15px; xborder-right: 10px solid rgba(404253,0.5); xbackground: red; } #scroll_left_btn span { xbackground-color:#282A35; background: linear-gradient(to right#282A35 70%transparent 100%); display:block; padding-top:5px; padding-bottom:5px; } #scroll_left_btn span:hover { background: linear-gradient(to right#000 95%transparent 100%); } #scroll_right_btn { cursor:pointer; float:left; font-size:15px; xxbackground-color:#282A35; background: linear-gradient(to left#282A35 70%transparent 100%); padding-top:5px; padding-bottom:5px; } #scroll_right_btn:hover { background: linear-gradient(to left#000 95%transparent 100%); } #menubtn_container { position:fixed; left:0; top:56px; xborder-right:10px solid rgba(404253,0.5); height:33px; color:white; font-size:15px; } #menubtn_container span { background-color:#282A35; } #darkmodemenu { position:fixed!important; right:0;!important; } #subtopnav::-webkit-scrollbar { display:none!important; } @media screen and (max-width: 992px){ #subtopnav a.subtopnav_firstitem { margin-left:50px!important; } } #google_translate_element a{ font-size:13px!important; line-height: normal; } #google_translate_element a:hover{ background-color:#fff!important; color:#000!important; } <> .topnavcontainer { background-color: #282A35; width:100%; max-width:1750px; left:0; right:0; margin:auto; height:33px; top:56px; position:fixed; z-index:3; } #scroll_left_btn { cursor: pointer; display: none; position: fixed; left: auto; top: auto; font-size: 15px; } #scroll_right_btn { cursor: pointer; position: fixed; font-size: 15px; display:none; } .topnavbackground { background-color:#282A35; position:fixed; width:100%; height:33px; top:56px; } body.darkpagetheme .topnavbackgroundbody.darkpagetheme .topnavcontainerbody.darkpagetheme #subtopnav { background-color:rgb(13,23,33)!important } body.darkpagetheme #scroll_right_btn { background: linear-gradient(to leftrgb(13,23,33) 70%transparent 100%) } body.darkpagetheme #scroll_left_btn span { background: linear-gradient(to rightrgb(13,23,33) 70%transparent 100%) }
<> .belowtopnavcontainer { max-width:1750px; margin:auto; } .contentcontainer { background-color: #f5f6f7; } body.darkpagetheme .contentcontainer { background-color: #29353e; } #leftmenuinner {width:230px;} @media (max-width:992px) { #leftmenuinner {width:260px;} #sidenav{width:260px;} }

HTML Tutorial

HTML HOME HTML Introduction HTML Editors HTML Basic HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Styles HTML Formatting HTML Quotations HTML Comments HTML Colors HTML CSS HTML Links HTML Images HTML Favicon HTML Page Title HTML Tables HTML Lists HTML Block & Inline HTML Div HTML Classes HTML Id HTML Buttons HTML Iframes HTML JavaScript HTML File Paths HTML Head HTML Layout HTML Responsive HTML Computercode HTML Semantics HTML Style Guide HTML Entities HTML Symbols HTML Emojis HTML Charsets HTML URL Encode HTML vs. XHTML

HTML Forms

HTML Forms HTML Form Attributes HTML Form Elements HTML Input Types HTML Input Attributes Input Form Attributes

HTML Graphics

HTML Canvas HTML SVG

HTML Media

HTML Media HTML Video HTML Audio HTML Plug-ins HTML YouTube

HTML APIs

HTML Web APIs HTML Geolocation HTML Drag and Drop HTML Web Storage HTML Web Workers HTML SSE

HTML Examples

HTML Examples HTML Editor HTML Quiz HTML Exercises HTML Website HTML Syllabus HTML Study Plan HTML Interview Prep HTML Bootcamp HTML Certificate HTML Summary HTML Accessibility

HTML References

HTML Tag List HTML Attributes HTML Global Attributes HTML Browser Support HTML Events HTML Colors HTML Canvas HTML Audio/Video HTML Doctypes HTML Character Sets HTML URL Encode HTML Lang Codes HTTP Messages HTTP Methods PX to EM Converter Keyboard Shortcuts

HTML Colors


HTML colors are specified with predefined color namesor with RGBHEXHSLRGBAor HSLA values.


Color Names

In HTMLa color can be specified by using a color name:

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

Try it Yourself »

HTML supports 140 standard color names.


Background Color

You can set the background color for HTML elements:

Hello World


Lorem ipsum dolor sit ametconsectetuer adipiscing elitsed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniamquis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example

<h1 ="background-color:DodgerBlue;">Hello World</h1>
<p ="background-color:Tomato;">Lorem ipsum...</p>
Try it Yourself »

Text Color

You can set the color of text:

Hello World

Lorem ipsum dolor sit ametconsectetuer adipiscing elitsed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniamquis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example

<h1 ="color:Tomato;">Hello World</h1>
<p ="color:DodgerBlue;">Lorem ipsum...</p>
<p ="color:MediumSeaGreen;">Ut wisi enim...</p>
Try it Yourself »


Border Color

You can set the color of borders:

Hello World

Hello World

Hello World

Example

<h1 ="border:2px solid Tomato;">Hello World</h1>
<h1 ="border:2px solid DodgerBlue;">Hello World</h1>
<h1 ="border:2px solid Violet;">Hello World</h1>
Try it Yourself »

Color Values

In HTMLcolors can also be specified using RGB valuesHEX valuesHSL valuesRGBA valuesand HSLA values.

The following three <div> elements have their background color set with RGB HEXand HSL values:

rgb(2559971)
#ff6347
hsl(9100%64%)

The following two <div> elements have their background color set with RGBA and HSLA valueswhich add an Alpha channel to the color (here we have 50% transparency):

rgba(25599710.5)
hsla(9100%64%0.5)

Example

<h1 ="background-color:rgb(255 9971);">...</h1>
<h1 ="background-color:#ff6347;">...</h1>
<h1 ="background-color:hsl(9 100%64%);">...</h1>

<h1 ="background-color:rgba(255 99710.5);">...</h1>
<h1 ="background-color:hsla(9 100%64%0.5);">...</h1>
Try it Yourself »


Learn more about Color Values

You will learn more about RGBHEX and HSL in the next chapters.


Video: HTML Colors

Tutorial on YouTube
Tutorial on YouTube

<> #wrappercontainer { width:100%; height:100px; background-color:red; position:relative; z-index:2; } #footerwrapper { background-color: #282A35; /* background-image:url('/images/background_in_space.webp'); background-repeat: repeat; background-position: right bottom;*/ } #spacemyfooter { padding:40px 80px 20px 80px; max-width:1500px; margin:auto; } .footerlinks_1 { width:auto; float:left; padding:40px 60px; color:#FFF4A3; font-family: Source Sans Prosans-serif; font-size:15px; } .footerlinks_1 .fa-logo { font-size:46px!important; color:#ddd; } .footerlinks_1:nth-child(1) { padding:30px 10px 30px 40px; } .footerlinks_1 a{ text-decoration:none; } .footerlinks_1 a:hover,.footerlinks_1 a:active{ text-decoration:underline; color:#FFF4A3; } .footerlinks_1 a:hover,.footerlinks_1 a:active{ text-decoration:underline; color:#FFF4A3!; } .footerlinks_1 a:hover i{ color:#FFF4A3!important; } .footerlinks_2 { width:auto; float:left; padding-left:90px; padding-right:135px; color:#ddd; font-family: Source Sans Prosans-serif; font-size:12px; line-height:15px; text-align:center; } .footerlinks_2:nth-child(4) { padding-right:0; } .footerlinks_2 h5 { margin-bottom:20px; } .footerlinks_2 a:visited,.footerlinks_2 a:link{ text-decoration:none; } .footerlinks_2 a:hover,.footerlinks_2 a:active{ color:#FFF4A3; } .footersome { padding:60px 40px 10px 40px; color:#ddd; font-size:20px; text-align:center; } .footersome a { margin-right:10px; } .footersome a:hover,.footersome a:active{ color:#FFF4A3; } .footersome .textlink { font-size:15px; text-decoration:none; } .footersome .textlink:active,.footersome .textlink:hover { text-decoration:underline; } .footertext { color:#ddd; font-size:12px; line-height:15px; text-align:center; } .footertext a:hover,.footertext a:active{ color:#FFF4A3; } @media screen and (max-width: 992px) { #wrappercontainer { z-index:0; } .footerlinks_1 { width:100%; margin:auto; float:none; text-align:center; padding:10px 20px!important; font-size:20px; } .footerlinks_1:nth-child(1) { padding:40px 20px; } .footerlinks_2 { width:100%; float:none; margin:auto; font-size:16px; line-height:20px; padding:0; } .footerlinks_2 h5 { font-size:26px; margin-top:40px; } .footertext { padding:0; } .footer-hide-special { display:none; } } /* @media screen and (max-width: 992px) { #footerwrapper { background-image:url('/images/background_in_space.webp'); background-color: #282A35; background-repeat: repeat; background-position: left top; } }*/
<> @media screen and (max-width: 1450px) { #spacemyfooter { max-width:1100px; } .footerlinks_1 { padding-left:30px; padding-right:30px; } .footerlinks_2 { padding-right:30px; } .footerlinks_2:nth-child(1) { padding-left:50px; } .footer-hide-special { display:none; } } @media screen and (max-width: 1100px) { #spacemyfooter { max-width:1000px; } .footerlinks_1 { padding-left:20px; padding-right:20px; } .footerlinks_2 { padding-right:20px; } .footerlinks_2:nth-child(1) { padding-left:20px; } }
<> /*Remove this after 20. April 2024*/ #err_message { padding:8px 16px 16px 40px; border-radius:5px; display:none; position:relative; background-color:#2D3748; color:#FFF4A3; font-family:'Source Sans Pro'sans-serif; } #err_message h2 { font-family:'Source Sans Pro'sans-serif; } #err_message p { color:#f1f1f1; } #err_message #close_err_message { position:absolute; right:0; top:0; font-size:20px; cursor:pointer; width:30px; height:30px; text-align:center; } #err_message #close_err_message:hover { background-color:#FFF4A3; color:#2D3748; border-radius:50% }
×

Contact Sales

If you want to use W3Schools services as an educational institutionteam or enterprisesend us an e-mail:
[email protected]

Report Error

If you want to report an erroror if you want to make a suggestionsend us an e-mail:
[email protected]

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorialsreferencesand examples are constantly reviewed to avoid errorsbut we cannot warrant full correctness of all content. While using W3Schoolsyou agree to have read and accepted our terms of use, cookies and privacy policy.

Copyright 1999-2025 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.