Colors in HTML

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

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

• AliceBlue
• AntiqueWhite
• Aqua
• Aquamarine
• Azure
• Beige
• Bisque
• Black
• BlanchedAlmond
• Blue
• BlueViolet
• Brown
• BurlyWood
• CadetBlue
• Chartreuse
• Chocolate
• Coral
• CornflowerBlue
• Cornsilk
• Crimson
• Cyan
• DarkBlue
• DarkCyan
• DarkGoldenRod
• DarkGray
• DarkGrey
• DarkGreen
• DarkKhaki
• DarkMagenta
• DarkOliveGreen
• DarkOrange
• DarkOrchid
• DarkRed
• DarkSalmon
• DarkSeaGreen
• DarkSlateBlue
• DarkSlateGray
• DarkSlateGrey
• DarkTurquoise
• DarkViolet
• DeepPink
• DeepSkyBlue
• DimGray
• DimGrey
• DodgerBlue
• FireBrick
• FloralWhite
• ForestGreen
• Fuchsia
• Gainsboro
• GhostWhite
• Gold
• GoldenRod
• Gray
• Gray
• Green
• GreenYellow
• HoneyDew
• HotPink
• IndianRed
• Indigo
• Ivory
• Khaki
• Lavender
• LavenderBlush
• LawnGreen
• LemonChiffon
• LightBlue
• LightCoral
• LightCyan
• LightGoldenRodYellow
• LightGray
• LightGrey
• LightGreen
• LightPink
• LightSalmon
• LightSeaGreen
• LightSkyBlue
• LightSlateGray
• LightSlateGrey
• LightSteelBlue
• LightYellow
• Lime
• LimeGreen
• Linen
• Magenta
• Maroon
• MediumAquaMarine
• MediumBlue
• MediumOrchid
• MediumPurple
• MediumSeaGreen
• MediumSlateBlue
• MediumSpringGreen
• MediumTurquoise
• MediumVioletRed
• MidnightBlue
• MintCream
• MistyRose
• Moccasin
• NavajoWhite
• Navy
• OldLace
• Olive
• OliveDrab
• Orange
• OrangeRed
• Orchid
• PaleGoldenRod
• PaleGreen
• PaleTurquoise
• PaleVioletRed
• PapayaWhip
• PeachPuff
• Peru
• Pink
• Plum
• PowderBlue
• Purple
• RebeccaPurple
• Red
• RosyBrown
• RoyalBlue
• SaddleBrown
• Salmon
• SandyBrown
• SeaGreen
• SeaShell
• Sienna
• silver
• SkyBlue
• SlateBlue
• SlateGray
• SlateGrey
• Snow
• SpringGreen
• SteelBlue
• Tan
• Teal
• Thistle
• Tomato
• Turquoise
• Violet
• Wheat
• White
• WhiteSmoke
• Yellow
• 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)

• 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.
• Saturation is the percentage value, representing the color purity, 0% means gray gamut and 100% pure color.
• 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.

• 100% is completely pure, no gray renders.
• 50% is 50% gray, but can still see the color.
• 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