将单一品牌色转化为包含50-950级色阶、明暗模式语义令牌及无障碍合规对比配对的完整设计系统。导出为CSS自定义属性、Tailwind配置或设计令牌,即可投入生产使用。
为品牌调色板中的每种颜色生成50-950级色阶。每个色阶在感知上均匀,并经过一致的明度步进测试。
自动生成适用于明暗两种模式的语义色彩令牌。表面色、文字色和强调色均已映射至两种主题。
每种色彩配对均经过WCAG AA对比度检查。您将看到哪些组合适用于文字、UI和装饰元素。
将整个色彩系统导出为CSS自定义属性、Tailwind CSS配置、SCSS映射、JSON令牌或可分享的风格指南。
语义令牌将色彩映射至其用途——如'背景'、'文字主色'、'边框'、'错误'——而非具体数值。这使得无需修改组件代码即可轻松切换主题(明/暗)或重塑品牌。
我们采用OKLCH色彩空间实现感知均匀的明度阶梯。从您的品牌色出发,我们计算出10个在人眼视觉上均匀分布的色阶,不同于简单的HSL明度调整。
从主色开始。生成器会围绕该色创建完整系统,您可在生成系统中调整辅助色和强调色。
是的。导出的Tailwind配置使用CSS自定义属性格式,同时兼容Tailwind v3(tailwind.config.js)和v4(@theme inline)。