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

色彩生成原理：

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

常见问题解答 (FAQ)

问：什么是界面 UI 设计中的 60-30-10 配色法则？
答：这是一条经典的经典设计比例规律：将 60% 的面积（如底板、大背景）设为低饱和主底色（多为白色或浅灰），30% 的面积（如文字、边框、结构性组件）设为深灰色调，剩下的 10% 的面积（如点击按钮、焦点引导、高亮）则从生成的和谐调色板中挑选一个亮色作为点缀，极利于引导用户视觉焦点。

问：为什么网页配色通常用 HSL，而不是常用的 HEX 十六进制代码来做算法计算？
答：HEX 十六进制将三原色（红绿蓝）杂糅在一起，难以通过数学运算直观控制颜色关系。而 HSL 是圆柱色彩空间模型（色相、饱和度、亮度），色相（Hue）呈 0-360 度圆环排列。我们要找它的对比色，只需要简单加减 180 度即可得到，这使得配色方案的推导算法变得极为精准和高效率。

问：如何保障配色方案符合无障碍访问规范（WCAG）？
答：为保证视力障碍人群能清晰阅读，网页文字与背景的对比度需满足 WCAG 标准。普通正文字体与背景的对比比率（Contrast Ratio）应至少达到 4.5:1，大号字或按钮文本应至少达到 3:1。请尽量避免在白色背景上放置亮黄、浅绿等文字。

问：互补色配色与邻近色配色在视觉传达上有什么不同？
答：邻近色（色环相距 30°~60°）配色和谐、柔和，能带来极佳的秩序感与宁静感；互补色（色相相距 180°）对比强烈、视觉冲击力巨大，能带来极高的关注度与动感，常用于核心呼吁行动（CTA）按钮。