只要项目在用 Tailwind 管理按钮、标签、背景和状态色，这个页面就能减少大量手工颜色维护。
Tailwind 导出
Tailwind 色板导出
把品牌主色导出为 Tailwind `colors` 对象、Tailwind v4 `@theme` 变量和常用类名，适合设计系统、组件库和站点主题落地。
导出 Tailwind colors 对象支持 Tailwind v4 @theme输出常用类名示例
直接导出 Tailwind 主题色
你不需要再手工拼 `50-900`，也不需要重复写 `theme.extend.colors`，页面会直接生成可复制片段。
Tailwind 预览
主题色已整理成可直接导出的色板
当前名称为 `brand`，可直接放进 `theme.extend.colors` 或 Tailwind v4 的 `@theme` 变量里。
brand-100brand-500
50#FBF6F4大面积背景
100#F8ECE8浅层背景
200#F2D8CF弱描边
300#EBB9A8次级描边
400#E28F73浅强调
500#D85B32品牌主色
600#CC4E24Hover / 次按钮
700#B4431DActive / 强调标题
800#8D3416深强调
900#6B260F深色块 / 反白场景
- 输出名称
- brand
- 基础主色
- #D85B32
- 风格模式
- 平衡型
- 常用类名
- bg-brand-500
Tailwind Config 片段
export default {
theme: {
extend: {
colors: {
brand: {
50: "#FBF6F4",
100: "#F8ECE8",
200: "#F2D8CF",
300: "#EBB9A8",
400: "#E28F73",
500: "#D85B32",
600: "#CC4E24",
700: "#B4431D",
800: "#8D3416",
900: "#6B260F",
}
}
}
}
};Tailwind v4 @theme
@theme {
--color-brand-50: #FBF6F4;
--color-brand-100: #F8ECE8;
--color-brand-200: #F2D8CF;
--color-brand-300: #EBB9A8;
--color-brand-400: #E28F73;
--color-brand-500: #D85B32;
--color-brand-600: #CC4E24;
--color-brand-700: #B4431D;
--color-brand-800: #8D3416;
--color-brand-900: #6B260F;
}使用示例
<button className="bg-brand-500 text-white hover:bg-brand-600 focus:ring-2 focus:ring-brand-300"> 立即开始 </button>
不同项目有的还在用 `tailwind.config.ts`，有的已经切到 Tailwind v4，这里两种结构都会一起输出。
导出色板后，仍然要把按钮文字、浅底说明和焦点环一起放到页面里做实际可读性检查。
为什么 Tailwind 主题色要成体系
真实项目里不是只要一个 `brand-500`，而是要背景、边框、hover、focus ring 和深色强调一起稳定存在。
- 如果只有单一主色，按钮 hover、浅背景和边框会在不同页面里各自手工调，长期一定失控。
- 把色板沉淀成 Tailwind `colors` 或 `@theme` 后，组件和页面才能共享同一套层级。
- 类名和变量一起输出，能同时满足旧项目迁移和新项目快速搭建两种需求。
推荐落地方式
Tailwind 色板导出更适合和品牌色板、阴影和对比度规则一起使用。
- 先定品牌主色和层级，再导出 Tailwind 代码，避免代码里先有类名、后补视觉规则。
- 如果组件需要更稳定的浮起层级，继续搭配 `box-shadow` token 一起沉淀更稳。
- 按钮、标签和浅底模块上线前，最好再用对比度工具把关键组合扫一轮。
实际演示
示例输入输出
示例展示品牌主色导出为 Tailwind `colors` 对象后的常用结果，适合直接对照类名和代码片段。
示例 1
营销站橙色色板
适合把品牌主色快速沉淀成 Tailwind 背景、按钮和 hover 层级。
输入
品牌主色
#D85B32
颜色名称
brand
输出
colors 对象
brand: {
50: "#FBF6F4",
100: "#F8ECE8",
200: "#F2D8CF",
300: "#EBB9A8",
400: "#E28F73",
500: "#D85B32",
600: "#CC4E24",
700: "#B4431D",
800: "#8D3416",
900: "#6B260F",
}常用类名
bg-brand-500 hover:bg-brand-600
示例 2
SaaS 蓝色色板
适合后台系统、组件库和信息型页面的稳定主题色结构。
输入
品牌主色
#2563EB
颜色名称
primary
输出
colors 对象
primary: {
50: "#F8F9FC",
100: "#EBF0F9",
200: "#DAE3F6",
300: "#B6C9F1",
400: "#87A7EE",
500: "#2563EB",
600: "#1652D4",
700: "#1043B1",
800: "#0B358E",
900: "#08286D",
}常用类名
bg-primary-500 hover:bg-primary-600
规则说明
Tailwind 色板导出的核心是把主色扩成完整层级，再同时输出 Tailwind v3 的 `colors` 对象和 Tailwind v4 的 `@theme` 变量。
- 颜色名会自动整理成更适合类名使用的 kebab-case，避免后续手工改名。
- 50-900 层级更适合承载背景、边框、按钮、hover 和深色强调，不只是单个 `500` 主色。
- 导出片段可以直接复制到 `theme.extend.colors` 或 `@theme`，减少手工拼对象。
常见误区
很多项目颜色失控，不是因为没有主色，而是只有一个类名，没有一整套语义层级。
- 如果组件里到处直接写 `bg-brand-500`，但没有 `100`、`200`、`600`、`700` 等层级，页面很快会失去节奏。
- 只有 Tailwind 类名，没有对比度检查和阴影层级，仍然不等于完整设计系统。
- 导出代码只是起点，真正上线前还要回到按钮、卡片和正文场景做实际验证。
结果解释
结果区会同时给出 colors 对象、Config 片段、`@theme` 变量和使用示例，适合不同版本项目直接复制。
- 如果你还在用 `tailwind.config.ts`，优先复制 Config 片段。
- 如果项目已经迁到 Tailwind v4，更适合直接使用 `@theme` 变量。
- 使用示例可以帮助你快速验证按钮、hover 和 focus ring 这几个高频场景。
推荐处理链路
Tailwind 色板落地之后，下一步更适合继续补阴影和可读性规则，而不是只停在代码导出。
- 先让主色类名可用，再继续补按钮 hover、焦点环和阴影 token。
- 如果按钮或卡片上已经有真实文字，最好再检查前景色和背景色的对比度。
常见问题
常见问题
Tailwind 色板导出 FAQ 主要解释色板层级、命名和在 Tailwind v3 / v4 里的落地方式。
为什么 Tailwind 颜色通常会导出成 50 到 900？
因为真实项目里背景、边框、按钮、hover、focus ring 和深色强调需要不同层级，50-900 更适合统一管理这些角色。
导出的颜色名可以自定义吗？
可以。工具会把输入整理成更适合 Tailwind 类名使用的 kebab-case，这样既能保留语义，也更利于直接生成类名。
Tailwind v3 和 v4 都能用吗？
可以。当前页面会同时给出 `theme.extend.colors` 片段和 Tailwind v4 的 `@theme` 变量，方便按你的项目版本直接复制。
继续了解
相关工具
你还可以继续使用其他已经可用的颜色转换和配色工具。