各位前端大触们，一般怎么定颜色的？

请用 OKLCH，再不济用 HSL，用 rgb 和 hex 你就摆脱不了 UI 的支配

用 HSL 的话，有三个值：hue（色相），saturation（饱和度），lightness（明度）

怎么理解？色相就是“杯子是什么颜色”，饱和度就是“颜色有多浓”，明度就是“在什么样的光强下看”

比如，我有个蓝色 —— 220度（色轮），40%浓度（低饱和度），80%明度（高明度），于是我大概想象一下，就知道最终效果：

于是我得到了一个近似的「莫兰迪」配色

然后按照 UI 配色基本规则：

• 相同内容保持饱和度明度统一
• 用明度变化区分主次
• 用高饱和进行强调
• 一般配色角度偏转 20 - 180 度进行搭配

那你就甚至能纯靠代码实现「看起来说得通的配色」

但要想好看，靠 HSL 不行，得靠 OKLCH 颜色函数

什么意思？HSL 规定的是机器的展示，将三个维度的参数等分

但人眼的感受不是线性的

举个例子，大家都听过耳机，知道耳机有「频响曲线」：

在长期的演化过程中，人耳对不同的频率有完全不同的感受能力：中高频更敏锐，中低频更迟顿

人眼也是一样，因此，OKLCH 用可感知亮度曲线替换了 HSL 中的 lightness

低亮度下对蓝色敏锐，高亮度下对紫色和绿色敏锐：

过暗和过亮，或不同饱和度下，有些颜色不可选：

比如当我明度 66.91， 饱和度 0.229 时，只能选择紫色，绿色和红色：

也就是从人的观感出发，没有其它颜色能与下例颜色搭配：

按照 hsl 和 oklch 配色的区别，直观看就是这样：

前者是机器觉得很搭，后者是人觉得很搭~

不要小瞧这些知识，这些知识是开发界「有损压缩」这个大领域的基础，同是也是你跳过 UI 开发的保证

对了，你是可以直接在代码里写：oklch() 的

PS: 有些颜色不可选不是因为不存在这些颜色，而是在 srgb (rec 709) 等特定色域下不存在，工具里的白色线条指的就是 srgb，而溢出的部分是 p3 色域
你当然可以用更高标准的屏幕实现自由配色，但现如今主流屏幕 adobe rgb 已是极限，更大的诸如 slog 之类的 gamma 都是用在拍摄上的（不然为啥买相机？）
顺便更正一下自己之前的回答中的错误：
Material Design 不是因为色彩太艳不适合中文，而是大多以 p3 色域为目标，而 pc 网页绝大部分展示在 srgb 下，色域错配
新标准 MD 用了偏向莫兰迪的配色，一定程度使配色更加自由，但实际上对高色域的要求更大
刚开始自己做配色时，不要想着拉高设备要求硬上 p3 什么的，不犯错才是最重要的！