颜色

基础知识

前端支持的颜色格式有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