Colors in HTML

In HTML, colors are indicated by available color names or by values ​​of RGB, HEX, HSL, RGBA, HSLA.

1. Standard color encoding for programmers and designers

Color name in HTML

In HTML, colors can be defined by color names. HTML supports 140 standard colors.

Here is the 148-color name in HTML, you can try each name to see how the correct color will appear on the website.

1. AliceBlue
2. AntiqueWhite
3. Aqua
4. Aquamarine
5. Azure
6. Beige
7. Bisque
8. Black
9. BlanchedAlmond
10. Blue
11. BlueViolet
12. Brown
13. BurlyWood
14. CadetBlue
15. Chartreuse
16. Chocolate
17. Coral
18. CornflowerBlue
19. Cornsilk
20. Crimson
21. Cyan
22. DarkBlue
23. DarkCyan
24. DarkGoldenRod
25. DarkGray
26. DarkGrey
27. DarkGreen
28. DarkKhaki
29. DarkMagenta
30. DarkOliveGreen
31. DarkOrange
32. DarkOrchid
33. DarkRed
34. DarkSalmon
35. DarkSeaGreen
36. DarkSlateBlue
37. DarkSlateGray
38. DarkSlateGrey
39. DarkTurquoise
40. DarkViolet
41. DeepPink
42. DeepSkyBlue
43. DimGray
44. DimGrey
45. DodgerBlue
46. FireBrick
47. FloralWhite
48. ForestGreen
49. Fuchsia
50. Gainsboro
51. GhostWhite
52. Gold
53. GoldenRod
54. Gray
55. Gray
56. Green
57. GreenYellow
58. HoneyDew
59. HotPink
60. IndianRed
61. Indigo
62. Ivory
63. Khaki
64. Lavender
65. LavenderBlush
66. LawnGreen
67. LemonChiffon
68. LightBlue
69. LightCoral
70. LightCyan
71. LightGoldenRodYellow
72. LightGray
73. LightGrey
74. LightGreen
75. LightPink
76. LightSalmon
77. LightSeaGreen
78. LightSkyBlue
79. LightSlateGray
80. LightSlateGrey
81. LightSteelBlue
82. LightYellow
83. Lime
84. LimeGreen
85. Linen
86. Magenta
87. Maroon
88. MediumAquaMarine
89. MediumBlue
90. MediumOrchid
91. MediumPurple
92. MediumSeaGreen
93. MediumSlateBlue
94. MediumSpringGreen
95. MediumTurquoise
96. MediumVioletRed
97. MidnightBlue
98. MintCream
99. MistyRose
100. Moccasin
101. NavajoWhite
102. Navy
103. OldLace
104. Olive
105. OliveDrab
106. Orange
107. OrangeRed
108. Orchid
109. PaleGoldenRod
110. PaleGreen
111. PaleTurquoise
112. PaleVioletRed
113. PapayaWhip
114. PeachPuff
115. Peru
116. Pink
117. Plum
118. PowderBlue
119. Purple
120. RebeccaPurple
121. Red
122. RosyBrown
123. RoyalBlue
124. SaddleBrown
125. Salmon
126. SandyBrown
127. SeaGreen
128. SeaShell
129. Sienna
130. silver
131. SkyBlue
132. SlateBlue
133. SlateGray
134. SlateGrey
135. Snow
136. SpringGreen
137. SteelBlue
138. Tan
139. Teal
140. Thistle
141. Tomato
142. Turquoise
143. Violet
144. Wheat
145. White
146. WhiteSmoke
147. Yellow
148. YellowGreen

Background color

Element can be set as background color as you saw when learning about Style properties.

Xin chào Hello

Network administrator is .

Hello

Network administrator is .

Text color

The font color in HTML is also used in the same way.

le = "color: Tomato;"> Hello

Network administrator.

= "color: MediumSeaGreen;"> Learn HTML .

Hello

Network administrator.

Learn HTML .

Border color

This is an example of creating a border color for an element.

Hello

Hello

Hello

Hello

Hello

Hello

Color value

In HTML, colors can also be specified using RGB, HEX, HSL, RGBA or HSLA color values. Similar to the use of the color name 'Tomato' (tomato red), the following values ​​can be used.

rgb (255, 99, 71)>

# ff6347

hsl (9, 100%, 64%)

rgb (255, 99, 71)

# ff6347

hsl (9, 100%, 64%)

Color code gives the tomato red but with a 50% transparency.

rgba(255, 99, 71, 0.5) rgba (255, 99, 71, 0.5)

hsla (9, 100%, 64%, 0.5)

rgba (255, 99, 71, 0.5)

hsla (9, 100%, 64%, 0.5)

RGB value

A color in HTML can be specified with RGB values. follow the syntax

rgb (red, green, blue)

Each red, green, blue indicates the level of that color, ranging from 0 to 255. For example rgb (255, 0, 0) is red because The highest red value is green and blue is 0. The black value is (0, 0, 0) and the white value is (255, 255, 255)

Try combining values ​​to produce colors. Gray gamut is created using 3 equal values.

le = "background-color: rgb (0, 0, 0); color: rgb (255, 255, 255);"> rgb (0, 0, 0)

rgb (60, 60, 60)

le = "background-color: rgb (120, 120, 120); color: rgb (255, 255, 255);"> rgb (120, 120, 120)

rgb (0, 0, 0)

rgb (60, 60, 60)

rgb (120, 120, 120)

HEX value

Colors in HTML can also be specified with hexadecimal values ​​in the form of:

#rrggbb

Where rr (red), gg (green) and bb (blue) are hexadecimal values, between 00 and ff (similarly 0 - 255 in decimal). # ff0000 will be red because the highest red value (ff) and 2 green and blue colors have a value of 0.

e = "background-color: # ff0000; color: #ffffff;"> # ff0000

# 3cb371

# ff0000

# 3cb371

Colors are also used by giving 3 equal values.

HSL value

Colors can also be specified by color area values ​​(hue), saturation (saturation) and lightness, abbreviated to HSL, in the form of

hsl (hue, saturation, lightness)

1. Color area is the level of color on the color ring, from 0 to 360. 0 is red, 120 is green and 240 is blue.
2. Saturation is the percentage value, representing the color purity, 0% means gray gamut and 100% pure color.
3. Brightness measured in percent, 0% is black, 50% is not bright and dark and 100% white.

hsl(0, 100%, 50%) hsl (0, 100%, 50%)

ground-color: hsl (39, 100%, 50%); color: #ffffff; "> hsl (39, 100%, 50%)

hsl (0, 100%, 50%)

hsl (240, 100%, 50%)

hsl (39, 100%, 50%)

Saturation

Saturation is used to describe the purity and density of colors.

1. 100% is completely pure, no gray renders.
2. 50% is 50% gray, but can still see the color.
3. 0% is completely gray, can't see the color anymore.

hsl(0, 100%, 50%) hsl (0, 100%, 50%)

hsl (0, 50%, 50%)

sl(0, 0%, 50%); color: #ffffff;">hsl (0, 0%, 50%)

hsl (0, 100%, 50%)

hsl (0, 80%, 50%)

hsl (0, 50%, 50%)

hsl (0, 20%, 50%)

hsl (0, 0%, 50%)

Brightness

Brightness indicates how bright you want to be, 0% means not bright (black), 50% is not bright and dark and 100% is completely bright (white).

hsl (0, 100%, 0%)

hsl (0, 100%, 20%)

hsl (0, 100%, 50%)

hsl (0, 100%, 80%)

hsl (0, 100%, 100%)

hsl (0, 100%, 0%)

hsl (0, 100%, 20%)

hsl (0, 100%, 50%)

hsl (0, 100%, 80%)

hsl (0, 100%, 100%)

For gray gamut, the saturation and color area are usually set to 0, brightness from 0% to 100% for darker / brighter shades.

hsl (0, 0%, 0%)

hsl (0, 0%, 25%)

hsl (0, 0%, 50%)

hsl (0, 0%, 70%)

hsl (0, 0%, 0%)

hsl (0, 0%, 25%)

hsl (0, 0%, 50%)

hsl (0, 0%, 70%)

RGBA value

RGBA color value is an RGB color extension, adding an alpha channel - determining the color transparency, with the formula:

rgba (red, green, blue, alpha)

Where the alpha parameter ranges from 0.0 (completely transparent) to 1.0 (opaque).

rgba (255, 99, 71, 0)

rgba (255, 99, 71, 0.4)

rgba (255, 99, 71, 0.8)

rgba (255, 99, 71, 1)

rgba (255, 99, 71, 0)

rgba (255, 99, 71, 0.4)

rgba (255, 99, 71, 0.8)

rgba (255, 99, 71, 1)

HSLA color value

The HSLA color value is an extension of HSL, which adds alpha channels - determining the color transparency, with the formula:

hsl (hue, saturation, lightness, alpha)

Where the alpha parameter ranges from 0.0 (completely transparent) to 1.0 (opaque).

hsl (9, 100%, 64%, 0)

hsl (9, 100%, 64%, 0.4)

hsl (9, 100%, 64%, 0.8)

hsl (9, 100%, 64%, 1)

hsl (9, 100%, 64%, 0)

hsl (9, 100%, 64%, 0.4)

hsl (9, 100%, 64%, 0.8)

hsl (9, 100%, 64%, 1)

Previous post: Comment tags in HTML

Lesson: Style for HTML with CSS