Tailwind 色阶 · 本地生成

Tailwind 完整调色板生成器

快速生成 50-950 色阶，复制 HEX、RGB、HSL、CSS 变量、CSS 类或 Tailwind 配置。适合设计系统、shadcn/ui 主题和前端项目初始化。

免费使用

默认色板预览

点击色块可复制当前格式

板岩灰
凫蓝
天青蓝
祖母绿

色阶预览与复制

默认色板已生成，可直接复制色值或导出代码。

板岩灰

slate

凫蓝

teal

天青蓝

sky

祖母绿

emerald

琥珀黄

amber

玫瑰红

rose

shadcn 语义 Token

把色阶映射成 primary、accent、success 等项目主题变量。

主色

teal-600

次级

slate-600

强调

sky-600

成功

emerald-600

警告

amber-500

危险

rose-600

Primary action

用于按钮、链接和焦点环。

Light / dark 变量

输出代码切到 shadcn 主题即可拿到完整 :root 与 .dark。

primary
secondary
accent
success
warning
destructive

输出代码

复制到 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 系列默认基准色。

生成的颜色会上传到服务器吗？

不会。色阶计算、复制、下载和分享链接生成都在浏览器本地完成。

相关工具推荐

颜色格式转换CSS 代码生成器玻璃态 CSS 生成器
正在加载相关工具...
FAQ

Tailwind 颜色模板工具常见问题

围绕输入、结果、保存、分享和隐私整理，方便你在正式使用前快速确认工具边界。

Tailwind 颜色模板工具适合处理哪些开发任务？

专业的 Tailwind Colors 模板工具，支持自定义颜色方案，方便在项目中使用。Tailwind 颜色模板工具适合接口联调、格式校验、代码整理、配置转换、差异排查或数据预处理。你可以先粘贴示例内容确认输出，再替换成真实片段，减少在线调试时的来回切换。

Tailwind 颜色模板工具输入格式有什么要求？

请尽量保留原始缩进、引号、换行、请求头、字段名或文件扩展名等上下文。若页面支持上传文件、粘贴文本和示例模板，优先按示例结构输入，错误提示会更容易定位。

Tailwind 颜色模板工具能复制或下载处理结果吗？

可以。开发类工具通常会提供复制结果、下载文件、复制配置或生成分享链接，方便放进代码评审、接口文档、工单、README 或测试记录中复用。

Tailwind 颜色模板工具会修改原始代码或数据吗？

页面只会在当前浏览器中生成新的预览或输出，不会自动改动你的项目文件。复制或下载前建议检查格式化、压缩、转义、排序等选项，确认结果符合当前工程规范。

Tailwind 颜色模板工具可以处理敏感配置吗？

不建议粘贴密钥、Token、生产数据库连接串、客户数据或完整日志。若必须排查，可先脱敏关键字段；涉及在线请求、AI 分析或分享链接时，更要确认内容可以被处理和传播。

Tailwind 颜色模板工具如何用于团队协作或代码评审？

可以把处理前后的片段、错误位置、差异统计或生成配置一起复制到 PR、工单或接口文档里。为了减少误解，建议同时保留原始输入和所选选项，方便团队复现。

    问题反馈