配色方案生成器 —— 在线生成和谐色板

一套好配色的核心不是「颜色好看」，而是「颜色之间的关系成立」。专业设计师极少把随机几个颜色凑在一起，而是从色轮（HSL 色相环）的角度关系出发：邻近色（色相相差 30° 左右）天然协调、适合做平静统一的界面；互补色（相差 180°）对比强烈、适合需要抓眼球的强调；三角色（彼此相差 120°）兼顾活泼与平衡，是品牌色常见的选法。设计猫的配色生成器正是按这些和谐规则取色，所以每一组出来的颜色都「有依据」，而不是噪点。

光有色相还不够，明度（亮度）和饱和度的节奏同样关键。一套耐看的配色通常遵循「60-30-10」法则：60% 的主导色（多为低饱和的背景或大面积色块）、30% 的辅助色、10% 的强调色（用在按钮、链接、关键数据上）。如果五个颜色饱和度都拉满，画面会刺眼、层次塌掉；适当压低背景色的饱和度、只让强调色鲜艳，整体就立刻高级。生成时按「空格」多换几组、锁定你满意的主色再微调其余，就能逼近这个比例。

最后一步是落地到代码与无障碍。拿到配色后，别忘了检查文字与背景的对比度——正文至少要达到 WCAG AA 的 4.5:1，否则浅色背景上的浅色文字在阳光下根本看不清。设计猫支持一键复制 HEX 列表或直接导出 :root CSS 变量，把配色作为「设计 token」沉淀进项目，后续改主题只改变量即可。全程在你的浏览器本地完成，不上传、不注册、无次数限制——随手生成、随手就能用进真实项目。