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