配色方案生成器能把一个基础色变成一套完整、和谐的配色，使用经典色彩理论方案：互补、类似、三色、四色和单色。选好你的设计已经围绕的那个颜色，挑一种和谐方案，就能得到可直接用于 CSS、设计工具或品牌规范的 HEX 色值。它面向建立系统的产品设计师、需要一个品牌色配套的悬停与边框色阶的开发者，以及任何想要一套看起来是有意为之而非随手拼凑的配色的人。
如何使用
- 设定基础色。 粘贴一个 HEX 色值或使用取色器。这是整套配色所围绕的色相——通常是你品牌的主色。
- 从五种和谐方案中选择一种。 预览会立即更新，因此比较各种方案只需几秒。
- 把色块作为一个整体来审视。 看它们是否成套：强调色能否从基础色中清晰分离，明度范围是否足够搭建一个界面？
- 复制任意 HEX 色值，点击对应色块即可，随时粘贴进 CSS 变量或设计工具。
五种和谐配色及各自适用场景
每种方案都是色轮上固定的几何关系，而这种几何关系预示了结果给人的感觉。
- 互补色（相隔 180°）。 两个相对的色相——最大对比与张力。最适合用作基础色加一个小强调色，例如主色与其行动号召色。把这一对铺在大面积上，界面就开始「发抖」。
- 类似色（约在 ±30° 以内）。 彼此相邻、自然融合的色相。这是背景、插画和沉稳统一产品最安全的选择。风险是整套路配没有足够强的强调色来吸引视线。
- 三色（相隔 120°）。 三个均匀分布的色相，均衡而鲜明。当你想要一个不止一种强调色的鲜明识别度时很合适，也是活泼品牌的常见基础。让一个色相主导、另外两个克制使用即可取得平衡。
- 四色（90° 矩形）。 四个色相，丰富多变。最难平衡——选一个作主色，用一个作辅助，其余两个留给小面积高光。
- 单色（一个色相，变化明度）。 最稳定可用的配色：一个色相搭配若干明度和饱和度层级。非常适合仪表盘和极简界面，能在不引入新颜色的情况下建立层次。
实操示例
示例 1——扩展一个品牌色。 一个品牌蓝 #3B82F6 变成营销网站的类似色配：基础色留给按钮和链接，较浅的邻近色作区块背景，单一互补强调色标记主行动号召。页面于是有了一套系统，而不是一个颜色反复出现。
示例 2——界面状态色阶。 从单色配色中，为同一个色相生成五个明度层级。最浅的用于悬停背景，中间色用于基础按钮，最深的用于按下状态。因为色相始终不变，这些状态读起来像是同一个元素处于不同条件——这正是用户的预期。
示例 3——插画情绪板。 一位规划场景的插画师，为热闹的构图选一套三色组合，或为忧郁的构图选一套类似色组合，把色块钉在画布旁，让分镜之间的色彩脚本保持一致。
从配色到无障碍界面
配色解决的是美学问题，对比度解决的是可读性问题。采用一套方案前，测试那些真正会一起出现的配对：正文文字与页面背景、按钮文字与按钮填充、链接色与周围文字。WCAG 要求普通文本达到 4.5:1 的对比度，大号文本达到 3:1，而一套纯粹靠色相旋转搭出的配色很容易两者都不达标。实用的流程是：先生成配色，再专门为文字推导一个加深的强调色变体，并用对比度检查器验证该变体，而不是想当然地认为饱和的原色会通过。
常见错误
- 让互补色双雄等重。 两个相对的颜色在整个页面上互相较劲会令人疲惫；让一个主导，另一个只作强调。
- 以为和谐就等于无障碍。 颜色关系与可读性是两个不同的问题，需要不同的工具。
- 忽视明度范围。 一套停留在 50% 明度附近的配色没有留给背景和边框的空间；推导浅色与深色变体。
- 两个颜色够用时却加第四、第五个。 每多一个色相，界面读起来不一致的概率就更高。基础色加强调色能覆盖大多数产品。
- 忘记深色模式。 为白底调好的配色往往在深色背景上失败；生成一套单独的深色配色，而不是复用相同的值。
功能特性
- 五种和谐方案：互补、类似、三色、四色、单色
- 支持任意基础 HEX 颜色，可输入或可视化取色
- 立即并排预览生成的色块
- 点击即可复制任意 HEX 色值，用于 CSS 或设计工具
- 在 HSL 空间计算，保证色相关系准确
- 完全在浏览器中运行，无需账号
使用场景
- 网页设计： 把一个品牌色扩展成可用的整套配色。
- 品牌设计： 探索能支撑 Logo 的强调色。
- 界面开发： 从单一色相生成悬停、边框和禁用状态色。
- 插画： 动笔前先规划色彩脚本。
- 演示文稿： 用一套小而明确的颜色保持幻灯片视觉一致。
相关工具
常见问题
新项目应该选哪种和谐配色？
想要稳妥专业的效果，就从类似色或单色开始；需要强烈强调色时，再考虑互补色或三色。类似色配色停留在狭窄的色相带内，读起来平静统一；单色保留单一色相并变化明度，几乎不可能出错。互补色和三色产生高对比的强调色，非常适合行动号召，但铺满整个界面会显得刺眼。
为什么工具在 HSL 而不是 RGB 或 HEX 中计算？
因为和谐是色轮上的几何关系，而 HSL 恰好暴露了这些坐标。色相是角度，饱和度是到灰色的距离，明度是黑与白之间的位置。三色方案把色相旋转 120° 在 HSL 里是干净的操作，而在 RGB 里等价操作需要变换多达三个相互依赖的通道。
生成的颜色可以随意用于商业项目吗？
可以。颜色值是关于光的数学事实，不是创作作品——HEX 代码不能被版权保护或注册为商标。你可以在客户项目、产品和品牌中使用输出。唯一实际的注意事项是商标：在某些司法辖区，特定颜色可以作为品牌标识，所以不要照搬竞品的标志性色号来做自己的识别。
为什么某些配色放进设计里显得很闷？
通常是因为每个颜色都处于中等明度。五个颜色全在 50% 明度会显得扁平；真实界面需要层次。有了和谐方案后，为每个色相生成一个浅色调和一个深色调，用于背景、边框和悬停状态，把饱和的中间色留给强调。
这些配色已经满足无障碍对比度要求了吗？
没有——和谐只保证颜色看起来相关，并不保证任意一对都易读。对比度取决于具体文字色与具体背景色之间的明度差，所以互补的绿色和红色可能视觉上很抢眼，却严重不满足 WCAG。上线前请用对比度检查器核对每一对文字/背景组合。
可以从照片或现有 Logo 生成配色吗？
先取出你想作为起点的确切颜色——取色器可以从图片中读取它——然后把那个 HEX 值粘贴到这里作为基础色。生成器会把一个起始色扩展成完整一套，这通常就是从单个 Logo 颜色构建品牌一致色阶和强调色所需的全部。
由 HandyTools Hub 团队审校 · 最后更新