渐变主题 Token 生成器

设计工具

渐变主题 Token 生成器

从渐变和品牌色生成 palette、语义色与 CSS theme tokens。

本地简单运行

运行方式: 本地简单运行
标签: gradientcssdesigncolorpalettetheme tokens
工具标识: gradient-generator
Worker: 无需启用
权限: 剪贴板

使用步骤

设置渐变起始色和结束色。
选择渐变方向和类型。
复制生成的 CSS theme tokens 到项目中。

使用例子

为品牌生成渐变主题色板。
生成带深色模式变量的 CSS tokens。

渐变主题

主色、辅助色、强调色、表面色和文字色 Token。

CSS 主题 Token

:root {
  --color-brand-primary-50: #e2efee;
  --color-brand-primary-100: #c1dbd9;
  --color-brand-primary-200: #9ac5c2;
  --color-brand-primary-300: #6aaaa5;
  --color-brand-primary-400: #3a8f88;
  --color-brand-primary-500: #0f766e;
  --color-brand-primary-600: #0d635c;
  --color-brand-primary-700: #0b554f;
  --color-brand-primary-800: #094440;
  --color-brand-primary-900: #073430;
  --color-brand-secondary-50: #e7f7fe;
  --color-brand-secondary-100: #cbeefd;
  --color-brand-secondary-200: #abe3fc;
  --color-brand-secondary-300: #84d6fb;
  --color-brand-secondary-400: #5cc9f9;
  --color-brand-secondary-500: #38bdf8;
  --color-brand-secondary-600: #2f9fd0;
  --color-brand-secondary-700: #2888b3;
  --color-brand-secondary-800: #206e90;
  --color-brand-secondary-900: #19536d;
  --color-brand-accent-50: #fff7e5;
  --color-brand-accent-100: #feeec6;
  --color-brand-accent-200: #fde4a3;
  --color-brand-accent-300: #fdd777;
  --color-brand-accent-400: #fccb4b;
  --color-brand-accent-500: #fbbf24;
  --color-brand-accent-600: #d3a01e;
  --color-brand-accent-700: #b58a1a;
  --color-brand-accent-800: #926f15;
  --color-brand-accent-900: #6e5410;
  --color-brand-surface: #0d1824;
  --color-brand-text: #e8eff7;
  --gradient-brand: linear-gradient(135deg, #0f766e, #38bdf8);
}

渐变主题 Token 生成器

开始使用

使用步骤

使用例子

渐变主题 Token 生成器

渐变主题 Token 生成器

渐变主题 Token 生成器