Similar to HTML, in CSS, colors are specified by predefined color names or values ​​for RGB, HEX, HSL, RGBA and HSLA.

Color name

In HTML, colors can be specified by color names. HTML supports 140 standard color names. Read more at the Color article in HTML.

Background color

You can select the background color for the element in HTML

Hello

Network administrator.

Text color

Similarly, text can also be used in a variety of colors.

Hello

I am.

Border color

You can also change the border color.

Hello

Color value

In HTML, colors are also defined by the values ​​of RGB, HEX, HSL, RGBA or HSLA. The following code shows the same color as 'Tomato'.

.

.

.

This is when setting a transparent value of 50%.

.

.

RGB value

RGB color using formula

 rgb (red, green, blue) 

Each red, green, blue parameter 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). Gray gamut is created using 3 equal values.

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 value red (ff) and 2 green and blue values ​​are equal to 0. The gray color is also used by giving 3 equal values.

# ff0000

# 3cb371

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.

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, 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%)

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%)

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)

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)

Previous lesson: How to use CSS to style HTML pages

Lesson: Background in CSS