素材阁

主题色导出

主题色令牌导出为 CSS/Tailwind/SCSS/JSON,生成在浏览器本地完成,数据不会上传。

主题色令牌

下载

使用说明

做主题或设计系统时,常需把一组颜色导出成不同格式。本工具维护主题色令牌,可从一个主色生成色阶,并导出为四种常用格式。

  1. 选择主色,点击「从主色生成 50-900 色阶」快速铺开一套色板,或手动添加单个颜色。
  2. 为每个令牌设置名称与颜色,右侧会同步显示预览色块。
  3. 选择导出格式(CSS / Tailwind / SCSS / JSON),复制或下载结果。

常见问题

色阶是怎么生成的?
保持主色的色相与饱和度,按明度从浅到深插值得到 50 到 900 的色阶,方便做深浅搭配。
导出的 Tailwind 配置怎么用?
把生成的 colors 合并进 tailwind config 的 theme.extend.colors,即可用类名引用这些颜色。

延伸阅读

相关工具