配色方案生成器

为什么好的配色方案能撑起整个设计

颜色选错了，人们还没来得及说出原因就已经感觉到了。页面看起来廉价，logo 显得浑浊，图表变成一团杂乱。颜色选对了，作品就豁然开朗：它显得用心、平静、易于浏览。颜色在背后默默做了很多事，它营造氛围、引导视线，并告诉读者什么才是最重要的。所以配色方案不是收尾时随手加上的装饰。它是你早早就要做出的决定，而几乎所有其他东西都依赖于它。

好消息是，你不需要美术学位也能搞出一套扎实的方案。你需要的是色彩理论里的几条规则，外加一种快速尝试想法的方法。这正是生成器的用途：它让你在过去纠结一个配色的时间里，就能快速翻过几十种组合。

色彩理论，去掉那些术语

大多数和谐配色都源于一个简单的道理：颜色在色环上彼此相对的位置。学会四种模式，你就能读懂或搭建出几乎任何方案。

• 互补色使用色环上正对面的两种颜色，比如蓝色和橙色。它充满活力，非常适合抓住注意力，不过两者用得太多会互相争夺焦点，所以让一种主导，另一种作为点缀。
• 邻近色使用色环上相邻的三种颜色，比如红、橙、黄。它对比度低、平静柔和，是大自然中随处可见的那种和谐。看起来很舒服，但你可能需要在某处加些对比，免得画面过于平淡。
• 三角色使用色环上均匀分布的三种颜色，比如红、黄、蓝。它明亮而平衡，当一种颜色主导、另外两种作辅助时效果最佳。
• 单色只用一种色相，变化它的明度和饱和度。它是最不容易出错的方案，干净又统一，当其他都不对味时是个稳妥的退路。

随机生成器作为灵感来源很有趣，但真正的价值在于和谐模式。它们让你的颜色在数学上彼此关联，所以哪怕你还没做任何调整，它们看起来也像是天生一对。

用大白话讲清 HEX、RGB 和 HSL

你复制的每种颜色都有几种表示法，它们只是用不同方式描述同一个东西。

HEX是你最常见到的六位字符代码，比如 #3A7BD5。它其实就是把红、绿、蓝打包进一个字符串，每种各占两个字符。它紧凑，也是你粘贴进 CSS 或设计工具里的那种格式。

RGB把这三个相同的通道写成 0 到 255 的数字，比如 rgb(58, 123, 213)。同样的颜色，更便于阅读，当你想用 alpha 通道做透明效果时也很方便。

HSL按人们实际思考的方式来描述颜色：色相（哪种颜色，色环上 0 到 360 度）、饱和度（多鲜艳）和明度（多亮）。它是手动调整时最容易上手的格式，因为微调明度或饱和度会精确地产生你预期的效果，不用瞎猜。如果你需要在格式之间转换，一次快速的 HEX 转 RGB 就能轻松搞定。

别忘了对比度和无障碍

一套配色可能看着美极了，可一旦有人试图在上面读文字就立刻崩了。对比度正是漂亮与好用的交汇点。Web 内容无障碍指南设了一条清晰的底线：正文文字与背景的对比度至少应达到 4.5:1，大号文字至少 3:1。这不是繁文缛节，而是读者轻松读完你页面、还是眯着眼放弃离开之间的区别。

务实的做法是在搭建过程中就测试前景与背景的搭配，而不是事后再补。白底上的浅灰在效果图里可能显得优雅，到了大白天的手机上却会变得几乎看不见。当某个组合不达标时，你通常只需把一种颜色调深或调浅，而不必推翻整套方案。把鲜艳的强调色留给按钮、链接和高亮，而不是大段文字，你就能在大多数对比度问题出现之前避开它们。

一套务实的工作流程

这里有一套在不同项目里都行得通的流程。先从一个你确信的锚定色开始，通常是品牌色或一种契合你想要氛围的色相。锁定它，然后让生成器围绕它搭建和谐配色。在互补色、邻近色和三角色之间循环，直到某个让你觉得对味为止，第一轮别想太多；你是在寻找一个方向，而不是最终答案。

一旦有了候选方案，就分配角色。挑一种主色用于背景和大块区域，一种辅色用于结构，再加一种抢眼的强调色用于需要突出的地方。一个宽松的 60-30-10 分配（主色、辅色、强调色），既能保持平衡又不显得死板。然后检查每一处文字搭配的对比度，复制十六进制色值，就完成了。把好用的方案存下来，因为你为一个项目搞定的配色，往往就是下一个项目的种子。当你准备继续搭建时，我们其余的全部生成器合集可以处理其他部分。

常见问题