Shulou(Shulou.com)06/01 Report--

This article mainly shows you "css how to use the color function", the content is easy to understand, clear, hope to help you solve the doubt, the following let the editor lead you to study and learn "css how to use the color function" this article.

Color function 1. Basic concept

We are probably already familiar with the Hex, RGB, and HSL color formats. CSS Color Module Levels 4 and 5 include a whole new set of color functions that enable us to specify and manipulate colors in CSS in an unprecedented way. They include:

Hwb (): hue, whiteness, blackness.

Lab (): brightness and the an and b values that determine the hue.

Lch (): brightness, chromaticity, hue.

Color-mix (): mixes two colors together.

Color-contrast (): outputs the color with the highest contrast compared to the first parameter from the color list.

Color (): specifies colors in different color spaces (for example, display-p3).

two。 Usage

Hwb (), lab (), and lch () are used in much the same way as my rgb () and hsl () functions, with an optional alpha parameter:

.my-element {background-color: lch (80,10050);} .my-element {background-color: lch (8010050 / 0.5);}

Color-mix () mixes the other two colors and outputs one color. We need to specify the color interpolation method as the first parameter:

.my-element {background-color: color-mix (in lch, blue, lime);}

Color-contrast () needs a base color to compare other colors. It outputs the color with the highest contrast, or, with additional keywords, the first color in the list that matches the corresponding contrast:

/ * output the color with the highest contrast * / .my-element {color: white; background-color: color-contrast (white vs, lightblue, lime, blue);} / * output the first color that matches the contrast of AA * / .my-element {color: white; background-color: color-contrast (white vs, lightblue, lime, blue to AA);} 3. Current state

Safari is currently a leader in browser support, with support for hwb (), lch (), lab (), color (), color-mix (), and color-contrast () enabled through flag since version 15. Firefox supports hwb (), and also marks support for color-mix () and color-contrast (). Surprisingly, Chrome doesn't support these functions yet.

It is not difficult to provide style compatibility in your code: given two color rules, if the browser does not support the second color rule, it ignores the second color rule:

.my-element {background-color: rgb (84.08% 0% 77.36%); background-color: lch (50% 100331);}

In this way, when the browser supports this function, it can be used directly.

The above is all the content of the article "how to use the color function in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.