An Introduction to HTML Colors (2024)

HTML Color Coding Methods

There are mainly three types of methods to the set colors on your web page, they are as follows:

Color Names

You can directly specify a color name to set the text or background color.
Here’s the list of 12 standard color names.

There are over 200 different color names supported by the web browser.

Let’s make a web page to understand the working of colors.

This will produce the following result.

Hex Codes

A hexadecimal code is a six-digit representation of a color. It is represented in #RRGGBB format, where (RR) represents the red value, (GG) represents the green value, and (BB) represents the blue value.

Here’s an example to explain the hex code.

This will produce the following result.

RGB values

An RGB color represents RED, GREEN, and BLUE light sources. It is represented as
RGB(red, green, blue).

The following are the few colors with RGB value.

Here’s an example to understand how RGB colors work.

This will produce the following result.

HSL Color Values

HSL stands for hue, saturation, and lightness. In HTML, color can be specified using an HSL value.

HSL(Hue, Saturation, Lightness)

Hue is measured in degrees of the color circle ranging from 0 to 360 degrees (red=0°, blue=120°, green=240°). Saturation is measured in percent (100% full saturation, 0% shade of gray). Lightness is also measured in percent (100% is white, 0% is black, 50% is normal).

Let’s look at some primary colors with their HSL values.

Let’s change our paragraph background to orange by adding HSL value.

This will change our paragraph background color to orange.

HTML Color Picker

The <input type=”color”> defines an input field for the color picker. Let’s see how we can make a color picker.

This will produce the following result.

Get skilled in HTML5 and CSS3 with theFull Stack Java Developer Master's Program. Click to check out the program details!

Next Steps

We hope that this article on HTML colors helped you to understand color attributes and different ways in which we can set the colors. We discussed several color codes and how we can change the background and text colors. But to learn more about web development in its entirety, certification is highly recommended and could act as a catalyst for your coding career.

Simplilearn’s Full Stack Java Developer will help you master the world of web development. The course will give you the essence of front-end, middleware, and back-end Java web developer technologies. You will learn to build an end-to-end application, test and deploy code, store data using MongoDB, and much more.

If you have any questions or feedback, let us know in the comments section. Our experts will get back to you immediately.