实用工具
随机颜色
为设计稿、壁纸或心情选一个颜色和配色——一键完成。
Aa 在此背景上白色文字可读——对比度 5.7 : 1。
如何选色
随机颜色不只是灵感。有时只是需要一个“不一样”的色调来区分测试数据与正式数据、为卡片挑选背景，或看看组合在真实设计稿上的效果。生成器从 1670 万种可能中产生均匀随机的颜色，并立即以三种模型展示。
接下来就是设计：同一色调作为背景、强调色和文字时效果各不相同。因此颜色旁会显示对比度——可以立即判断它是否适合作文字。
HEX、RGB 和 HSL——有什么区别
HEX 和 RGB 描述的是同一件事：三个通道——红、绿、蓝——各有 256 个值。区别只在写法： #7C3AED 或 rgb(124, 58, 237)。这种写法便于代码使用，但对人不太方便：不清楚如何在不改变亮度的情况下“调整”色相。
HSL 把颜色分解为 hue （色相环上的角度，0–360°）、 saturation （饱和度，0–100%）和 lightness （明度，0–100%）。这里逻辑清晰：要得到互补色，只需把色相旋转 180°。正因如此，配色方案在 HSL 中计算，而不是 RGB。
配色方案及其适用场景
| 方案 | 色相旋转 | 适用场景 |
|---|---|---|
| 互补色 | 180° | 背景上的按钮、素雅设计中的强调 |
| 类似色 | ±30° | 渐变、插画、柔和过渡 |
| 三角色 | 120°, 240° | 三个权重相等的类别 |
| 四色 | 90°, 180°, 270° | 浓郁配色、信息图 |
60-30-10 法则有助于避免设计过载：60% 的面积是主色，30% 是辅助色，10% 是强调色。配色方案提供了一组颜色，便于从中选出这三种角色。
对比度与可读性
颜色亮度按 WCAG 公式计算：通道先转换到线性空间，然后按权重相加——红色 0.2126、绿色 0.7152、蓝色 0.0722。两种颜色的对比度是比值 (L1 + 0,05) / (L2 + 0,05)，其中 L1 是较亮颜色的亮度。
普通文本的阈值是 4,5 : 1 （AA 级），大号文本为 3 : 1。生成器会直接选出哪种文字更易读：白色或黑色，并显示得到的比值。如果数值低于 4.5，该颜色适合卡片背景，但不适合文字。
还有个细节：对比度不考虑色盲，也不能替代真实界面中的检查。对于重要状态，请用图标或文字重复表达颜色。
拿到调色板后该做什么
- 复制 HEX 值并粘贴到主题变量中；
- 检查文字对每个背景的对比度，而不只是主背景；
- 同一区块中不要使用超过两种浓郁颜色；
- 保存成功的一组——它无法再次生成。