色彩和谐生成器

配色和谐生成器的工作原理

工具功能

配色和谐生成器会从单一基础色相计算出数学相关的配色集合：互补色、类似色、三分色、四分色、方形配色、分裂互补色、单色以及明暗变化。每个调色板都会展示 HEX、RGB 和 HSL 值，你可以一键复制并直接用于 CSS 或设计令牌。

常见开发者使用场景

设计师通过探索品牌色相在不同和谐规则下的变化来打样品牌调色板。前端开发者从主品牌色中衍生按钮、提示、徽标等的强调色。数据可视化工程师选择看起来有意图且仍易区分的分类配色。产品经理在评审设计方案时对比不同调色板选项，无需专门的设计工具。

数据格式、类型或变体

提供八种方案：互补色（基础色 + 180°）、类似色（基础色 ± 30°）、三分色（3 种颜色相隔 120°）、四分色（矩形 4 色）、方形配色（4 种颜色相隔 90°）、分裂互补色（基础色 + ±150°）、单色（同一色相，不同明度 10–90%）以及明暗变化（同一色相，从深到浅）。每种颜色都包含其 HEX、RGB 和 HSL 表示，并附带角色标签。

常见陷阱与边界情况

由极低饱和度或接近灰阶的基础色推导出的和谐配色，在不同方案之间看起来几乎无法区分——建议从饱和度更高的基础色开始。高饱和度基础色搭配三分色或四分色方案可能会产生过于强烈、难以平衡的调色板；用于 UI 时可考虑降低饱和度。部分由和谐规则推导出的组合可能无法满足 WCAG 对比度要求——上线前务必在颜色对比度工具中验证文字/背景配对。

何时使用此工具而非代码

使用浏览器工具进行构思、快速探索和设计评审。在代码中，chroma.js、colord 或 culori 等库可让你以编程方式计算和谐配色，将其集成到设计令牌的构建流水线中，并将和谐计算与 Oklch 等感知均匀的色彩空间结合，以获得更均匀观感的调色板。