 Tutorials  Exercises  Services   Sign Up Log in

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

Background
 Tutorials  Color
Exercises  Services   Sign Up Log in

HTML
You canCSS
set theJAVASCRIPT SQLfor HTML
background color PYTHON JAVA
elements: PHP HOW TO W3.CSS C 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>
Try it Yourself »
Tutorials  Exercises  Services   Sign Up Log in

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

ADVERTISEMENT

India ✈︎ Dubai India ✈︎ Thailan

from Rs14,480 from Rs13,043

Info Info

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,
 Tutorials
and HSLA values. Exercises  Services   Sign Up Log in

HTML CSS
The following JAVASCRIPT
three SQL have
<div> elements PYTHON JAVA
their backgroundPHP HOW
color set TORGB,W3.CSS
with C
HEX, and HSL C++
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 »

?
Exercise
Do you remember any legal HTML color names? Which one of the following is
a legal HTML color?
 Apple
Tutorials  Exercises  Services   Sign Up Log in

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

Tomato

Submit Answer »

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!
 Tutorials  Exercises  Services   Sign Up
Sign Up Log in
Log in

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

ADVERTISEMENT
 COLOR PICKER
 Tutorials  Exercises  Services   Sign Up Log in

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


ADVERTISEMENT

India ✈︎
Thailand

from Rs13,043
Info

ADVERTISEMENT

ADVERTISEMENT
 Tutorials  Exercises  Services   Sign Up Log in

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

 PLUS SPACES

GET CERTIFIED FOR TEACHERS

FOR BUSINESS CONTACT US

Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
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

 Tutorials  jQuery Reference

Exercises 
Top Examples
Services  
Get Certified
Sign Up Log in

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