颜色色卡生成器介绍
色卡是把一组颜色按统一格式整理展示的载体，是设计规范的基础件。一份合格的色卡至少包含：颜色本身、HEX 值、RGB 值，以及一个在浅色与深色底上都可读的文字颜色建议。
本工具接受多行输入（每行一个 HEX），自动解析并生成网格色卡。每张卡片显示色块与三种格式色值，点击卡片即复制 HEX。文字颜色建议基于相对亮度自动计算，无需人工判断。
除逐个复制外，工具支持一键导出 CSS 自定义属性（--color-primary: #xxx）与 Tailwind config 颜色对象两种格式，把色卡直接落成代码，减少从设计稿到开发的转译成本。
使用步骤
- 11：在文本框中每行输入一个 HEX 色值（支持带 # 或不带）
- 22：色卡网格实时生成，自动计算每张卡片的文字用色
- 33：点击任意卡片复制该颜色的 HEX
- 44：点击复制 CSS 变量或复制 Tailwind 导出整卡代码
适用场景
- 整理品牌色板形成团队规范
- 给组件库输出颜色 token
- 把临时选定的颜色沉淀成可交付文档
- 对比多个候选色的实际观感
实用小贴士
- 色卡按明度排序比按输入顺序展示更容易发现层次问题
- 导出 CSS 变量后记得同时声明深色模式下的覆盖值
- 8-12 个颜色是一套色板的上限，再多就该拆分了
常见问题
支持命名吗？
输入行支持名字加色值格式，如 primary #2f66ff，导出的代码会使用这个名字作为变量名。
无效的行会怎样？
无法解析的行会被忽略并在输入框下方提示，不影响其他颜色的生成。
颜色排序可以自定义吗？
当前按输入顺序展示，建议按明度从深到浅排列输入，即可获得视觉有序的色卡。