主题变量

CSS 变量主题映射器在线工具

把品牌主色映射成可直接落地的 CSS 变量主题，同时输出原始色阶和语义变量，适合官网、工具站、SaaS 页面和组件库主题收口。这个页面首屏优先完成主题角色映射。

把主色映射成主题变量输出 palette + semantic variables适合设计系统与站点主题

实时映射

重点不是再生成一个 `brand-500`，而是把品牌色映射成页面真正需要的 `accent`、`surface`、`border`、`text` 这些角色变量。

品牌主色HEX 颜色值

变量前缀 / 主题名会自动整理成 kebab-case，结果会同时输出 `--brand-50` 这类原始色板变量和 `--color-accent` 这类语义变量。

主题映射器的重点不是单独导出一个主色，而是把品牌色板映射成 accent、surface、border、text 这些页面角色。

SaaS / Dashboard

主题角色已经映射成可直接落地的 CSS 变量

主色、浅底、边框和正文颜色已经拆开，不需要再把一个 `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深色按钮文字

主题前缀: brand
主题预设: SaaS / Dashboard
色板模式: 平衡型
主强调变量: --color-accent
页面底色变量: --color-surface
正文变量: --color-text

CSS 变量映射

:root {
  --brand-50: #F3F6FC;
  --brand-100: #E6ECF9;
  --brand-200: #CBD9F6;
  --brand-300: #A1BBF2;
  --brand-400: #6B95EF;
  --brand-500: #2563EB;
  --brand-600: #1254E2;
  --brand-700: #0D49C9;
  --brand-800: #0838A0;
  --brand-900: #062A7A;

  --brand-primary: var(--brand-500);
  --brand-hover: var(--brand-600);
  --brand-active: var(--brand-700);
  --brand-surface: var(--brand-50);
  --brand-border: var(--brand-200);
  --brand-strong: var(--brand-800);

  --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;
}

命名映射摘要

brand.primary -> --brand-500
brand.hover -> --brand-600
brand.active -> --brand-700
brand.surface -> --brand-50
brand.border -> --brand-200
brand.strong -> --brand-800
accent -> --color-accent
surface -> --color-surface
text -> --color-text

JSON 映射

{
  "palette": {
    "brand.50": "#F3F6FC",
    "brand.100": "#E6ECF9",
    "brand.200": "#CBD9F6",
    "brand.300": "#A1BBF2",
    "brand.400": "#6B95EF",
    "brand.500": "#2563EB",
    "brand.600": "#1254E2",
    "brand.700": "#0D49C9",
    "brand.800": "#0838A0",
    "brand.900": "#062A7A"
  },
  "semantic": {
    "accent": "#2563EB",
    "accent-hover": "#1254E2",
    "accent-active": "#0D49C9",
    "accent-soft": "#F3F6FC",
    "accent-strong": "#0838A0",
    "accent-ring": "#A1BBF2",
    "surface": "#F4F7FB",
    "surface-soft": "#F4F7FB",
    "surface-raised": "#FFFFFF",
    "surface-tint": "#EFF3FA",
    "border": "#D4E0F0",
    "border-strong": "#C4D4EF",
    "text": "#162033",
    "text-muted": "#5B6B80",
    "text-invert": "#FFFFFF"
  }
}

组件 CSS 示例

:root {
  --brand-radius: 18px;
}

.page-shell {
  background: var(--color-surface);
  color: var(--color-text);
}

.panel {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--brand-radius);
}

.button-primary {
  background: var(--color-accent);
  color: var(--color-text-invert);
}

.button-primary:hover {
  background: var(--color-accent-hover);
}

核心价值从主色变成页面角色

真正上线的主题系统不止有主色，还要有浅底、边框、正文和按钮状态等完整页面角色。

适合场景官网、工具站、设计系统

适合已经确定品牌色、准备把它整理成站点主题变量的开发和设计协作场景。

上线前还要验证正文可读性

主题变量生成后，仍要检查正文、说明文字和按钮在真实背景上的对比度是否稳定。

为什么主题变量不能只停留在品牌色板

色板解决的是颜色层级，主题变量解决的是页面角色。两者都需要，但不能互相替代。

`brand-50 ~ 900` 更适合存原始色阶，`accent / surface / text / border` 更适合驱动组件。
如果页面里只有色阶，没有语义角色，组件一多就会回到人工找色、到处复制的问题。
主题变量的意义是让卡片、按钮、表单和说明区都能复用统一规则，而不是每页单独配色。

这个工具适合解决哪些问题

它更适合“已经有品牌方向，但还没沉淀成可维护主题”的阶段。

把品牌主色快速映射成工具站、官网或内容站可直接复用的变量体系。
为组件库、样式系统或主题文件补足浅底、边框、正文和反白文字变量。
为后续 Tailwind、CSS Modules、纯 CSS 或设计 token 提供同一套颜色骨架。

常见主题映射参考

下面这组静态参考更适合帮助你理解不同站型预设下，主题变量的关注重点会如何变化。

名称主色预设重点变量适合场景

SaaS 蓝主题#2563EBSaaS / Dashboardaccent / surface / text适合后台、官网和组件库。

内容暖棕主题#C97B45Editorial / Contentaccent / surface / text适合知识站、博客和专题页。

营销橙主题#F05A28Marketing / Campaignaccent / surface / text适合活动页和下载页 CTA。

使用建议

如果你要把结果正式接进项目，建议按下面这条顺序收口，效率会更高。

先把品牌主色映射成主题变量，再回头做具体按钮、卡片和浅底模块的组件预览。
如果当前只确定了主色，建议先补完整品牌色板，再继续做主题变量映射。
如果最终会落到 Tailwind、JSON Token 或组件库，最好同步生成命名规则，避免只复制一次颜色值。

实际演示

示例输入输出

示例重点展示品牌主色如何被映射成主题变量，而不是只停留在原始色阶。

示例 1

SaaS 蓝主题映射

适合把品牌蓝收口成官网或后台系统可直接复用的主题变量。

输入

品牌主色

#2563EB

主题前缀

brand

站型预设

SaaS / Dashboard

输出

CSS 变量片段

:root {
  --brand-50: #F3F6FC;
  --brand-100: #E6ECF9;
  --brand-200: #CBD9F6;
  --brand-300: #A1BBF2;
  --brand-400: #6B95EF;
  --brand-500: #2563EB;
  --brand-600: #1254E2;
  --brand-700: #0D49C9;
  --brand-800: #0838A0;
  --brand-900: #062A7A;

核心语义变量

accent: #2563EB
surface: #F4F7FB
border: #D4E0F0
text: #162033

示例 2

内容暖棕主题映射

适合把内容站主色整理成更克制的 surface、text 和 accent 组合。

输入

品牌主色

#C97B45

主题前缀

editorial

站型预设

Editorial / Content

输出

CSS 变量片段

:root {
  --editorial-50: #FBFAF8;
  --editorial-100: #F7F2EE;
  --editorial-200: #F1E7DF;
  --editorial-300: #E7D0C0;
  --editorial-400: #DDB498;
  --editorial-500: #C97B45;
  --editorial-600: #B16835;
  --editorial-700: #96582C;
  --editorial-800: #774522;
  --editorial-900: #583318;

核心语义变量

accent: #C97B45
surface: #F7F1E8
border: #E8DBCC
text: #2F241B

规则说明

CSS 变量主题映射器会先生成品牌色板，再把颜色映射成 accent、surface、border、text 这类页面角色变量。

原始色阶负责存颜色来源，语义变量负责给组件直接使用。
站型预设会影响浅底、正文和边框的收敛方式，不是简单换一个主色就结束。
真正可维护的主题系统，应该让按钮、卡片、表单和说明区都能共享同一套角色变量。

常见误区

很多项目的问题不是没有变量，而是变量只停留在 `brand-500` 这种原始层级，没有进入页面角色分工。

把一个主色同时拿去做按钮、浅背景和边框，通常会让页面层级越来越乱。
如果主题变量里没有 text 和 surface 这类角色，组件层依然会频繁手填颜色。
主题映射结果不是最终审美结论，仍然需要回到真实页面检查可读性和品牌气质。

结果解释

结果区会同时输出原始色阶、语义变量、JSON 映射和组件 CSS 示例，适合从颜色方向直接进入主题文件。

原始色阶适合保留为基础变量仓库。
语义变量更适合页面角色、组件样式和设计 token 映射。
组件示例可以帮助你快速验证当前主题变量是否已经足够支撑真实界面。