An Introduction to HTML Colors

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.

Free Course: Programming Fundamentals

Learn the Basics of ProgrammingEnroll Now
Free Course: Programming Fundamentals

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

Full Stack Java Developer Course

The Gateway to Master Web DevelopmentExplore Course
Full Stack Java Developer Course

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.

About the Author

Aryan GuptaAryan Gupta

Aryan is a tech enthusiast who likes to stay updated about trending technologies of today. He is passionate about all things technology, a keen researcher, and writes to inspire. Aside from technology, he is an active football player and a keen enthusiast of the game.

View More
  • Disclaimer
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.