HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.

Colors are very to give a decent look and feel to your site.

In this article, you will learn-

0.1 Defining HTML Colors
0.2 Color Names
0.3 Background Color
0.4 Hello World
0.5 Text Color

1 Hello World
- 1.1 Border Color
2 Hello World
3 Hello World
4 Hello World
- 4.1 Color Values

Defining HTML Colors

There is no special HTML color tag, as the design isn’t the main function of HTML. Coloring your site is a piece of CSS inline styling. This means you need to use the style attribute in the opening tag you wish to add HTML color to.

You may use the color property to change the color of your text, or background color to change the color of the background. Both of these properties take color names, RGB, RGBA, HEX, HSL, or HSLA values.

Color Names

In HTML, a color can be specified by using a color name:

Background Color

You can set the background color for HTML elements:

Hello World

Learn HTML

Example

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

Output

Hello World

Lorem ipsum…

Text Color

You can set the color of text:

Hello World

Welcome to HTML Tutorial

Learn HTML

Example

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

Output

Hello World

Welcome to HTML Tutorial…

Learn HTML…

Border Color

You can set the color of borders:

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

Output

Hello World

Color Values

In HTML, colors can likewise be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.

The accompanying 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 adds 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>

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.