基础知识
前端支持的颜色格式有RGB、HSL （HSV）等很多，这两种浏览器可以直接支持。
RGB
rgba代表着red、green、blue、alpha，通过红、绿、蓝、透明四个维度描述一个颜色的信息。
HSL
hsla代表着hue、saturation、lightness、alpha，通过色调、饱和度、亮度、透明度四个维度描述一个颜色的信息。
在开发主题配置时会有很多用户自定义的场景，如何将用户的感觉量化，让选择决策更简单？
我们遇到了什么问题？
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 区间控制
image.png
给一串颜色，平分中间谱系
5.如何处理颜色叠加问题？
image.png
image.png
加50%透明度拟合叠加处理
6.如何根据背景图表获取主题色？
https://www.npmjs.com/package/fast-average-color
还有很多颜色处理的方法，欢迎使用：
https://github.com/DPDFE/react-layout/tree/main/packages/event
网友评论