智能配色 — 网站颜色搭配方案与 CSS 变量
在浏览器里生成智能网站配色方案。选品牌 HEX（示例青绿 #0F6E8C），得到共享中性色、行动/悬停/浅底/焦点、中性链接、固定状态色、界面预览与 AA 自检，再复制 :root CSS 或 JSON。按规则推衍，非云端 AI，不上传颜色。
中性色与状态色共享；每套主题只覆盖品牌衍生 token。最多 4 套。
| Token | 值 |
|---|
| Token | 值 | 角色 |
|---|
怎么用
填写一到四套品牌主题（id + HEX）。工具保持共享中性色阶，由各自主色衍生行动类 token，映射语义角色（含中性链接与固定状态色），绘制浅色界面预览，做 AA 自检，并支持复制 CSS 变量或 JSON——全程本地。
规则说明
分层 token、链接与行动分离、状态独立、对比提示与隐私。
- 原始层存放中性色与品牌衍生；语义层用用途命名（bg、surface、link、action…）。组件应只引用语义名。
- 品牌 → --action；悬停约压暗 22%；soft 约 10% 透明；focus-ring 约 40% 透明；--bg 为极淡染色中性底。
- 链接映射到正文 / 强调字（中性）。不要把默认 --link 绑到 --action。
- 危险/成功/警告/提示跨主题固定，品牌色绝不替代错误语义。
- 隐私：生成、预览与剪贴板复制都在本页完成，不上传品牌色。
示例
加载示例（主题 id teal，#0F6E8C）。预览为白表面、侧栏选中项青绿浅底（无左侧色条）、中性文字链接与红色错误提示。语义层把 --link 映射到正文字色（不是 --action）。复制 CSS 得到 :root 中性色与 html[data-theme="teal"] 覆盖。
适用场景
- 工具站或 SaaS 外壳：浅色可读骨架上，用品牌色强调选中与焦点，而不是刷满所有链接。
- 落地页换肤：切换 html[data-theme] 品牌，共用同一套中性骨架与状态色。
- 设计交付前端：直接粘贴 :root CSS 变量，少从截图手抄 HEX。
常见问题
「智能配色」是不是 AI 生成？
这里的「智能」指确定规则：中性色固定、主色衍生行动/悬停/浅底/焦点、链接保持中性、状态色不跟品牌走。没有模型调用，也不上传——计算都在本页完成。
为什么链接不是品牌色？
默认链接用正文字色，避免整页被品牌色刷成「链接墙」。品牌色留给行动、选中、焦点环和少量浅底强调。
状态色为什么不随主题变？
危险/成功/警告/提示四色跨主题固定。琥珀品牌主题下错误仍用红色，避免整站看起来像在报警。
什么时候该用品牌色色阶生成？
需要 50–950 色阶或 HEX/HSL/OKLCH 列表时，用「品牌色色阶生成」。本页负责整站浅色语义方案（背景/表面/链接/行动/状态），便于直接粘贴。
对比度自检能覆盖多少？
自检只覆盖当前主题的几组关键对。任意前景/背景或要看 AAA，请打开 WCAG 对比度检测并粘贴任意 token HEX。
相关工具
咨询与反馈
页面不清、功能异常或想提建议？在下方起草邮件，我们会阅读每一封关于工具的来信。