这个页面会继续把品牌主色拆成 accent、surface、text 和 border，直接贴近真实页面结构，而不是只输出一个原始色板对象。
主题组合
Tailwind 主题预设组合
把品牌主色和站点风格一起整理成可直接落地的 Tailwind 语义主题。它不只输出 `50-900` 色板，还会继续给出 accent、surface、text、border 这类真实页面会用到的 token。
选择 SaaS / 内容 / 营销 / 极简预设输出语义 token导出 Tailwind Config 与 @theme
直接把品牌主色扩成主题层级
选择更接近站点风格的预设后，页面会同步整理原始品牌色板、语义 token、Tailwind Config 和组件示例。
当前预设适合 后台、SaaS 官网、组件库，内部使用 `平衡型` 色板曲线来生成更稳定的语义 token。
SaaS / Dashboard
语义主题已经按页面角色拆好
适合 后台、SaaS 官网、组件库。按钮、浅背景、边框和正文层级已经成组输出，不需要只拿一个 `brand-500` 到处硬填。
accent-softsurface-tint
50#F3F6FC大面积背景
100#E6ECF9浅层背景
200#CBD9F6弱描边
300#A1BBF2次级描边
400#6B95EF浅强调
500#2563EB品牌主色
600#1254E2Hover / 次按钮
700#0D49C9Active / 强调标题
800#0838A0深强调
900#062A7A深色块 / 反白场景
主强调#2563EB主按钮 / 主 CTA
Hover#1254E2按钮 hover / 激活前态
Active#0D49C9强强调 / 按钮 active
浅强调底#F3F6FC标签底色 / 提示底色
深强调#0838A0徽标文字 / 深色强调
焦点环#A1BBF2focus ring / 外描边
页面底色#F4F7FB页面主体背景
模块浅底#F4F7FB筛选区 / 次级面板
浮起面板#FFFFFF卡片 / 弹层 / 表单
品牌淡底#EFF3FA专题引导 / 辅助说明
基础边框#D4E0F0输入框 / 卡片边框
强调边框#C4D4EFhover 边框 / 分隔强化
正文#162033正文 / 标题
次级文本#5B6B80说明 / 辅助文案
反白文本#FFFFFF深色按钮文字
- 主题预设
- SaaS / Dashboard
- 色板模式
- 平衡型
- 主题名称
- primary
- 主按钮类
- bg-accent
- 面板类
- bg-surface-raised / shadow-panel
- 适合站型
- 后台、SaaS 官网、组件库
常用类名
bg-primary-500 text-primary-800 bg-accent hover:bg-accent-hover focus-visible:ring-accent-ring bg-surface bg-surface-soft bg-surface-raised bg-surface-tint border-border text-text text-text-muted rounded-panel shadow-panel
Tailwind Config 片段
export default {
theme: {
extend: {
colors: {
primary: {
50: "#F3F6FC",
100: "#E6ECF9",
200: "#CBD9F6",
300: "#A1BBF2",
400: "#6B95EF",
500: "#2563EB",
600: "#1254E2",
700: "#0D49C9",
800: "#0838A0",
900: "#062A7A",
},
accent: {
DEFAULT: "#2563EB",
hover: "#1254E2",
active: "#0D49C9",
soft: "#F3F6FC",
strong: "#0838A0",
ring: "#A1BBF2",
},
surface: {
DEFAULT: "#F4F7FB",
soft: "#F4F7FB",
raised: "#FFFFFF",
tint: "#EFF3FA",
},
border: {
DEFAULT: "#D4E0F0",
strong: "#C4D4EF",
},
text: {
DEFAULT: "#162033",
muted: "#5B6B80",
invert: "#FFFFFF",
}
},
borderRadius: {
panel: "1rem",
},
boxShadow: {
panel: "0 18px 40px -24px rgba(15, 23, 42, 0.28)",
}
}
}
};Tailwind v4 @theme
@theme {
--color-primary-50: #F3F6FC;
--color-primary-100: #E6ECF9;
--color-primary-200: #CBD9F6;
--color-primary-300: #A1BBF2;
--color-primary-400: #6B95EF;
--color-primary-500: #2563EB;
--color-primary-600: #1254E2;
--color-primary-700: #0D49C9;
--color-primary-800: #0838A0;
--color-primary-900: #062A7A;
--color-accent: #2563EB;
--color-accent-hover: #1254E2;
--color-accent-active: #0D49C9;
--color-accent-soft: #F3F6FC;
--color-accent-strong: #0838A0;
--color-accent-ring: #A1BBF2;
--color-surface: #F4F7FB;
--color-surface-soft: #F4F7FB;
--color-surface-raised: #FFFFFF;
--color-surface-tint: #EFF3FA;
--color-border: #D4E0F0;
--color-border-strong: #C4D4EF;
--color-text: #162033;
--color-text-muted: #5B6B80;
--color-text-invert: #FFFFFF;
}组件示例
<section className="bg-surface text-text">
<div className="rounded-panel border border-border bg-surface-raised p-6 shadow-panel">
<span className="inline-flex rounded-full bg-primary-100 px-3 py-1 text-sm font-medium text-primary-800">
SaaS / Dashboard
</span>
<h2 className="mt-4 text-2xl font-semibold">语义主题已经可以直接落地</h2>
<p className="mt-2 text-text-muted">用 accent、surface、text、border 这类语义 token 管理组件，不要只在页面里散落多个 brand 色。</p>
<div className="mt-5 flex gap-3">
<button className="rounded-panel bg-accent px-4 py-2 text-text-invert hover:bg-accent-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-ring">
主按钮
</button>
<button className="rounded-panel border border-border bg-surface-soft px-4 py-2 text-text">
次按钮
</button>
</div>
<div className="mt-6 rounded-panel bg-surface-tint p-4">
<p className="text-sm text-text-muted">当前品牌色板名称</p>
<strong className="mt-1 block text-primary-800">primary</strong>
</div>
</div>
</section>当你已经有品牌主色，但还缺按钮、浅底、边框和正文层级时，这个页面更适合直接接到开发流程里。
你可以先复制代码，再回到真实页面验证 CTA、卡片、提示块和正文排版，不需要边试边猜颜色名。
为什么要从品牌色板继续走到语义主题
真实页面里最难维护的不是一个主色，而是组件层级和页面角色没有统一命名。
- 如果页面里只有 `brand-500`，按钮 hover、浅背景、焦点环和边框很快就会被不同页面各自手工改散。
- 先保留原始 `50-900` 色板，再映射成 accent、surface、text 和 border，组件复用会更稳定。
- 语义 token 和组件示例一起输出，更适合直接进 Tailwind 项目而不是停留在“看起来差不多”。
怎么选当前预设
先看页面的信息密度和强调强度，再决定更适合哪种主题表达。
- 后台、组件库和产品官网优先选 `SaaS / Dashboard`，它更强调冷静表面和稳定的交互层级。
- 博客、知识库和专题文章页优先选 `Editorial / Content`，它会更克制地使用高饱和强调色。
- 活动页、下载页和促销页优先选 `Marketing / Campaign`，它更适合高对比 CTA 和更强存在感。
主题预设参考表
如果你还没决定先试哪个预设，可以先按站点类型对照这一组参考。
主题预设适合站型风格重点使用提醒
SaaS / Dashboard后台、产品官网、组件库冷静中性表面 + 清晰按钮层级优先保证表格、筛选区和表单的可读性与 hover 层级。
Editorial / Content博客、知识库、内容专题柔和浅底 + 稳定正文阅读感减少高饱和大面积块，让主色更多承担标签、引用和小面积强调。
Marketing / Campaign活动页、营销页、下载页高对比 CTA + 更强品牌存在感重点控制首屏按钮、价格卡片和促销 badge，不要让强调色铺满整屏。
Minimal / Neutral作品集、品牌站、极简产品页中性界面 + 克制的品牌点缀让品牌色更多出现在重点按钮和标识位，而不是所有模块都着色。
实际演示
示例输入输出
示例展示同一品牌主色在不同站型预设里的输出差异，帮助用户理解语义 token 不是只有一套写法。
示例 1
SaaS 蓝色主题
适合后台、产品官网和组件库，把品牌蓝整理成稳定的语义颜色结构。
输入
品牌主色
#2563EB
主题预设
SaaS / Dashboard
输出
语义 token
accent: #2563EB accent-hover: #1254E2 surface: #F4F7FB surface-raised: #FFFFFF text-muted: #5B6B80
常用类名
bg-primary-500 text-primary-800 bg-accent hover:bg-accent-hover focus-visible:ring-accent-ring bg-surface
示例 2
内容专题暖棕主题
适合博客、知识库和专题落地页，让暖色品牌主色更克制地进入正文环境。
输入
品牌主色
#C97B45
主题预设
Editorial / Content
输出
语义 token
accent: #C97B45 accent-hover: #B16835 surface: #F7F1E8 surface-raised: #FFFDF8 text-muted: #6E5C4D
常用类名
bg-editorial-500 text-editorial-800 bg-accent hover:bg-accent-hover focus-visible:ring-accent-ring bg-surface
规则说明
Tailwind 主题预设组合会先生成品牌 `50-900` 色板，再按站型把颜色映射成 accent、surface、text、border 这类语义角色。
- 同一个品牌主色在 SaaS、内容站和营销页里，不应该共用完全一样的浅背景、文本和边框节奏。
- 语义 token 更适合驱动组件复用，原始品牌色板更适合承载徽标、标签、图表和特殊强调。
- 页面会同时保留原始色板和主题 token，既能快速落代码，也方便后续继续扩展。
常见误区
很多所谓的主题系统，其实只是把 brand-500 换了个名字，但没有真正建立页面角色分层。
- 如果没有 surface、border 和 text 这类角色名，页面组件一多，仍然会回到手工找颜色的状态。
- 预设不是替你跳过判断，它只是先给一套更接近场景的默认结构，真正上线前还要回到真实页面验证。
- 营销页并不等于所有地方都高饱和，真正应该被强调的通常只有 CTA、价格卡和关键提示。
结果解释
结果区会同时给出原始品牌色板、语义 token、Tailwind Config、`@theme` 变量和组件示例，方便从方向直接进入开发。
- 原始品牌色板适合继续回收做标签、徽标和局部强调。
- 语义 token 更适合驱动按钮、卡片、提示块和正文结构，不需要页面里反复猜颜色。
- 组件示例更适合做最后一步验证，直接看当前主题在按钮、卡片和浅底里的表现。
推荐处理链路
主题预设通常位于品牌色落地的中后段，前后都还有其他工具可以继续配合。
- 如果主色还没定稳，先回到品牌色板生成器或图片取色工具找方向。
- 如果主题已经成形，下一步更适合继续补对比度和阴影规则，保证真实页面可读性和层级感。
常见问题
常见问题
Tailwind 主题预设组合 FAQ 主要解释它和色板导出的区别、语义 token 的用途，以及如何选择站型预设。
它和 Tailwind 色板导出有什么区别？
Tailwind 色板导出更偏原始 `50-900` 色板；主题预设组合会继续把这些层级整理成 accent、surface、text、border 这类语义 token，更接近真实页面落地。
为什么还要同时保留原始品牌色板？
因为语义 token 需要从原始层级里取值，后续如果你要做徽标、标签、图表或特殊强调，仍然会用到 `brand-100 / 500 / 800` 这类原始色阶。
SaaS、内容站、营销页、极简预设应该怎么选？
先看页面的信息密度和强调强度。后台和产品官网更适合 SaaS；博客、知识库和专题页更适合内容预设；活动页和下载页更适合营销预设；品牌展示和作品集更适合极简预设。
继续了解
相关工具
你还可以继续使用其他已经可用的颜色转换和配色工具。