Shulou(Shulou.com)06/02 Report--

This article mainly explains "what are the ways to express color by css". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the ways to express color by css".

When making a page, we often need to set the font color or background color, rich and colorful colors can make the page show a better effect, and there are many colors used in the website, such as text color, background color, border color and so on.

There are several main ways to represent colors in css.

1. Keyword color

The property value is the name of the color.

For example:

Div {

Color:red

}

Effect:

two。 hexadecimal

The principle of hexadecimal representation of color is to use the three primary colors of light: red, green, and blue. The use of these three colors can be combined into many colors, such as red light and green light can be combined into yellow, three colors of light can form white, when there is no light is black.

The following picture shows the three primary colors of light and color:

Hexadecimal colors are represented by hexadecimal bits of # plus six bits, ranging from 00 to ff, with the first two bits representing red, the middle two bits representing green, and the last two bits representing blue.

For example:

# ff0000 stands for red, and this color value contains the maximum number of red, but there is no green and blue, so it is red.

# 00ff00 stands for green, and this color value contains the maximum number of green, but there is no red and blue, so it is green.

# 0000ff stands for blue, and this color value contains the maximum amount of blue, but there is no red and blue, so it is blue.

# 000000 means black. This color value has no color, which means there is no light, so it is black.

# ffffff stands for white, and this color value contains the maximum number of red, green and blue, combined with white.

Hexadecimal 00 to ff, is decimal 0 to 255, so each color has 256 values, the color that can be combined is: 256 "256" 256 "16777216, so many color values are enough to make our page rich and colorful.

Why are the three primary colors here red, green and blue, but different from the red, yellow and blue when we learn art? Because the three primary colors of pigments are used when learning art, and the three primary colors of pigments use the reflection principle of light.

3. RGB

RGB represents colors in the same way as hexadecimal, using the three primary colors of light: red, green, and blue.

R stands for red, red.

G stands for green, green.

B stands for blue, blue.

Values range from 0 to 255, or a percentage.

Rgb (red, green, blue)

For example:

Rgb (255j0j0j0) or rgb (100% dj0j0p0p0) means red.

Rgb (0pr 255je 0) or rgb (0100% pr 0) means green.

Rgb (0Pol 0255) or rgb (0Jol 0100%) indicates blue

Rgb or rgb means black.

Rgb (255255255) or rgb (1000%) indicates white

4. HSL

HSL represents colors by hue, saturation and brightness. Where H is the Hue hue, S is the Saturation saturation and L is the Lightness brightness.

The following image shows the HSL color mode:

H: hue. Is the name of the color. Values range from 0 to 360.

S: saturation. Is the purity of the color, with a value of 0% to 100%.

L: brightness. Values range from 0% to 100%.

Hsl (hue, saturation, lightness)

For example:

Div {

Width: 100px

Height: 100px

Background: hsl (100,80%, 50%)

}

Effect picture:

5. RGBA

The color representation of RGBA is just one more A than RGB. A represents Alpha transparency. Values range from 0 to 1.

Rgba (red, green, blue, alpha)

For example:

Div {

Width: 100px

Height: 100px

Background: rgba (255,0,0,0.5)

}

Effect picture:

If there is a picture later, the effect will be more obvious, the effect picture:

The difference between rgb (255,0,0) and rgba (255,0,0,0.5) effects:

If there is a picture later, the effect will be more obvious, the effect picture:

6. HSLA

The color representation of HSLA is just one more A than HSL. A represents Alpha transparency. Values range from 0 to 1.

Hsla (hue, saturation, lightness, alpha)

For example:

Div {

Width: 100px

Height: 100px

Background:hsla (100,80%, 50%)

}

Effect picture:

If there is a picture later, the effect will be more obvious, the effect picture:

The difference between hsl (100,80%, 50%) and hsla (100,80%, 50% dint 0.5):

If there is a picture later, the effect will be more obvious, the effect picture:

Thank you for your reading, these are the contents of "what is the method of expressing color by css?" after the study of this article, I believe you have a deeper understanding of what the method of expressing color in css has. The specific use of the situation also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.