Colors in CSS: Tips and Examples

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.

As an 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 helps 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, 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 typically 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