Color attribute, color in HTML


Colors in HTML are specified by using color names or values ​​of RGB, HEX, HSL, RGBA, HSLA, refer to the following article of Taimienphi.vn to learn details of color and color properties in HTML.


In the previous article, Taimienphi.vn introduced you to comment tags in HTML. The next article below Taimienphi.vn will introduce you to the color attribute in HTML.

The color attribute is in HTML

Table of Contents:
1. Color attribute in HTML
1.1. Color name
1.2. Background color in HTML
1.3. Set color for text in HTML
1.4. Set color for borders in HTML
1.5. Color values ​​in HTML
1.6. RGB value in HTML
1.7. HEX value in HTML
1.8. HSL value in HTML
1.9. RGBA value in HTML
1.10. HSLA value in HTML

1. Color attribute in HTML

1.1 color name

In HTML, we can specify colors by using color names.

For example: Here is an example of how to specify color in HTML:

color in html

The result will look like this:

color filter in html 2

HTML supports 140 color codes and different color names.

1.2 Background color in HTML

We can set background color for HTML elements.

For example: The following example illustrates background color settings for HTML elements:

color filter in html 3

The result returned after applying a background color in HTML looks like this:

color in html 4

1.3 Set color for text in HTML

In addition to setting the background color, we can also set the color of the text in HTML.

For example: The following example illustrates the color settings for text in HTML:

color filter in html 5

The result returned after applying background color to the text in HTML looks like this:

color filter in html 6

1.4 Set color for borders in HTML

Similarly we can set color for borders in HTML.

For example: The following example illustrates the line color settings in HTML:

color filter in html 7

The result returned after applying color to the border looks like this:

color filter in html 8

1.5 The color value in HTML

In HTML, we can specify colors by using values ​​like RGB, HEX, HSL, RGBA and HSLA.

For example: The following example illustrates the use of color values ​​in HTML:

color filter in html 9

The result returned after applying the color value looks like this:

color filter in html 10

1.6 RGB value in HTML

In HTML, we can specify a color as RBG value, using the formula below:

rgb (red, green, blue)

Each parameter (red, green and blue) determines the color intensity between 0 and 255.

Example 1: rgb values ​​(255, 0, 0) will display in red, because red is set to the highest value (255) and other values ​​are set to 0.

To display black, we just need to set all the color parameters 0, has the following form rgb (0, 0, 0).

To display black, we just need to set all the color parameters 255, has the following form rgb (255, 255, 255).

Example 2: In the following example we are going to mix RBG values:

color filter in html 11

The result returned after applying RBG values ​​is as follows:

color filter in html 12

To display dark colors, we use equal values.

Example 3: In the example below illustrates the dark colors:

color filter in html 13

The result will look like this:

color smoke in html 14

1.7 HEX value in HTML

To specify colors in HTML using Hex values, we use the following formula:

#rrggbb

In the above formula rr is red (red), gg is green (green) and bb is blue is the hexadecimal values ​​in the range 00 and ff.

Example 1:# ff0000 The display is red because red is set to the highest value (ff) and other values ​​are set to the lowest value (00).

color filter in html 15

The result will look like this:

color filter in html 16

To display dark colors, we use equal values.

Example 2: The following example shows the dark colors:

color filter in html 17

The result will look like this:

color filter in html 18

1.8 HSL value in HTML

In HTML, colors can be specified using hue, saturation and lightness (HSL) as:

hsl (hue, saturation, lightness)

In the above formula:

– Hue values ​​from 0 – 360. 0 is red, 120 is green and 240 is blue.

– Saturation is from 0 – 100%, where 0% is gray and 100% is full.

– Lightness is from 0 – 100%, of which 0% is black, 50% is light or dark and 100% is white.

For example: The following example illustrates how to use HSL values ​​in HTML:

color filter in html 19

The result will look like this:

color filter in html 20

1.9 RGBA value in HTML

The RGBA color value is an extension of the RGB value with the alpha channel – specifying the opacity of the color.

RGBA color values ​​are indicated by the formula:

rgba (red, green, blue, alpha)

In the above formula, the alpha parameter is a number between 0.0 (completely transparent) and 1.0 (not transparent).

For example: Here is an example of RGBA value in HTML:

color filter in html 21

The result will look like this:

color filter in html 22

1.10 HSLA value in HTML

The HSLA color value is an extension of the HSL color value with the alpha channel – specifying the opacity of the color.

HSLA color values ​​are indicated by the formula:

hsla (hue, saturation, lightness, alpha)

In the above formula, the parameter alpha is a number between 0.0 (completely transparent) and 1.0 (not transparent).

For example: Here is an example of the HSLA value in HTML:

color filter in html 23

The result will look like this:

color filter in html 24

https://thuthuat.taimienphi.vn/thuoc-tinh-color-rong-html-50612n.aspx
The above article Taimienphi.vn has just introduced you to the color attribute in HTML. In the next article, Taimienphi.vn will introduce you more about properties style in HTML.

.

Add a Comment

Your email address will not be published. Required fields are marked *