配色方案生成器
填一个主色，直接拿到能用的整套配色：主辅色、11 档明度色阶、文字对比度判定，连 CSS 变量和 Tailwind 配置一起给你，PPT、落地页、小程序改色不用再靠感觉试。
- 5 种配色规则：类似、单色、互补、分裂互补、三角与四角配色。
- 拿得走的结果：HEX / RGB / HSL 一键复制，导出 CSS、Tailwind、JSON。
- 能用的检查：按 WCAG 算对比度，告诉你白字还是黑字更清楚。
生成配色
本地计算 · 不上传例：#5B5BD6、rgb(91,91,214)、hsl(240 59% 60%)。
主色板
点色块复制 HEX，点名称复制全部色值
明度色阶 50 → 900，可直接做界面层级
对比度检查 WCAG 2.1：AA 正文 4.5、AA 大字 3.0、AAA 正文 7.0
批量生成
每行一个主色，最多 20 行AI 配色建议
需人机验证让 AI 结合使用场景，看这套配色该谁当主色、谁只做点缀，以及最深的一个坑在哪。首次点击会先弹出点选验证码。
这套配色怎么用起来
配色不是选几个好看的颜色，而是先把「谁负责什么」定下来，再谈色值。
先定角色，再挑颜色
一套界面配色通常只需要四个角色：主色负责品牌识别与主要按钮，辅助色负责强调与状态，中性色撑起文字与分割线，背景色留出呼吸空间。色数越多越难控，所以默认给 5 色：1 主色 + 1 辅助色 + 3 中性层级，够用且不容易乱。
明度色阶比配色规则更实用
真正天天用的是同一色相的 11 档明度：50、100、200 直到 900。卡片底色用 50，悬停用 100，边框用 200，主按钮用 500~600，文字用 700~800。上面生成的色阶可以直接改成 CSS 变量，换主题时只改主色，整站跟着变。
对比度先过关，再谈氛围
WCAG 2.1 要求正文对比度达到 4.5:1（AA），大字号标题可以放宽到 3:1；AAA 要求 7:1。浅色底上的浅灰字、彩色按钮上的白字最容易不达标，生成后先看对比度卡片，不达标就换深一档的色阶，而不是硬调透明度。
深色模式不是把颜色反过来
深色界面里高饱和色会显得刺眼，通常要把饱和度降 10%~20%、明度提一档，同时用背景亮度差代替阴影来表达层级。色阶里 700~900 那几档在深色模式更适合当卡片底色。
示例：三种常见场景的取色思路
企业汇报 / PPT
主色取企业标志色，辅助色只用于强调数字与图表高亮，其余全部交给中性灰。整页不超过 3 个彩色，观众注意力才落得到结论上。
App / 小程序
主色用在主按钮与选中态，辅助色只表示成功与警告。背景用 50 档色或纯白，正文用 800 档灰，减少大面积纯黑带来的压迫感。
线下海报 / 易拉宝
屏幕上的高饱和色印出来会发闷，选色时把饱和度压低一点、明度抬高一点，远距离观看时对比反而更强。
常见问题
生成的配色能直接商用吗？
色值本身不受版权保护，可以自由使用。但要注意某些品牌色是注册商标，做同类产品的界面时不要刻意模仿他人品牌的整体识别色，避免混淆。
为什么互补色看起来很刺眼？
互补色色相差 180°，同时大面积使用时视觉会互相拉扯。做法是让其中一个当主角、另一个只做小面积点缀（图标、标签、下划线），或者把点缀色的饱和度降下来。
对比度达标了，为什么还是看不清？
对比度只算亮度差，算不出字号、字重与观看距离的影响。正文小于 14px、字重偏细、或背景有花纹时，都要在此基础上再提高一档对比。深色底上的纯白正文也建议降到 90% 左右亮度。
主色是图片或品牌给的近似色，怎么统一？
把品牌色填进主色框，生成色阶后固定 500 档为品牌色，其它档位由它推导，这样界面里所有同色系元素都来自同一条色阶，不会出现三个「差不多」的蓝。
这个工具会保存我的配色吗？
不会。颜色解析、配色推导、对比度计算、导出文件全部在浏览器里完成，页面不会把你输入的任何内容发到服务器；只有主动点击 AI 建议时，才会把当前色板摘要发出去做一次分析。