什么场景下会需要程序员来调色？
需要用到主题相关的场景有很多，典型的比如
- 博客
- 项目的主题系统
- 做些简单的演示项目（想要尽量好看些，就需要花心思搞些好看的样式）
通常情况下判断是否需要也很简单，就是看当有这方面需求时，身边有没 UI 的辅助
像我自己的博客，如果不用博客模版就得自己来调色。而我现在在一家小公司工作，UI 组件库虽然提供了多套完善的主题色和尺寸，但老板会有自己的想法，比如想要某些地方颜色淡一点，哪些地方深一点等等，公司是没有 UI 的岗位的，于是我就会需要能通过某些方式来造一些颜色过得去的色块去给老板选
主题系统大致的轮廓
主题系统是个水很深的东西，它包含了很多东西。主题色、文字色、边框、行高、背景色、圆角、通用尺寸、文字尺寸...
其中前端样式中很不起眼的，行高、字号，文字色都是很讲究的东西，它可不是说简简单单整点黑色或灰色凑活能用就行了的。一个页面中会充斥着各种文字和各种边线框框，如果颜色和颜色之间对比度不够，区分不够明显会让人的眼睛看起来很累，如果区分很大，这通常代表着的某些颜色巨深和巨浅，这又会变得奇丑无比
自己搞整套只能说可以试试，但外行搞得肯定是相当的不专业了，不然自己搞得各种乱七八糟的规则，好不好看都是其次的，管理起来也是个头疼事，最优先的做法肯定是通过某种算法生成一些有规律可管理的内容
怎么绘制色盘
调色就是调一个色盘出来，用颜色的时候用的永远是色盘中的某个颜色
根据我的调研比较简单好用的有 4 种形式
- 算法生成。通过给定一个种子颜色，算法会帮你生成多个深色和浅色提供选择，这通常被用于各种花里胡哨的品牌色，提示色等
- 调整透明度。透明度简单来说就是
rgba中a的值，通过不同的透明度来区分，是接受度和难度最低的一种。比如rgba(... 0.1)rgba(... 0.2)rgba(... 0.3)就是很简单不同色阶的色块 - 调整亮度。亮度是
hsl表示中的l的值，通过css filter的brightness()函数也能设置，成本低，实际表现通常会优于透明度的做法 - 混色。混色就是找个深点的基本色，通过按比例强度混度一定量的浅色，来生成不同色块选择，这通常用于 js 或 css 预处理器的颜色函数动态生成
总结下，想要简简单单凑活能用的选 2,3，想要保持灵活度，做一些动态主题的可以尝试选择 1,4，。前者易于上手没有包袱，后者灵活需要额外的配置和性能以及内存开销
怎么拼凑主题系统的规则
颜色根据使用场景可以分为，文字、背景、边线
根据上边的方法我们已经可以情况调出很多可以选择的色块，所以第一步的调色并不难很简单，真正难的是设计，即在什么情况下我应该用什么颜色，才会让页面看起来显得合理一些
既然是设计就没有简单粗暴的固定算法，直接一套搞定所有的，目前找到的比较靠谱但麻烦的方式有 2 种
- 扒 UI 库的源码
- 把 UI 库官网哪些自定义主题（通常是自定义 CSS 变量）都粘出来找规律
这样做的之所以可行，是因为，UI 库基本都是支持用户自定义主题，而用户是不懂主题设计的，于是库作者都会提供某种方式，让用户只需要提供少量的规则，比如一个最简单色块，它就能给你生成用于所有地方的各种深色和浅色
（PS: 通过既定的规则生成的规则不一定会适用于所有情况，也许丑，也许好看，只能说凑活罢了）
不仅仅是颜色，像是尺寸字号行高都是通过某种方法（不一定是算法，比如混色这中直接调用函数进行颜色合成的能叫算法嘛？）生成一些基本选项，然后不同的地方会对它们起一些别名来使用
所以无论是扒源码还是从 css 变量里找规则，它的基本选项只有颜色是最多的（没见过超过 8 个的），其他的就更少了，它们通常都会有编号，比如 primary-1 primary-2 primary-3... 或者 xxx-base xxx-xl xxx-2xl 之类的
基本选项找到后记到一个地方，颜色可以用上边的方式生成，其他的诸如圆角可以是 2 的倍数递增等等自己随便拼几个，都编好号。用的时候参考人家用的是几号，咱就用几号。如果呈现的效果不好看很有可能是以下原因
- 选择颜色基色太丑了
- 比例拿捏的不到位，比如试试以 4 的倍数递增之类的
- 不协调，我们的选项都是基于某种自定义规则创建的，如果不按照这套规则走，只会造成更大的不协调的丑陋感
多色主题系统
多色主题通常是指，亮色主题和暗色主题
像我以前自己写 UI 库就很容易在这里遇见卡点，明明我亮色下整体看起来都很不错，还挺协调的，怎么一切到暗色下就会显得那么丑呢？
其实一套算法生成的色盘是完全够用了，觉得丑很大的原因往往时，颜色的对比度不够明显，或者饱和度不够高。对比不明显就是看起来很费眼，不同地方的区分不明显，颜色饱和度不够会显得页面很脏，看起来很 low
解决办法很简单，调整使用的颜色位置即可
比如亮色下，色盘生成了 10 种颜色，6 号是品牌色，4 号拿来做 hover 色，2 号做禁用色，那么暗色下是不是就能试试反过来，6 号品牌色，5,7 都可以拿来试试作为 hover 色，其他地方同理。至于说饱和度不够，那就把所有颜色往下挪一层，因为越往下颜色越浅，浅色会更加显眼，如果这样还不行，只能说基本色选择不好了
推荐一些可能会用到的包
js 中编辑颜色库
@ctrl/tinycolor也还行tinycolor2用的多
css 预处理器
sass用的最多，内置了颜色编辑库的能力
生成算法
@ant-design/colors维护的最积极的一个@arco-design/color维护不积极，就颜色来说是个人比较喜欢的一款
总结
水很深，误触，最稳妥的做法不是自己瞎折腾，而是找个靠谱的 ui 设计师，或者直接 cv 成品代码使用
毕竟有这时间折腾，就让它丑着吧，摸会鱼喝杯茶它不香吗？~