调色板生成器

以主色的色相和饱和度为基准，生成 5 个不同明度的同色系颜色（82%、66%、主色明度、34%、22%），形成由浅到深的色阶，适合做 UI 的主色、辅助色、悬停态、禁用态等。

选择"CSS 变量"导出格式，复制得到形如 :root { --palette-1: #...; } 的代码，粘贴到样式表即可通过 var(--palette-1) 引用。

一个能落地的调色板通常不是「几个好看的颜色」，而是一套有分工的色板体系： 一个主色（品牌色，承担主要交互与强调），一到两个辅色（用于区分状态与分类）， 一组中性色（背景、分割线、正文、次要文字），再加上语义色（成功、警告、错误、信息）。 先定分工再挑颜色，比先挑颜色再想用途要省事得多。

主色确定后，最常见的做法是生成一条明度阶梯： 保持色相不变，从浅到深排若干档（例如 50 / 100 / … / 900）。 浅档用于背景与悬停态，深档用于正文与按下态。 生成阶梯时明度与饱和度要一起微调——只在明度上拉，浅档容易发灰、深档容易发闷。

配色关系决定观感：同色系（单色相）最稳妥，适合后台与工具类界面； 类似色（相邻色相）更有层次；互补或分裂互补对比最强，适合需要强烈行动引导的营销页。 无论哪种，都建议只保留一个高饱和色，其余压低饱和度， 否则界面会出现多个互相争夺注意力的焦点。

可访问性是调色板的验收线，而不是最后补一步。 正文对比度需达到 4.5:1（大字 3:1），非文本元素（图标、输入框描边、图表分区）至少 3:1。 还要考虑色觉障碍：仅靠红绿区分成功与失败并不安全， 应同时提供形状、文案或图标作为第二重编码。 另外，暗色模式下不能简单把颜色反转——深色背景需要重新调低饱和、提高明度，否则会显得刺眼。

落地时把调色板写成设计令牌（CSS 自定义属性或设计软件变量）， 命名按用途（--color-primary、--color-text-muted）而不是按色值 （--blue-500），这样换主题、加暗色模式都不用改业务代码。 本工具生成的色值可直接复制，计算全部在本地完成。

色板定稿前建议再做一次真实场景走查：把主色、辅色、中性色分别套进按钮、表单、提示条与图表， 重点确认三件事——层级是否分明、状态是否可辨（默认 / 悬停 / 禁用 / 报错）、 暗色模式是否需要单独一档。走查通过后再把结果固化成令牌， 后续只在令牌层调整，不再散落到各处改色值。