HTML Colors

Introduction:

For designing the website, color is the essential part. It can be modified depending on the user clicks, how they read text, and how they feel navigating your site. By practising colors and briefly knowledge about color theory, it is very easy for the developer to add color and background properties to the website.

The developer can define these properties in different ways. With the help of hex color codes, RGB color codes, or HSL color values, we can change the text's colour and the webpage's background. Let's discuss the different ways to provide color to the webpage. These are as follows.

HTML Colors in CSS

With the help of HTML colors, we can add color to the webpage. This is because the color name represents the HTML colors. Currently, there are 140 colors supported by the modern browser. Examples of some colors are Orange, gold, cyan, maroon, skyblue etc.

Let's take an example that implements the color properties inside the webpage.

Example 1:

Output:

NOTE: According to the convention, it is recommended not to use the HTML color names. For the human being, it can be challenging to remember all the 140 color names.

Hex Color Codes in CSS

Hexa codes are the combination of the hashtag and three pairs of characters. It represents the intensity of the three primary colors. These three primary colors are red, green, and blue. The possible value of hex color starts from 00(which has the lowest intensity) and ends at FF (which has the highest intensity among the primary color).

The hex code of color consists of six characters in total. The six-character consists of ten numerals (0-9) and six letters (a-f). So there is a total of 16,777,216 possible combinations available for hex color code. Let's discuss some of the combinations of hex color codes.

To create white color, we must mix the three primary colours with full intensity. The hex color code for the white color is #FFFFFF. Similarly, for black color, the hex color code becomes #000000. Similarly, the hex color code is #FF0000 for the blue colour. Some hex colour codes for commonly used colors are written below the table.

Example 2:

Output:

RGB Color Codes in HTML

There is another method by which we can provide color to the HTML. The method name is RGB color code. Here the RGB means Red, Green, and Blue. We can separate these color names with the help of commas. The intensity of these colors ranges from an integer between 0 and 255. We can represent these numbers followed by parenthesis, all in lowercase letters.

We can represent black color as (0, 0, 0), RGB (255, 0, 0) is red, and RGB (0, 0, 255) is blue. With the help of the RGB color, we can also control the opacity of the color. For the opacity of the color, we have to only add an "a" to the RGB () prefix and a fourth value inside the parentheses. The opacity of the color ranges from 0 to 1. If we set the value as 0, then the color is fully transparent, and 1 for entirely opaque. The value 0.5 would render the color at 50% opacity.

Example 3:

Output:

HSL Color Values in HTML

If we want to control the hue, saturation, lightness, and transparency of color, then we have to go for the concept of HSL color values. The format of

HSL is similar to the RGD color codes. The HSL color value consists of three numbers, separated by a comma's help. The parathesis contains these numbers and is preceded by the lowercase "hcl." We can also add "a" as the fourth value, which sets for transparency.

The opacity of the color ranges from 0 to 1. If we set the value as 0, then the color is fully transparent, and 1 for completely opaque. The value 0.5 would render the color at 50% opacity. Similar to the RGB color, the HSL color code also does not represent the intensity of the primary colors. In HCL, we must write the values as a degree instead of a number between 0 and 360. We have to set the value for the red colour as 0 or 360. Similarly, for green and blue, we have to set the value as 120 and 240, respectively.

We must set the value between 0 and 100 for saturation and lightness. If we want a shade of gray, then we have to set the value as 0%, and for full color, we have to set the value as 100%. We must set the black and white colour values as 0% and 100%, respectively.

Example 4:

Output:

Color Gradients

Now we will discuss how to make a background color a solid color. But we can also make the background color a gradient color. Here the gradient color means one color gradually changes to another color in a particular direction, like top to bottom, left to right, or diagonally. We can create this gradient color by taking at least two colors. We can also take more than two colors to create gradient colors. Let's create the rainbow gradient color in the below example.

Example-5

Code

Output:

Example-6

Code

Output: