CSS Color functions

Functions that specify different color representations. These may be used anywhere a <color> is valid.

color() Allows a color to be specified in a particular, specified colorspace (rather than the implicit sRGB colorspace that most of the other color functions operate in). The @color-profile CSS at-rule can be used to define and names a color profile to be used in the color() function to specify a color.

color(display-p3 1 0.5 0);
color(display-p3 1 0.5 0 / .5);

color-mix() Takes two color values and returns the result of mixing them in a given colorspace by a given amount.

color-contrast() Takes a color value and compares it to a list of other color values, selecting the one with the highest contrast from the list.

device-cmyk() Used to express CMYK colors in a device-independent way.

hsl()The HSL color model defines a given color according to its hue, saturation, and lightness components. An optional alpha component represents the color's transparency.

hsla()The HSL color model defines a given color according to its hue, saturation, and lightness components. The alpha component represents the color's transparency.

hwb() HWB (short for Hue-Whiteness-Blackness) is another method of specifying colors, similar to HSL.

lab() Lab color is device-independent and specifies physical measurements of color.

lch() LCH color is device-independent and specifies color using polar coordinates for chroma and hue.

rgb()The RGB color model defines a given color according to its red, green, and blue components. An optional alpha component represents the color's transparency. CSS Colors Level 4 made some changes to rgb(). In browsers that support the standard rgba() is an alias for rgb(), they accept the same parameters and behave the same way.

background: rgb(255,255,255);

rgba()The RGB color model defines a given color according to its red, green, and blue components. The alpha component represents the color's transparency. CSS Colors Level 4 allows for space-separated in addition to comma-separated values.

background: rgba(255,255,255,.5)
background: rgba(255 255 255 / 0.5);