Color Values and Color Properties in CSS

When using CSS to describe the page style, color is indispensable. Whether it is text, background, border, or shadow, we have written countless codes to add color. In order to make the color performance of the web page better, it is very necessary for us to completely sort out the colors in CSS.
To explain the color in CSS clearly, the concept of color model is inseparable, which we need to understand first.

color model

Color model The mathematical model used to describe colors in computers. The most common one is that RGB模型this model is supported in CSS. In addition, CSS also supports another one: HSL模型.
For the detailed knowledge of these two models, an article was provided to explain it before. You can see the color model that the front end of needs to know .
This blog post also mentions the representation method of the color value of the RGB model supported by the front end. The color value can be expressed in rgb or hex notation, as shown below:

'rgb(255, 0, 0)'
'#ff0000'

And color values HSL模型​​in CSS work just as well:

hsl(0, 100%, 50%)

The above color values ​​all represent red in CSS, and in addition to these color values, there are several representations in CSS.

Types of CSS color values

There are roughly five ways to describe color values ​​in CSS:

• color name
• rgb[a]
• hex hexadecimal value
• hsl[a]
• other keywords

The first three are the most commonly used in our development, and they will be introduced one by one below.

color name

The color name refers to a series of color name values ​​defined in the CSS standard, and each name represents a specific color, such as blackrepresenting black, whiterepresenting white, and so on.
As of the CSS3 standard, a total of 147 color name values ​​are provided, all of which can be used in color attributes in CSS. The following figure shows some color values: using color name values ​​​​in CSS is also very simple and convenient

:

div {
    
    
  color: red;
  background-color: blue;
}

The above code defines the text color of the div as red and the background color as blue.

It should be noted that:
CSS is not case-sensitive, so these color names can be used in both upper and lower case, and it is generally customary to use lower case.
The style's color property has no effect if a color name not defined by the CSS standard is used.

rgb[a]

CSS supports the RGB color model, you can directly use rgb()the class function to represent the color value in CSS, if you bring transparency, yes rgba().
Basic syntax: rgba(r, g, b, a).
Among the parameters:

• r, g, b
  Represents red, green and blue respectively, and the value is 正整数or 百分数. The range is when it is a positive integer 0 - 255, and the range is when it is a percentage 0% - 100%.
  These three values ​​must be written in the same way, either they are all positive integers, or they are all percentages. If they are mixed, the color value will be wrong and the attribute will be invalid.
• a
  Indicates transparency, and the value range is 0 - 1between .

rgbaThe different color states are described by as follows :

// 红色
rgb(255, 0, 0)
rgb(100%, 0%, 0%)

// 带50%透明度的红色
rgba(255, 0, 0, 0.5)
rgba(255, 0, 0, 50%)
rgba(100%, 0%, 0%, 50%)

// 混用，无效值
rgba(100%, 0, 0)
rgba(255, 0%, 0%)

The above code, the final mixed color value is invalid in the front-end page, and needs to be written in a similar way.

New way of writing rgba

In the latest CSS color standard, a new rgba syntax is provided: rgb[a](r g b / a).
The difference is that:

• You can directly use spaces (replace commas) to separate R\G\B, and use transparent channel A to /separate ;
• When you need to set the transparency, you can use it directly rgbwithout carrying it a, and it is also effective;

Such as red with 50% transparency:

rgba(255 0 0 / 0.5)
rgb(255 0 0 / 0.5)
rgb(255, 0, 0, 0.5)

Representing the color as above also displays the color correctly.

Transparency of CSS elements

Transparency is reflected in whether the content is visible. In the display of web content, CSS provides opacitythe attribute to directly describe the transparency value of the element. The value is in 0 - 1the range, 0 means completely transparent, and 1 means completely opaque:

div {
    
    
  opacity: 0;
}

The above code defines opacitythe attribute , so all the internal content of the div will be completely transparent and not displayed, including the border (border), outline (outline), shadow (box-shadow) and so on.

filterAmong the properties provided by CSS3 , transparency can also be set, and the effect is almost the same:

div {
    
    
  filter: opacity(0);
}

hex hexadecimal value

The hex color value representation is actually dependent on the RGB model. For the R\G\Bred, green and blue three-color channels, the color of each channel is marked in hexadecimal, and the value range is 00-ff. So a color corresponds to 3 hexadecimal numbers (usually 6 characters),
plus #the prefix , it can be used to describe the color value, such as red: #ff0000.
When two hexadecimal characters of the same channel are the same, an abbreviation can be used, red #ff0000can abbreviated as #f00.
Transparency can also be added to the hex color value, here is A(alpha)the channel , which is also a two-digit hexadecimal number, such as red with transparency: #ff0000ff.

The hex color value and rgb color can also be converted through js. For the specific code, see the blog post: The color model that the front end needs to understand .
It is mainly based on the conversion between bases. The knowledge of digital bases and base conversions in JS can be found in the blog post: Base and base conversions in Javacript .

hsl[a]

In addition to supporting RGBthe color model also supports another one: the HSL color model. It describes color values ​​in CSS, which is also handled by functions.
For example, the same red:

hsl(0, 100%, 50%)

With transparency, it is hsla:

hsla(0, 100%, 50%, 1)

hslaThe four parameters of the class function are: hue H (hue), saturation S (saturation), brightness L (lightness) and transparency A (alpha).

hslaBecause few people use it in front-end development, many people don't know much about it. For detailed knowledge about it and the conversion between hsl and rgb, you can see the color model that the front-end needs to know .
In addition, there is also an introduction to the color selector based on the hsl model, see the blog post Implementation of a color selector in the front end .

Color Value Keyword

In addition to the above specific color values, CSS also provides several values ​​that can be used in color attributes: transparent, currentColorand inherit.
Among them inheritis the value that all CSS properties are valid, so we won’t go into details here, let’s focus on the first two values ​​that can be used for color properties.

transparent

transparentRepresents a completely transparent color, which is equivalent to a color value with a transparency of 0, which is not visible at all visually.
It has been defined as a color value and can be used in any CSS property that takes a color value:

span.text {
    
    
  color: transparent;
}

In the above code, after setting the text color value, the text content is completely transparent and invisible to the eye.

currentColor

currentColorIndicates the current color. This current color comes from the text color value of the current element or its parent element (back up), that is, colorthe value If no color value is set, the default black value is taken.

Take the own text color value:

div {
    
    
  color: #f00;
  border: 1px solid currentColor;
}

The above code defines that the text color value of the div is red, and the border color is currentColor, then the red value is read.
In addition to the border (border), used in the background-color (background-color), outline (outline), shadow (shadow) and other properties, will read the current text value.

<div class="container">
  <div class="content">content</div>
</div>

.container {
    
    
  padding: 10px;
  width: 200px;
  color: red;
}
.content {
    
    
  border: 1px solid currentColor;
  outline: 2px solid #333;
  box-shadow: 3px 3px 3px currentColor;
}

In the above code,
the parent element defines the color value as red, and the and
attributes in the child element use the value , then the red color will be used, while the gray value is defined, the effect is as follows:borderbox-shadowcurrentColor
outline

Color properties in CSS

The above mainly introduces the color model and the color values ​​supported in CSS. This section will briefly introduce the color attributes in CSS.

Common Color Properties

There are about ten attributes in CSS that can assign color values, and the most familiar and commonly used ones in development should be the following three:

• The color
  text color attribute, which sets the color for the text content of the element.
  The default value of this attribute in general web pages is black.
  is the source of currentColorthe color values.

• The background
  background attribute can set the background color for the element.
  The default is transparent transparent.

• The border
  border attribute can set the color of the border for the element.
  If the border attribute does not set a color value, the color value of the element is used by default.

<div class="content">content</div>

.content {
    
    
  padding: 10px;
  width: 200px;
  color: red;
  border: 1px solid;
}

Above, the border attribute does not set a color value, if the color attribute is set to red, the border is automatically displayed in red, as shown in the following figure:

Other available color properties

• text-decoration
  This attribute is used to add underline, overline, strikethrough and other decorations to the text content, and the color attribute value can be set for it.
  How to use: text-decoration: underline wavy red;.
  The three values ​​represent the line type (text-decoration-line), line shape (text-decoration-style) and line color (text-decoration-color).

• box-shadow
  adds a shadow attribute to the element, and the corresponding color value can be set for the shadow.
  How to use: box-shadow: 4px 4px #ff0;.

• text-shadow
  is used to increase the shadow of the text content, and can also set the corresponding color value, mainly for the text on the page.
  How to use: text-shadow: 2px 2px rgb(255, 0, 0);.

• filter: drop-shadow
  When setting the image filter, you can also use the shadow and set the color value.
  How to use: filter: drop-shadow(8px 8px 10px red);.

• outline
  This attribute will draw the outer outline on the edge of the element, located on the outer edge of the border (border), and can also set the color attribute.
  How to use: outline: 2px solid red;.
  The three values ​​represent the width (outline-width), shape (outline-style) and color (outline-color).
  The method of use is similar to border, but the difference is that outline cannot set a style for a single edge.

• The attribute column-rule
  needs to be used column-counttogether .
  column-count: It is used to divide the content of the div element into several columns for display, and the attribute value is a number, representing the number of columns.
  column-rule: used to specify the line style, width and color between the divided columns.

  column-count: 3；
  column-rule: 10px solid red;
  

  The above code can divide the content of a div into 3 columns, and there is a red solid line with a width of 10px in the middle of each column.
  The three values ​​are the same as the outline above, and also represent the width (column-rule-width), shape (column-rule-style) and color (column-rule-color) respectively.