This site is mobile accessible. Press the "Tap Here" button to use a smaller font-size. Tap Here!

Smartphone icons created by Freepik - Flaticon

2.1 CSS Colors

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

CSS Color Names

In CSS, a color can be specified by using a predefined color name:

• Tomato
• Orange
• DodgerBlue
• MediumSeaGreen
• Gray
• SlateBlue
• Violet
• LightGray

CSS/HTML support 140 standard color names.

CSS Background Color

You can set the background color for HTML elements:

Example 1: CSS Background Color

<h1 style="background-color:DodgerBlue;">
Hello World</h1>
<p style="background-color:Tomato;">
Lorem ipsum...</p>

CSS Text Color

You can set the color of text:

Example 2: CSS Text Color

<h1 style="color:Tomato;">
Hello World</h1>
<p style="color:DodgerBlue;">
Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">
Ut wisi enim...</p>

CSS Border Color

You can set the color of borders:

Example 3: CSS Border Color

<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>

CSS Color Values

In CSS, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values. Same as color name "Tomato":

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

Same as color name "Tomato", but 50% transparent:

• rgba(255, 99, 71, 0.5)
• hsla(9, 100%, 64%, 0.5)

Example 4: CSS Color Values

No transparency
<h1 style="background-color:rgb(255, 99, 71);">
...</h1>
<h1 style="background-color:#ff6347;">
...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">
...</h1>
With 50% transparency
<h1 style="background-color:rgba(255, 99, 71, 0.5);">
...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">
...</h1>

Learn more about Color Values

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