New CSS Color Functions(part 2)

In this article, we’ll introduce some of the new color specification methods available with CSS Color Module Level 5. We’ll review their advantages and we’ll show how these color functions may be used. We’ll also discuss browser support for these new methods.

color-mix

The color-mix() the function returns the result of two colors mixed in specified percentages. For example, color-mix(in lch, purple 50%, plum 50%) produces a mixture of 50% purple and 50% plum.

If you’ve worked with Sass previously, this probably looks familiar. It is very similar to the Sass color mix function: mix($color1, $color2, [$weight]), where the $weight the parameter specifies the percentage of $color1 to be added.

Syntax:

color-mix(in lch, purple 50%, plum 50%)

color-contrast

The color-contrast() the function helps developers build websites that are accessible to people with differences or impairments in vision. The higher color contrast between the content and background improves the readability of text and non-decorative images.

color-contrast() compares the values of two colors from a list. The colors are examined from left to right, and the browser chooses the first color that matches the specified color ratio. If no color matches the desired color ratio, the color with the highest value (highest contrast) is selected.

Syntax:

//here no color ratio is stated, so it picks the color with the highest contrast ratio

color-contrast(wheat vs tan, sienna, #b22222, #d2691e)

// here a color ratio is stated and the color in the list that meets the specified ratio is picked.

color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AA)

color()

As specified in the CSS Color Module Level 4, the color() function allows the browser to display colors in any color space. This includes the display-p3 color space, which can display a larger range of colors compared to the conventional sRGB color space. In the new Level 5 specifications, the color() the function is allowed to extend to custom color spaces.

Syntax:

color(display-p3 -0.6112 1.0079 -0.2192);
//with an optional alpha channel
color(display-p3 -0.6112 1.0079 -0.2192 / .3);

The color() function syntax takes the following form:

• An indent or dashed ident that specifies the color space. An indicates a predefined color space (for example, display-p3). However, a specifies a custom color space
• One or more number or percentage values specify the parameter values that the color space takes
• An optional alpha value

accent-color

Styling form controls can be tedious and frustrating. Developers are often faced with the choice of adopting the browser’s default styles or designing them from scratch in order to have styling freedom. The CSS accent-color the property allows us to change the color of accented form controls provided by the browser’s default styles to a custom color value.

Syntax:

.element{
  accent-color: #010101;
}

Browser support

Some of the methods introduced above are still considered experimental, since they do not have full browser support as of the time of this writing. Below is a summary of current browser support for the CSS color methods discussed in this article.

• color-mix: not available by default on the latest release of any web browsers; however, it can be enabled on Safari with the CSS color-mix() flag and on Firefox by setting layout.css.color-mix.enabled it to true
• color-contrast: not available by default on the latest release of any web browsers, but it can be enabled with the CSS color-contrast() flag on Safari
• color: not available by default on the latest release of any web browsers, but it supports the display-p3 predefined color profile on Safari
• accent-color: currently supported on all browsers except for Internet Explorer

Thanks for reading.