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.

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


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


Hello World

Lorem ipsum…

Text Color

You can set the color of text:

Hello World

Welcome to HTML Tutorial

Learn HTML


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


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>


Hello World

Hello World

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)


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)


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


Leave a Reply

Avatar placeholder