如何为您的设计生成调色板

颜色是人们看到一个网站、应用或设计时首先注意到的事物之一。一套精心挑选的调色板能营造一致而专业的感觉。挑得不好,则会让好内容也显得不对劲,而无障碍问题可能悄无声息地把数百万用户拒之门外。你不必是设计师才能选出好颜色。色彩理论给你可靠的公式,把这些公式与无障碍检查结合起来的工具,可以把可用的调色板变成五分钟的事。

色彩理论简史

艾萨克·牛顿在 1666 年前后建立了第一个色轮,把可见光谱弯成一个圆形,首尾相接。约翰·沃尔夫冈·冯·歌德在 1810 年的《色彩论》中扩展了这一构想,关注颜色给人的感受,而非其物理构成。阿尔伯特·孟塞尔在 1905 年将其系统化,分离出色相、明度与饱和度,赋予设计师"更暗的红"与"更饱和的红"的词汇。

20 世纪带来了感知色彩空间。CIE Lab(1976)首次把"相等数值距离对应相等感知差异"作为真正的目标。HSL 与 HSV(1978)给程序员更易用的抽象。现代 Web 设计已转向 OKLCH(2020)与 OKLAB,即感知均匀的色彩空间,终于让"明度 50%"在不同色相下都真的看起来一样亮。这一进展之所以重要,是因为它让调色板生成器产生的明暗色阶在不同颜色间真的看起来一致,而不仅仅是在数字上相关。

色彩和谐模式

和谐模式基于色轮上颜色之间的关系。每一种带来不同的感受:

互补色,两种正对面的颜色(例如蓝与橙、红与绿)。对比强烈、富有能量。适合需要突出的行动召唤元素,但要克制使用,因为这种张力可能显得吵闹。

相邻色,色轮上相邻的三种颜色(例如蓝、青蓝、绿)。和谐而舒缓。适合背景、自然主题的设计,以及一切都应感觉相关的调色板。

三分色,色轮上等距分布的三种颜色(例如红、黄、蓝)。生动而平衡。适合俏皮、创意或儿童向的设计。

分裂互补色:一种颜色加上其互补色两侧相邻的颜色。对比类似互补色但张力更小;在界面中往往更可用。

四方色(或矩形色):由两对互补色组成的四种颜色。丰富多样,但难以平衡;通常由一种颜色主导,其余作为点缀。

正方色:色轮上等距分布的四种颜色。变化最大,强调相等。除非将其中三种保留为小点缀,否则很难用好。

单色:同一种颜色的不同明暗与色调。始终和谐、显得高级,但过度使用会缺乏视觉趣味。非常适合编辑式排版与极简品牌系统。

无彩色:仅黑白灰。经典报纸或高对比杂志风。常常搭配一种明亮的点缀色。

如何生成一套调色板

1. 选择和谐模式:从随机、相邻、互补、三分、分裂互补、四方或单色中选一种,设定颜色之间的关系。
2. 挑一个起始色:输入品牌色、从参考图中取色,或让生成器代你挑。
3. 锁定你喜欢的颜色:找到想保留的颜色时,把它锁定,然后重新生成其余颜色,直到整套调色板协调一致。
4. 调整明度与饱和度:多数生成器允许独立微调每个颜色的明度与饱和度,确保调色板在亮度上有足够变化以适配 UI 工作。
5. 做无障碍检查:确认文字与背景组合达到 WCAG AA(4.5:1)或 AAA(7:1)对比度。
6. 导出,复制 HEX 代码、CSS 变量、Tailwind 配置、ASE 色卡,或把调色板存为图片,带到 Figma、Sketch 或 Canva 等设计工具中。

构建可用的调色板

调色板不仅仅是一组好看的颜色。对真正的项目,你通常需要:

一种常见的现代模式是为每种颜色生成 10 级明度阶(50、100、200、……、900),足以涵盖按钮、悬停态、禁用态以及暗色模式等价物的细微差别,而无需手工微调。

色彩空间及其对调色板的影响

你在哪个空间生成,塑造了颜色之间的关系。现代调色板工具允许切换。

2024 年大多数 Web 工作,在 OKLCH 中生成、为兼容性导出为 HEX。现代浏览器的 CSS 已原生支持 oklch(),因此你也可以直接把 OKLCH 值保留在样式表中,以获得更丰富的颜色操控。

无障碍,不只是美学

再漂亮的调色板,如果一部分受众读不到,也就没用。三项检查能把好看的调色板变成包容的调色板。

WCAG 对比度衡量文字与背景的可区分度。标准阈值:

色觉障碍模拟:大约 8% 的男性和 0.5% 的女性有某种色觉缺陷,最常见的是红绿色盲。把你的调色板送进模拟器(绿色弱视、红色弱视、蓝色弱视),确保信息不仅仅靠颜色传达。

APCA(Advanced Perceptual Contrast Algorithm)是 WCAG 3.0 中 WCAG 对比度的候选替代。它对感知建模优于老公式,对落在相近背景上的文字尤其重要;把它作为 WCAG 2.x 的第二意见使用。

获得最佳效果的小贴士

• 从一种颜色出发,先挑一个你喜欢的主色,再用和谐模式找出与它互补的颜色。这比独立挑 5 种颜色容易得多。
• 在真实内容上测试,在色卡上很漂亮的调色板,落到真实的文字、按钮和背景上未必行得通。始终在真实 UI 上测试。
• 生成明度阶,与其只挑一个"蓝色",不如生成 10 级、由极浅到极深的阶梯。浅的用于背景,深的用于文字,中间用于点缀。
• 少即是多,3 个精心挑选的颜色比 7 个看起来更专业。把界面大部分留给中性色,把鲜亮颜色留给真正重要的地方。
• 从摄影中取色,用滴管在参考照片上取色,得到扎根现实的调色板。Coolors、Color Hunt 与专门的取色工具点一下就行。
• 留意暗色模式,同时生成浅色与暗色变体。在白色上奏效的主色,放到黑色上可能刺眼;OKLCH 让你在不偏移色相的情况下只调整明度。
• 记录理由,把每个颜色为何如此(品牌对齐、无障碍约束、情绪)写下来。未来的你会感谢现在的你。

常见陷阱

• 在 HSL 中挑色又在 HSL 中呈现,HSL 中等明度数值看起来并不相等,因为该空间与人眼感知不一致。50% 明度的黄色看起来比 50% 明度的蓝色亮得多。切到 OKLCH 以获得均匀的色阶。
• 只依赖色轮,色轮是起点,不是保证。在敲定之前永远用真实文字检查对比度。
• 忽视文化含义,红色在中国意味好运,在西方意味警告;白色在西方代表纯洁,在亚洲的部分地区代表哀悼。如果你做全球产品,做本地研究。
• 太多灰阶,四到五个中性梯度通常足以覆盖从文字到细微边框的一切。十二个会让所有人(包括未来的你)迷糊。
• 纯黑配纯白,极端对比会导致眼睛疲劳。长文阅读使用近黑(#1A1A1A)配近白(#FAFAFA)。
• 未经测试的组合,通过了与背景的对比并不意味着对所有其它表面都通过。测试你的设计实际产生的每一种配对。
• 一页中只用单一点缀,一个抓住焦点的强点缀是好的;两个争夺注意力的点缀是糟的。挑出最重要的那一个行动召唤。
• 无法通过无障碍的品牌色,公司 logo 出于情感原因可能使用低对比配对;网站不能。为 UI 生成可访问的变体,把品牌配对留给 logo 锁定。
• 忘了链接与已访问态,二者都需要与正文及彼此可辨。三者都要测试。
• 让生成器代选语义色,成功/警告/错误色有文化与无障碍预期。按惯例(绿/琥珀/红)挑选,并核查它们在你的调色板下是否合适。

替代工具与方法

对精细的品牌工作,把调色板生成器与对比度检查器、色觉障碍模拟器结合起来。一个工具同时做这三件事,最能省时间。

隐私与调色板生成器

调色板生成器完全在你的浏览器中运行。你为提色而上传的任何源图都通过 FileReader API 读取、在离屏 canvas 上取样,提色完成后即丢弃。没有上传、没有日志,你构建的调色板也不与你关联。对于尚未公开的品牌工作、泄露的情绪板素材或客户照片,这种仅本地的流程把一切留在你应有的机器上。对于挑色这样的日常任务,默认的隐私应当是:任何东西都不离开页面、不被存储、不被分享。