Tailwind 完整调色板生成器
快速生成 50-950 色阶，复制 HEX、RGB、HSL、CSS 变量、CSS 类或 Tailwind 配置。适合设计系统、shadcn/ui 主题和前端项目初始化。
默认色板预览
点击色块可复制当前格式
色阶预览与复制
默认色板已生成，可直接复制色值或导出代码。
板岩灰
slate凫蓝
teal天青蓝
sky祖母绿
emerald琥珀黄
amber玫瑰红
roseshadcn 语义 Token
把色阶映射成 primary、accent、success 等项目主题变量。
主色
teal-600
次级
slate-600
强调
sky-600
成功
emerald-600
警告
amber-500
危险
rose-600
Primary action
用于按钮、链接和焦点环。
Light / dark 变量
输出代码切到 shadcn 主题即可拿到完整 :root 与 .dark。
输出代码
复制到 CSS、组件库主题或 Tailwind 配置文件。
:root {
--slate-50: #ffffff;
--slate-100: #e5e7ec;
--slate-200: #cbd0d9;
--slate-300: #afb7c4;
--slate-400: #949eaf;
--slate-500: #738196;
--slate-600: #4c5c72;
--slate-700: #2a3b4f;
--slate-800: #0d2032;
--slate-900: #000f22;
--slate-950: #000000;
--teal-50: #ffffff;
--teal-100: #e2f4f0;
--teal-200: #c4e9e2;
--teal-300: #a1dcd2;
--teal-400: #7ccfc2;
--teal-500: #43bfaf;
--teal-600: #009383;
--teal-700: #005f51;
--teal-800: #00342a;
--teal-900: #002213;
--teal-950: #000000;
--sky-50: #ffffff;
--sky-100: #e4f0fc;
--sky-200: #c8e1f8;
--sky-300: #a7d1f5;
--sky-400: #82c1f1;
--sky-500: #48aeeb;
--sky-600: #0084c5;
--sky-700: #005491;
--sky-800: #002f66;
--sky-900: #001b4d;
--sky-950: #000000;
--emerald-50: #ffffff;
--emerald-100: #e1f4ea;
--emerald-200: #c2ead5;
--emerald-300: #9fddbe;
--emerald-400: #79d0a8;
--emerald-500: #41c08d;
--emerald-600: #00945f;
--emerald-700: #006031;
--emerald-800: #00350b;
--emerald-900: #002400;
--emerald-950: #000000;
--amber-50: #ffffff;
--amber-100: #ffefdb;
--amber-200: #ffdfb8;
--amber-300: #ffce91;
--amber-400: #ffbc69;
--amber-500: #f9a733;
--amber-600: #c87800;
--amber-700: #874400;
--amber-800: #571700;
--amber-900: #410000;
--amber-950: #000000;
--rose-50: #ffffff;
--rose-100: #ffe3e3;
--rose-200: #ffc7c8;
--rose-300: #ffa7ab;
--rose-400: #ff868e;
--rose-500: #f9596d;
--rose-600: #d00e44;
--rose-700: #9c0020;
--rose-800: #700000;
--rose-900: #570000;
--rose-950: #000000;
}这个工具能做什么
Tailwind 完整调色板生成器可以从默认 Tailwind 色系或自定义 HEX 基色生成 50-950 色阶，并输出 CSS 变量、CSS 类和 Tailwind 配置片段，减少项目初始化时手写色板的重复工作。
适用场景
为 shadcn/ui、Tailwind 项目或设计系统生成品牌色阶。
快速复制某个色值，用于按钮、边框、状态提示和深浅主题。
导出 CSS 变量或类名，让非 Tailwind 项目也能复用同一套色板。
如何使用
1. 选择需要的颜色系列，或填写一个自定义 HEX 基色。
2. 选择点击色块时复制的格式：HEX、RGB、HSL、变量或类名。
3. 在预览区点击单个色块或复制整组色系。
4. 在输出代码区复制 CSS 变量、CSS 类或 Tailwind 配置。
常见问题 FAQ
这个 Tailwind 调色板生成器适合什么场景？
适合为前端项目快速生成 50 到 950 的完整色阶，并复制为 HEX、RGB、HSL、CSS 变量、CSS 类或 Tailwind 配置。
自定义 HEX 基色会影响哪些颜色？
填写自定义 HEX 后，已选颜色系列会使用同一个基色生成品牌色阶；留空则使用各 Tailwind 系列默认基准色。
生成的颜色会上传到服务器吗？
不会。色阶计算、复制、下载和分享链接生成都在浏览器本地完成。