13/07/2025, 18:29 HTML Colors

 Tutorials  Exercises  Services   Sign In

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

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.

https://www.w3schools.com/html/html_colors.asp 1/7
13/07/2025, 18:29 HTML Colors

Background
 Tutorials  Color
Exercises  Services   Sign In

HTML
You canCSS
set theJAVASCRIPT SQLfor HTML
background color PYTHON JAVA
elements: PHP HOW TO W3.CSS C

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>

https://www.w3schools.com/html/html_colors.asp 2/7
13/07/2025, 18:29 HTML Colors

Try it Yourself »
Tutorials  Exercises  Services   Sign In

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

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

https://www.w3schools.com/html/html_colors.asp 3/7
13/07/2025, 18:29 HTML Colors

 Tutorials  Exercises hsl(9, 100%,

Services  64%) Sign In

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
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 »

?
Exercise
Do you remember any legal HTML color names? Which one of the following is
a legal HTML color?

Apple

Banana

Tomato

https://www.w3schools.com/html/html_colors.asp 4/7
13/07/2025, 18:29 HTML Colors

 Tutorials  Exercises  Services 

Submit Answer »
 Sign In

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

Learn more about Color Values

You will learn more about RGB, HEX and HSL in the next chapters.

Video: HTML Colors

❮ Previous Next ❯

Track your progress - it's free! Sign Up Log in

https://www.w3schools.com/html/html_colors.asp 5/7
13/07/2025, 18:29 HTML Colors

 Tutorials  Exercises  Services   Sign In

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

COLOR PICKER



 PLUS SPACES

GET CERTIFIED FOR TEACHERS

FOR BUSINESS CONTACT US

Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial

https://www.w3schools.com/html/html_colors.asp 6/7
13/07/2025, 18:29 HTML Colors
How To Tutorial

 Tutorials  SQL Tutorial

Exercises 
Python Tutorial
Services   Sign In
W3.CSS Tutorial
HTML
 CSS JAVASCRIPTTutorialSQL
Bootstrap PYTHON JAVA PHP HOW TO W3.CSS C
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial

Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
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 ACADEMY

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 1999-2025 by Refsnes Data. All Rights Reserved. W3Schools is Powered by

W3.CSS.

https://www.w3schools.com/html/html_colors.asp 7/7