Dark code

  HTML CSS   
 Menu  Log in
ADVERTISEMENT

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

Dark mode
D k d
 Dark code
  HTML CSS   
Gray
ADVERTISEMENT

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>

Dark mode
D k d
 Dark code
 Try
it Yourself
HTML » CSS   

ADVERTISEMENT

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 »

ADVERTISEMENT

Border Color
You can set the color of borders:

Hello World
Dark mode
D k d
 Dark code
Hello
 World
HTML CSS   

ADVERTISEMENT

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)

Dark mode
D k d
 Dark code
  HTML CSS   
Example
ADVERTISEMENT
<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

Dark mode
D k d
 Dark code
  HTML CSS   

ADVERTISEMENT

COLOR PICKER

Dark mode
D k d
 Dark code
  HTML CSS   

ADVERTISEMENT



Get certified
by completing
a HTML
course today!

school
w3 s

2
CE

02

TI 2
R

FI .
ED

Get started

ADVERTISEMENT

Dark mode
D k d
 Dark code
  HTML CSS   

ADVERTISEMENT

ADVERTISEMENT

Report Error

Spaces

Upgrade

Newsletter

Get Certified

Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial Dark mode
D k d
 Bootstrap Tutorial Dark code
  HTML CSS PHP Tutorial   
Java Tutorial
C++ Tutorial
ADVERTISEMENT
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
HTML Examples
CSS Examples
JavaScript Examples
How To Examples
SQL Examples
Python Examples
W3.CSS Examples
Bootstrap Examples
PHP Examples
Java Examples
XML Examples
jQuery Examples

Get Certified
HTML Certificate
CSS Certificate
JavaScript Certificate
Front End Certificate
SQL Certificate
Python Certificate
PHP Certificate
jQuery Certificate
Java Certificate
C++ Certificate
C# Certificate
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.
Dark mode
D k d
 Copyright 1999-2023 by Refsnes Data. All Rights Reserved. Dark code
  HTML CSS W3Schools is Powered by W3.CSS.   

ADVERTISEMENT
