css如何使用顏色函數

這篇文章主要為大家展示了“css如何使用顏色函數”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“css如何使用顏色函數”這篇文章吧。

顏色函數

1. 基本概念

我們可能已經很熟悉 Hex、RGB 和 HSL 顏色格式。CSS Color Module Levels 4 和 5 中包括一整套新的顏色函數，使我們能夠以前所未有的方式在 CSS 中指定和操作顏色。它們包括：

• hwb()：色相、白度、黑度。

• lab()：亮度以及決定色調的 a和b值。

• lch()：亮度、色度、色調。

• color-mix()：將兩種顏色混合在一起。

• color-contrast()：從顏色列表中，輸出與第一個參數相比對比度最高的顏色。

• color()：指定不同顏色空間中的顏色（例如display-p3）。

2. 使用方法

hwb(), lab() 和 lch() 的使用方式與我 rgb() 和 hsl() 函數基本相同，都有一個可選的alpha 參數：

.my-element {
  background-color: lch(80% 100 50); 
}

.my-element {
  background-color: lch(80% 100 50 / 0.5); 
}

color-mix() 將其他兩種顏色混合后輸出一種顏色。我們需要指定顏色插值方法作為第一個參數：

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

color-contrast() 需要一個基色來比較其他顏色。它將輸出對比度最高的顏色，或者在提供額外關鍵字的情況下，輸出列表中符合相應對比度的第一種顏色：

/*  輸出對比度最高的顏色 */
.my-element {
    color: white;
    background-color: color-contrast(white vs, lightblue, lime, blue);
}

/* 輸出符合AA對比度的第一種顏色 */
.my-element {
    color: white;
    background-color: color-contrast(white vs, lightblue, lime, blue to AA);
}

3. 當前狀態

Safari 目前在瀏覽器支持方面處于領先地位，從版本 15 就開始支持hwb()、 lch()、lab()、color()，color-mix() 和 color-contrast() 可以通過 flag 啟用。Firefox 支持 hwb()，并且還標記了對 color-mix() 和 color-contrast() 的支持。令人驚訝的是，Chrome 現在還不支持這些函數。

在代碼中提供樣式兼容并不難：給定兩種顏色規則，如果瀏覽器不支持第二種顏色規則，它將忽略第二種顏色規則：

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

這樣，當瀏覽器支持該函數時，就可以直接使用了。

以上是“css如何使用顏色函數”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！