Colors are an essential part of any web page. It gives a good look and feel to your website. There are more than 200 colors which are accepted by a browser. In this HTML colors article, we’ll discuss the various colors and methods by which we can include them on our web page.

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.

color

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

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

html-colors.

This will produce the following result.

output-html-colors

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.

hex-code

Here’s an example to explain the hex code.

hexcodes-html-colors.

This will produce the following result.

/output-html-hexcodesoutput-html-hexcodes

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.

/rgb-value

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

rbg-html-colors

This will produce the following result.

output1-html-colors

Here's How to Land a Top Software Developer Job

Full Stack Developer - MERN StackExplore Program
Here's How to Land a Top Software Developer Job

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.

hsl

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

hsl-html-colors

This will change our paragraph background color to orange.

output-hsl

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.

colorpicker.

This will produce the following result.

color-picker

Get skilled in HTML5 and CSS3 with the Full 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.

Our Software Development Courses Duration And Fees

Software Development Course typically range from a few weeks to several months, with fees varying based on program and institution.

Program NameDurationFees
Caltech Coding Bootcamp

Cohort Starts: 7 Oct, 2024

6 Months$ 8,000
Automation Test Engineer Masters Program

Cohort Starts: 7 Oct, 2024

8 months$ 1,499
Full Stack (MERN Stack) Developer Masters Program

Cohort Starts: 7 Oct, 2024

6 Months$ 1,449
Full Stack Java Developer Masters Program

Cohort Starts: 18 Dec, 2024

7 months$ 1,449