Tutorials
Exercises Get Certified Services Menu
Dark mode
Dark code
HTML CSS JAVASCRIPT SQL PYTHON
Bootcamps Spaces Sign Up
HTML Colors
❮ Previous Next ❯
HTML colors are specified with predefined color names, or with RGB, HEX, HSL,
RGBA, or HSLA values.
Color Names
In HTML, a 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 amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat.
Example
<h1 style="background‐color:DodgerBlue;">Hello World</h1>
<p style="background‐color:Tomato;">Lorem ipsum...</p>
Try it Yourself »
Text Color
You can set the color of text:
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
Example
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="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 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
Try it Yourself »
Color Values
In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA
values, and HSLA values.
The following three <div> elements have their background color set with RGB, HEX,
and HSL values:
rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)
The following two <div> elements have their background color set with RGBA and HSLA
values, which add an Alpha channel to the color (here we have 50% transparency):
rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
Example
<h1 style="background‐color:rgb(255, 99, 71);">...</h1>
<h1 style="background‐color:#ff6347;">...</h1>
<h1 style="background‐color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background‐color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background‐color:hsla(9, 100%, 64%, 0.5);">...</h1>
Try it Yourself »
Learn more about Color Values
You will learn more about RGB, HEX and HSL in the next chapters.
❮ Previous Next ❯
ADVERTISEMENT
COLOR PICKER
ADVERTISEMENT
Spaces
Upgrade
Newsletter
Get Certified
Report Error
Top Tutorials Top References
HTML Tutorial HTML Reference
CSS Tutorial CSS Reference
JavaScript Tutorial JavaScript Reference
How To Tutorial SQL Reference
SQL Tutorial Python Reference
Python Tutorial W3.CSS Reference
W3.CSS Tutorial Bootstrap Reference
Bootstrap Tutorial PHP Reference
PHP Tutorial HTML Colors
Java Tutorial Java Reference
C++ Tutorial Angular Reference
jQuery Tutorial jQuery Reference
Top Examples Get Certified
HTML Examples HTML Certificate
CSS Examples CSS Certificate
JavaScript Examples JavaScript Certificate
How To Examples Front End Certificate
SQL Examples SQL Certificate
Python Examples Python Certificate
W3.CSS Examples PHP Certificate
Bootstrap Examples jQuery Certificate
PHP Examples Java Certificate
Java Examples C++ Certificate
XML Examples C# Certificate
jQuery Examples XML Certificate
FORUM | ABOUT
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and
learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant
full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use,
cookie and privacy policy.
Copyright 19992023 by Refsnes Data. All Rights Reserved.
W3Schools is Powered by W3.CSS.
