已更新9月 2026
如何使用调色板生成器
- 生成调色板，直到其中一个与心情相匹配，或者根据您的品牌颜色（如果有）匹配。
- 分配角色：主导中性、次要、重音 - 60-30-10 分割。
- 将十六进制代码复制到 CSS 变量或设计工具的样式中。
- 检查每个文本/背景的对比度提交前配对 — 最低 4.5:1。
调色板生成器是什么？
调色板生成器会生成一组可以协同工作的颜色 - 互补色、相似色、基础色 - 并带有可复制到 CSS 或设计工具中的十六进制代码。它自动化了颜色理论步骤：颜色通过色轮上的关系进行协调，生成的调色板对这些关系进行编码，而不是希望。
它解决的实际问题：选择一种漂亮的颜色很容易；选择五个属于一起的设计技巧是大多数项目手头不具备的。生成的调色板开始是连贯的——看起来有主题的 UI 和看起来组装起来的 UI 之间的区别。
关于调色板生成器
生成调色板并复制适合您项目的十六进制代码 - 作为完整方案或调整的起点。
将调色板变成可用系统：应用 60-30-10 规则（UI 的主导中性 ~60%，次要 ~30%，重音 ~10% — 重音是您的按钮和突出显示，而不是您的背景）；从调色板的温度导出功能颜色（与方案饱和度相匹配的成功绿色、警告琥珀色、危险红色）；并为悬停状态、边框和深色模式生成每种颜色的色调/阴影，而不是引入新的色调。
发货前的两项检查：对比度 - 背景文本对需要 WCAG 的 4.5:1 比例（如果对比度不佳，则需要重新设计）；和背景——颜色在不同的背景下会发生感知上的变化，所以试听白色、深色和它自己的颜色的调色板。当值在工具之间移动时，与我们的颜色转换器配合使用以更改格式 (hex↔RGB↔HSL)。
常见问题解答
比初学者想象的要少：一两种中性色（加上它们的色调）、一种主要颜色、一种强调色以及派生出来的 3-4 种功能颜色（成功/警告/危险/信息）来匹配。五种核心色调已经很多了。
比例指导：约 60% 的界面采用主色（通常是中性色），30% 为次要颜色，10% 为强调色。这就是为什么带有强调色的背景感觉很响亮——强调的作用就是稀缺性。
将品牌颜色固定为主要颜色，从中产生和谐（互补的重音，类似的次要颜色），并衍生出带有一丝品牌色调的中性色（暖色品牌颜色旁边的纯灰色看起来很冷）。
WCAG AA：普通文本为 4.5:1，大文本和 UI 组件为 3:1。检查每一个配对——中间色调调色板经常失败，而对比度失败既是可访问性也是法律问题。
不是通过反转——稍微降低色调的饱和度并使其变亮（饱和的颜色在黑暗中振动），交换中性渐变，并保持口音可识别的相同。从相同的基色生成深色变体以实现连续性。