基礎(chǔ)知識

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

RGB

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

HSL

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

在開發(fā)主題配置時會有很多用戶自定義的場景，如何將用戶的感覺量化，讓選擇決策更簡單？

我們遇到了什么問題？

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

image.png

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

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

image.png

image.png

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

image.png

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

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

image.png

image.png

線性的顏色對比，rgb顏色更偏向灰度效果

image.png

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

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

image.png

image.png

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

image.png

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

5.如何處理顏色疊加問題？

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