色彩心理学和设计原则表明，和谐的调色板能奠定网站的高端质感。本工具利用数学算法在 HSL 色环上做等角取样，为您创建自然且富有节奏感的色卡。

色彩生成原理：

当您点击生成时，代码通过随机选取起始色相（Hue），并锁定舒适的饱和度（Saturation）与亮度（Lightness），再根据互补、邻近或三分色原理推算相邻色卡，从而得到能够完美搭配的主色与辅助色。

从配色到落地：实用工作流

生成的配色只有被一致地应用才有价值。最快的路径是把五种颜色提升为设计令牌：按角色而非色相命名，比如 surface、text、border、accent、muted，然后处处引用这些名字，而不是硬编码十六进制值。这样在品牌变更时配色可以整体替换。

接下来，有目的地分配角色。主导的 60% 应该是背景和大面积表面；次级 30% 覆盖文字、卡片和分割线；剩下 10% 最饱和的颜色，留给你想让用户第一眼看到的元素：主按钮、激活的链接、焦点环。把强调色到处使用会稀释它的力量。

最后，在上下文中而非孤立地验证。在白色样机上很好看的配色，在深色主题下可能崩坏，所以务必对照两种主题和真实内容预览。如果对比度不达标，先调明度再调色相，因为明度对可读性的影响最大，同时能保持整体氛围。

常见问题解答

问：UI 设计中的 60-30-10 法则是什么？
答：这是一个经典平衡法则：界面约 60% 用主色（通常是背景），30% 用次级结构色（文字与卡片），10% 用强调色（按钮与链接）来引导视线焦点。

问：为什么用 HSL 而不是 HEX 来生成配色？
答：HSL 把颜色放在 0 到 360 度的色环上，因此寻找互补色（对面 180 度）、三角色（相隔 120 度）或邻近色都是干净的数学运算，而十六进制运算要麻烦得多。

问：我如何确保配色符合 WCAG 无障碍标准？
答：检查文字与背景的对比度：正文至少 4.5:1，大号文字至少 3:1。我们的工具会实时显示对比度，方便你微调明度直至通过。

问：互补色方案和邻近色方案有什么区别？
答：互补色取色环正对面的颜色，对比最强、最跳脱；邻近色取相邻色相，视觉协调、对比低，放在一起很自然。

问：我能把配色导出成 CSS 变量或 Figma 吗？
答：可以。你可以复制为 CSS 自定义属性、Tailwind 配置片段，或一串十六进制列表，直接粘贴进 Figma 等设计工具。

本工具的工作原理

这个Harmony Color Palette Generator完全运行在你的网页浏览器内，基于 Plobi-kit 100% 客户端架构。任何输入都不会发送到外部服务器，从而保障完全的隐私与离线可用性。想验证？打开浏览器的网络（Network）面板，使用工具，然后观察：除了页面自身的资源，没有任何东西离开你的机器。