CSS Colors

Colors are specified by using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

CSS Color Names

In CSS, you can specify colors using color names:

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

Try it yourself

CSS/HTML Supported 140 Standard Color Names.

CSS Background Color

You can set the background color for HTML elements:

Welcome to China
China is a great country!

Example

<h1 style="background-color:DodgerBlue;">China</h1>
<p style="background-color:Tomato;">China is a great country!</p>

Try it yourself

CSS Text Color

You can set the text color:

China

China is a great country!

China, officially the People's Republic of China, is a country in East Asia.

Example

<h1 style="color:Tomato;">China</h1>
<p style="color:DodgerBlue;">China is a great country!</p>
<p style="color:MediumSeaGreen;">China, officially the People's Republic of China...</p>

Try it yourself

CSS Border Color

You can set the border color:

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

CSS Color Values

In CSS, you can also use RGB values, HEX values, HSL values, RGBA values, or HSLA values to specify colors:

Equivalent to the color name "Tomato":

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

Equivalent to the color name "Tomato", but with a transparency of 50%:

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
<h3>Example</h3> 
<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

In the next chapter, you will learn about RGB,HEX and HSL for more knowledge.