配色方案

功能

• 七套经典搭配：单色、类似色、互补色、分裂互补、三角、四色、中性色打底
• ⚠️ 也可以随机生成一组配色，九个主题可选：柔和 / 鲜艳 / 暗色 / 亮色 / 暖色 / 冷色 / 霓虹 / 大地色 / 单色。每个主题的取值区间（饱和度与明度）都写在选项上，不是一个不透明的算法
• 随机配色的色相是均分铺开的，不是各抽各的 —— 后者很容易撞成两个几乎同色的块，那正是随机配色最容易被嫌弃的地方
• 同一批里不会出现重复色，明度也在两段之间跳（深一浅一），否则色块摆在一起会糊成一片
• 输入任意一个色值即可重算整套，三位短写（#36f）与六位都认
• 每个颜色都带色块 —— 一排色号在屏幕上是没有信息量的
• 每个颜色给出十六进制，可以逐行复制
• 每套搭配附一句「怎么用」：什么场景合适、代价是什么
• 另外给出 60 / 30 / 10 的用量比例 —— 面积不对比颜色选错更显眼
• 中性色那一组是掺了主色色相的灰，整页才会「是一片颜色」而不是「底色加色块」
• 标出基准色配黑字还是白字更清楚，并给出 WCAG 对比度
• 常见主色都在可搜索的下拉里，点一个就开始算
• 留空以默认主色为例，一进页面就有东西可看
• 粘贴容错：正文例子的「」引号、输入法打出的全角都不影响计算
• 所有计算在浏览器本地完成，输入的色值不上传

使用方法

1. 在输入框里填一个基准色，例如 #3366ff；想不起色值就点开下拉选一个常见主色
2. 结果按七套搭配分组列出，每个颜色带色块与色值
3. 每套搭配末尾有一句「怎么用」，说明它的适用场景与代价
4. 最后一组给出 60 / 30 / 10 的用量比例，直接告诉你每个颜色该占多大面积

常见问题

为什么算出来的搭配和我印象中的不一样？

因为配色方案取决于你输入的那个色。同一套「互补色」，在红色上和在蓝色上算出来的是完全不同的两组颜色 —— 这正是这个工具与「收录一批好看配色」的区别：后者给的是别人选定的成品，这里是按你的主色推出来的。如果你想看某个特定效果，把那个颜色填进来再算。

这些搭配的名字（单色、类似色、三角……）是哪来的？

它们是色彩学里的公共知识，来自色轮上色相之间的角度关系：相邻 30 度是类似色、相隔 180 度是互补色、三等分是三角搭配。这套说法在伊顿的《色彩艺术》与更早的色彩理论里就已经成型，不属于任何人，也不需要注明出处。工具只是把这套关系按你的主色算出来。

算出来的颜色可以直接用在设计里吗？

可以作为起点，但别直接照搬。 它保证的是色彩关系正确（色相角度、明暗层次），不保证符合你的品牌、可访问性或场景。两件事尤其要自己过一遍：一是对比度 —— 正文文字与背景要满足 WCAG 的 4.5:1，工具里给了基准色的黑字/白字对比度，其他组合要自己核；二是印刷，屏幕上的 RGB 色值与印出来的效果不会一致，真要印东西请用实物色卡对。

60 / 30 / 10 是什么？

是面积比例：中性色（背景、文字、边框）大概占 60%，主色占 30%，强调色占 10%。它是网页配色里最常被引用也最常被忽略的一条 —— 颜色选得再对，面积不对画面照样是乱的。最常见的失败就是把主色铺满整页：饱和度高的大色块看久了会累，而且没有留白就没有层次。所以这一组直接把三档面积对应的色值摆出来。

中性色那一组为什么不是纯灰？

因为掺了主色的色相。纯灰（饱和度 0）配鲜艳的主色，整页会读成「一块底色加几个色块」；而灰里带上主色那一点点色相之后，背景、边框、次要文字会看起来与主色是同一套颜色，页面才是一个整体。这也是很多设计系统会出现「暖灰」「冷灰」两套中性色的原因 —— 它们各自配的是暖色主色与冷色主色。