为界面配置一套完整色板：主色、辅助色、背景色、文字色、边框色与状态色，并在真实的 Button、表单、Dashboard 结构中实时预览深浅色效果，最后导出 Design Token 与 CSS 变量。
一套完整的 UI 色板通常包含主色、辅助色、背景、文字、边框以及成功/警告/错误/信息等状态色。本工具把这些角色集中管理。
设置完成后，工具会用真实的 UI 结构（按钮、表单、卡片、Dashboard 图表）实时预览效果，并可切换深色/浅色模式检查对比度与层次。
预览确认后，可一键导出 Design Token（JSON）与 CSS 变量，直接接入前端项目或设计系统。
工具还提供 Material、Tailwind、Ant Design 风格的状态色参考，帮助快速建立符合主流规范的色板。
Q：Design Token 是什么？
Design Token 是以结构化数据（如 JSON）描述设计变量的方式，包含颜色、间距等，便于在设计与代码之间共享同一套规范。
Q：预览使用真实组件吗？
预览区用 HTML/CSS 构建了 Button、表单、卡片与 Dashboard 等真实结构，能较准确地反映色板在实际界面中的效果。
Q：状态色可以自定义吗？
可以。成功、警告、错误、信息四种状态色均可单独设置，也可参考主流设计规范取值。
Q：导出的 CSS 变量可以直接用吗？
可以。导出的 --color-primary 等变量可直接放入 :root，供项目全局引用。
继续使用本站其它颜色处理工具：
