CSS valid color value

Legal color values in CSS can be specified in many ways, including named colors, hexadecimal, RGB, RGBA, HSL, HSLA, and color functions.

The following are several common legal color value formats:

Named colors:Directly use color names, for example: red, blue, green, etc.

color: red;

Hexadecimal color:Usage#RRGGBBor#RGBHexadecimal value of the form.

color: #FF0000; /* 红色 */
color: #f00;    /* 简写形式，红色 */

RGB Color:Usagergb()A function specifies the values of red, green, and blue, each value between 0-255.

color: rgb(255, 0, 0); /* 红色 */

RGBA Colors:similar torgb(), but addsalphaChannel, used to specify opacity, with values ranging from 0 (fully transparent) to 1 (fully opaque).

color: rgba(255, 0, 0, 0.5); /* 半透明红色 */

HSL Color:Usagehsl()The function specifies hue (0-360°), saturation (0%-100%), and lightness (0%-100%).

color: hsl(0, 100%, 50%); /* 红色 */

HSLA Colors:similar tohsl(), but adds an alpha channel for opacity control.

color: hsla(0, 100%, 50%, 0.5); /* 半透明红色 */

CSS color functions.color()：Define colors using a color space, such as color(display-p3 1 0 0). This method allows the use of a wider color space.

color: color(display-p3 1 0 0);

Hexadecimal color

All major browsers support hexadecimal color values.

A hexadecimal color is specified as: #RRGGBB, where RR (red), GG (green), and BB (blue). All values must be between 0 and FF.

For example, #0000FF is rendered as blue because the blue component is set to its highest value (FF) and the others are set to 0.

Example

p {
    background-color:#ff0000;
}

Try it Yourself »

RGB Colors

RGB color values are supported in all major browsers.

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

For example, rgb(0,0,255) is rendered as blue because the blue parameter is set to its highest value (255) and the others are set to 0.

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

Example

p {
    background-color:rgb(255,0,0);
}

Try it Yourself »

RGBA Color

RGBA ColorValueBy IE9, Firefox3+, Chrome, Safari,and Opera10+ Supported.

RGBA color values are an extension of RGB color values with an alpha channel - specifying the opacity of an object.

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

Example

p {
    background-color:rgba(255,0,0,0.5);
}

Try it Yourself »

HSL color

IE9, Firefox, Chrome, Safari, and Opera 10+ support HSL color values.

HSL stands for hue, saturation, and lightness - represented using a cylindrical-coordinate color model.

HSL color values are specified as: hsl(hue, saturation, lightness).

Hue is the degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. Saturation is a percentage value; 0% means a shade of gray and 100% is full color. Lightness is also a percentage; 0% is black, 100% is white.

Example

p {
    background-color:hsl(120,65%,75%);
}

Try it Yourself »

HSLA Color

HSLA color values are supported by IE9, Firefox3+, Chrome, Safari, and Opera10+.

HSLA color values are an extension of HSL color values with an alpha channel - specifying the opacity of an object.

Specify HSLA color values: hsla(hue, saturation, lightness, alpha), where alpha is the opacity defined by the Alpha parameter. The alpha parameter is a parameter between 0.0 (fully transparent) and 1.0 (fully opaque).

Example

p {
    background-color:hsla(120,65%,75%,0.3);
}

Try it Yourself »

Predefined/cross-browser color names

There are 147 predefined color names in the HTML and CSS color specifications. You can view ourPredefined Color Names Table。

other extensions