Familiarity with CSS/CSS3 color properties

Original: Familiar with CSS/CSS3 color properties

Color attributes are everywhere. Font to use color, background can have color, particle effect is inseparable from color. This article refers to some information briefly summarized for future inspection.

How colors are defined in CSS:

1. Hex Color
2. RGB & RGBA
3. HSL & HSLA
4. Color name

Hex Color

An individual's favorite color expression.

The hexadecimal color is specified as follows: #RRGGBB, where the RR (red), GG (green), BB (blue) hexadecimal integer specifies the color composition. All values must be between 0 and FF.

Generate Random colors:

function Getrandomcolor () {  return ' # ' + (' 00000 ' + parseint (math.random () * 0xffffff). toString ()). Slice (-6);}

Poke the CSS color hex value to see the specific color effect.

RGB and RGBA

RGB color values are defined as: rgb (red, green, blue). Each parameter (red, green, and blue) defines the intensity of the color, either an integer between 0 and 255, or a percentage value (from 0% to 100%).

For example, the RGB (0,0,255) value is shown in blue because the blue parameter is set to the highest value (255) and the other is set to 0.

Similarly, the following values define the same color: rgb (0,0,255) and RGB (0%,0%,100%).

The RGBA color value is an extension of the RGB color value with an alpha channel that specifies the opacity of the object.

The RGBA color values are defined as: Rgba (red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (completely opaque).

Can intuitively feel the next Rgba:rgba color display

If you don't see the effect of the control, open it with chrome

HSL and Hsla

HSL refers to Hue (hue), saturation (saturation), lightness (brightness)-represents the color cylinder coordinate notation.

The HSL color values are defined as: HSL (hue, saturation, lightness).

Hue is the degree on the color plate (from 0 to )-0 (or ) is red, 120 is green, and 240 is blue. You can look at the following picture to feel the following:

Saturation is a percent value, 0% represents a grayscale, does not use any color, and 100% is full color, indicating full use of a color.

The lightness is also a percent value; 0% is black and 100% is white.

You can intuitively feel the HSL (see the effect in Chrome): HSL color display

The HSLA color value is an extension of the HSL color value with an alpha channel-it specifies the opacity of the object.

The HSLA color values are defined as: HSLA (hue, saturation, lightness, alpha), where the alpha parameter defines the opacity. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (completely opaque).

  If we need to make the color brighter or darker in the actual application, HSL is a good choice, such as a:hover when the color turns bright, changing the third parameter value.

  With HSL we can also do some dynamic gradients because the  color is a loop. The color in this demo is used by HSL (poke to see demo)

Color name

Is white, black, red and so on, in fact, there are more, you can refer to the CSS color name

Summarize

• About compatibility:

1. Hex Color (all browsers compatible)
2. RGB (all browser compatible)
3. RGBA (filter compatible under IE)
4. HSL (ie not compatible)
5. HSLA (ie not compatible)
6. Color name (all browsers compatible)

• Resources:

1. CSS Legal Color values
2. CSS3 RGBA
3. The color of Topsy CSS3

Familiarity with CSS/CSS3 color properties