📐 一个工具箱,
完成所有设计任务

UI配色系统

从单个种子颜色生成完整的设计令牌调色板。导出到Tailwind、CSS或SCSS。

English 中文 日本語 한국어 Español Português Français Deutsch العربية हिन्दी ไทย Tiếng Việt Bahasa Русский

📐 UI配色系统

UI配色系统指南

UI配色系统为设计令牌、按钮、背景和文本颜色提供一致的色阶。

选择一个种子颜色和样式。工具生成完整的从浅(50)到深(900)的10级调色板。

专业提示

常见问题

Q: 什么是设计令牌?
什么是设计令牌?存储设计属性的命名值,如颜色。
Q: 什么是设计令牌调色板?
什么是设计令牌调色板?设计令牌调色板是由单一品牌颜色生成的一组系统的颜色变量(主要、次要、表面、文本)。它确保整个 UI 的一致性。
Q: 我可以导出到 Tailwind 以外的设计系统吗?
我可以导出到 Tailwind 以外的设计系统吗?是的,该工具导出为 CSS 自定义属性、SCSS 变量和 Tailwind 配置格式。复制与您的堆栈匹配的格式。
Q: 如何使用此工具处理暗模式?
如何使用此工具处理暗模式?首先生成浅色模式调色板,然后使用相同的种子颜色,并降低深色模式的饱和度和亮度值。许多设计系统反转表面和文本颜色。