使用方法
- 输入基色或使用取色器选择。“生成随机基色”会为你随机选取一种颜色。
- 选择配色关系。“明暗色阶”会生成从极浅到极深的 11 级色阶。
- 锁定想要保留的颜色，然后继续尝试其他基色。
- 选择 HEX、CSS 自定义属性或 JSON，设置名称，然后复制代码。
工作原理
配色关系通过在色轮上旋转色相来计算：互补色取相反色相（180°）；类似色取两侧相差 30° 和 60° 的邻近色；三角色取相隔 120° 的三种色相；四角色取相隔 90° 的四种色相；分裂互补色则取互补色两侧的色相（150° 和 210°）。
这里是在 OKLCH 中旋转色相，而不是在 HSL 中旋转。OKLCH 能保持感知亮度稳定，因此同一调色板中的黄色和蓝色看起来亮度相近，不会让黄色显得刺眼。如果旋转后的颜色超出 sRGB 屏幕可呈现的范围，就会降低其彩度，直到颜色落入范围内，同时保持亮度和色相不变。
明暗色阶使用固定的 OKLCH 亮度步长，从 50 到 950 命名，类似 Tailwind CSS 的命名方式。接近白色和黑色时会降低彩度，避免最浅的色调看起来像荧光色。配色关系只是起点：用于内容前，请用对比度检查器检查文字和背景的搭配。
示例
为品牌色搭配强调色
以 #3366cc 为基色选择“互补色”，会得到 #8c6500——一种 OKLCH 亮度相同的暖赭色。蓝色搭配橙黄色是常见的点缀方案，适合用于蓝色品牌的强调色。
组件库的设计令牌
选择“明暗色阶”，将名称设为“primary”，然后导出 CSS 变量。你将得到 --primary-50 到 --primary-950，可用于背景（50–100）、边框（200–300）和文字（700–900）。
探索配色时保留一种颜色
锁定三角色调色板中的第二种颜色，然后尝试不同的基色。锁定的色块会保留其 HEX 值，其他颜色则会随之变化。
常见问题
为什么我的颜色和 HSL 色轮工具的结果不同？
此工具在感知色彩空间 OKLCH 中旋转色相。它的色相角度与 HSL 并不完全对应，因此某种颜色的“互补色”可能与 HSL 色轮工具给出的色调略有不同。
可以在 Tailwind CSS 中使用此 JSON 吗？
此 JSON 将名称映射到 HEX 值，结构与 Tailwind 在主题配置中接受的颜色格式相同。在 Tailwind 4 中，你也可以将 CSS 变量粘贴到 @theme 块中，并将变量名改为 --color-…
生成的调色板符合无障碍要求吗？
不能自动保证。配色关系并不代表文字与背景之间具有足够的对比度。请使用对比度检查器检查每一组准备使用的颜色。
隐私
调色板在浏览器中生成。你的颜色不会发送到任何地方，也不会被存储。