基礎(chǔ)知識(shí)

前端支持的顏色格式有RGB、HSL （HSV）等很多，這兩種瀏覽器可以直接支持。

RGB

rgba代表著red、green、blue、alpha，通過(guò)紅、綠、藍(lán)、透明四個(gè)維度描述一個(gè)顏色的信息。

HSL

hsla代表著hue、saturation、lightness、alpha，通過(guò)色調(diào)、飽和度、亮度、透明度四個(gè)維度描述一個(gè)顏色的信息。

在開(kāi)發(fā)主題配置時(shí)會(huì)有很多用戶(hù)自定義的場(chǎng)景，如何將用戶(hù)的感覺(jué)量化，讓選擇決策更簡(jiǎn)單？

我們遇到了什么問(wèn)題？

1.如何只給背景增加透明度，讓前景文字顯示正常？

image.png

支持 toRgba('rgb(40 42 54/0.75)', { alpha: 1 }) 覆蓋透明度，讓顏色處理更方便

2.如何讓文字在背景顏色上顯示的更清晰？

image.png

image.png

【灰度化 】自定義背景色后的文字顯示不清，顏色灰度化后按照灰度比例控制文字顏色的黑白顯示。

image.png

【相對(duì)亮度】計(jì)算相對(duì)亮度控制文字黑白顏色顯示，效果更好

3.如何修改顏色明暗度？

image.png

image.png

線(xiàn)性的顏色對(duì)比，rgb顏色更偏向灰度效果

image.png

HSL處理后，更改亮度，效果更好

4.如何生成譜系化推薦色？

image.png

image.png

獲取一個(gè)顏色+100% ～ -100%的色階效果，支持max、min 區(qū)間控制

image.png

給一串顏色，平分中間譜系

5.如何處理顏色疊加問(wèn)題？

image.png

image.png

加50%透明度擬合疊加處理

6.如何根據(jù)背景圖表獲取主題色？

https://www.npmjs.com/package/fast-average-color

還有很多顏色處理的方法，歡迎使用：

https://github.com/DPDFE/react-layout/tree/main/packages/event