命名规则

颜色 Token 命名生成器在线工具

把品牌色、中性色和状态色整理成统一的 Token 命名包，同时输出 CSS 变量、Design Token JSON 和 JS 常量示例，适合设计系统、前端主题和组件库协作。这个页面首屏优先完成命名规则收口。

统一品牌色与状态色命名输出 CSS / JSON / JS 多套命名适合设计系统与主题文件

实时命名

它解决的不是颜色本身，而是“这组颜色应该怎么叫”，避免项目里同时出现 `brandBlue`、`primaryColor`、`blueMain` 这类混乱写法。

基础颜色HEX 颜色值

Token 家族名会自动整理成 kebab-case，同时生成 CSS 变量、JSON Token 和 JS 常量命名示例。

命名生成器更关注“怎么统一叫法”，适合把颜色规则沉淀进设计 token、CSS 变量和前端常量里。

品牌色

颜色家族已经整理成统一的 Token 命名包

从原始 `50-900` 色阶到语义别名、JSON Token 和 JS 常量命名都已经补齐，适合直接沉淀到设计系统。

brand-100brand-500

50#F3F6FC大面积背景

100#E6ECF9浅层背景

200#CBD9F6弱描边

300#A1BBF2次级描边

400#6B95EF浅强调

500#2563EB品牌主色

600#1254E2Hover / 次按钮

700#0D49C9Active / 强调标题

800#0838A0深强调

900#062A7A深色块 / 反白场景

主色--brand-primary主按钮 / 主链接

Hover--brand-hover按钮 hover / 链接悬停

Active--brand-active按钮 active / 深强调

浅底--brand-surface品牌淡底 / 引导区

边框--brand-border品牌弱描边

深强调--brand-strong强调标题 / 图标

家族名: brand
Token 类型: 品牌色
色板模式: 平衡型
推荐主别名: --brand-primary
推荐软底别名: --brand-active
推荐正文别名: --brand-strong

原始色阶变量

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

语义别名变量

:root {
  --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);
}

Design Token JSON

{
  "color": {
    "brand": {
      "50": { "value": "#F3F6FC" },
      "100": { "value": "#E6ECF9" },
      "200": { "value": "#CBD9F6" },
      "300": { "value": "#A1BBF2" },
      "400": { "value": "#6B95EF" },
      "500": { "value": "#2563EB" },
      "600": { "value": "#1254E2" },
      "700": { "value": "#0D49C9" },
      "800": { "value": "#0838A0" },
      "900": { "value": "#062A7A" },
      "primary": { "value": "{color.brand.500}" },
      "hover": { "value": "{color.brand.600}" },
      "active": { "value": "{color.brand.700}" },
      "surface": { "value": "{color.brand.50}" },
      "border": { "value": "{color.brand.200}" },
      "strong": { "value": "{color.brand.800}" }
    }
  }
}

JS / TS 常量

export const brandTokens = {
  brand: {
    50: "#F3F6FC",
    100: "#E6ECF9",
    200: "#CBD9F6",
    300: "#A1BBF2",
    400: "#6B95EF",
    500: "#2563EB",
    600: "#1254E2",
    700: "#0D49C9",
    800: "#0838A0",
    900: "#062A7A",
    primary: "var(--brand-500)",
    hover: "var(--brand-600)",
    active: "var(--brand-700)",
    surface: "var(--brand-50)",
    border: "var(--brand-200)",
    strong: "var(--brand-800)",
  }
} as const;

使用示例

.badge-soft {
  background: var(--brand-active);
  color: var(--brand-strong);
}

.button-main {
  background: var(--brand-primary);
  color: #fff;
}

.button-main:hover {
  background: var(--brand-hover);
}

核心价值统一叫法，减少散落命名

颜色命名一旦失控，后续组件、主题文件和设计稿就很难长期保持一致。

适合场景设计系统 / 主题文件 / Token 管理

适合已经开始收口变量、准备接入 design token 或组件库颜色规范的阶段。

不要混淆色值生成和命名生成是两步

先确定色阶，再统一命名，最后再映射到页面角色，这条顺序会更稳。

为什么颜色命名会失控

多数项目的问题不是没有变量，而是变量名没有统一规则，导致同一种颜色在不同文件里叫法完全不同。

当品牌色、中性色和状态色混在同一套命名里时，组件层和页面层会越来越难维护。
如果只有 `blue-500` 这类原始命名，没有 `primary / surface / border` 这类语义别名，组件仍然难以复用。
前端、设计稿和 token JSON 如果各自一套命名，后续每次协作都会重复解释颜色角色。

这个工具适合在什么时候使用

它更适合“准备沉淀规范”而不是“只想临时取一个颜色”的阶段。

组件库和站点主题开始正式整理颜色变量时。
设计系统要同时维护 CSS、Design Token JSON 和前端常量时。
项目准备从松散的颜色写法过渡到统一 Token 管理时。

常见命名类型参考

不同颜色家族适合的语义别名不同，下面这组静态参考更适合用来判断命名方向。

类型家族名别名片段输出示例适合场景

品牌色brandprimary / hover / active--brand-primary适合主按钮、链接和品牌主题色体系。

中性色neutralsurface / surface-soft / border--neutral-surface适合背景、边框、正文和弱强调层级。

成功色successmain / hover / soft--success-main适合成功反馈、完成状态和正向提示。

警告色warningmain / hover / soft--warning-main适合提醒、待处理状态和风险提示。

错误色dangermain / hover / soft--danger-main适合报错、删除确认和高风险操作。

信息色infomain / hover / soft--info-main适合信息提示、辅助标签和说明块。

使用建议

如果你要把这套命名正式接进项目，建议按下面这条顺序收口。

先用品牌色板或批量颜色转换器把色值统一，再进命名生成器收口变量名。
命名确定后，再用主题映射器把它们映射成 `accent / surface / text / border` 这类页面角色。
如果团队已经在用 Design Token JSON，最好同时保留 CSS 和 JSON 两套输出，避免后续再手抄变量名。

实际演示

示例输入输出

示例重点展示品牌色和状态色在 CSS、JSON Token 和变量命名上的统一方式。

示例 1

品牌蓝 Token 命名

适合产品站或组件库把主色统一成可复用的品牌命名体系。

输入

基础颜色

#2563EB

家族名

brand

命名类型

品牌色

输出

语义别名

--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)

JSON Token 片段

{
  "color": {
    "brand": {
      "50": { "value": "#F3F6FC" },
      "100": { "value": "#E6ECF9" },
      "200": { "value": "#CBD9F6" },
      "300": { "value": "#A1BBF2" },
      "400": { "value": "#6B95EF" },
      "500": { "value": "#2563EB" },
      "600": { "value": "#1254E2" },
      "700": { "value": "#0D49C9" },
      "800": { "value": "#0838A0" },

示例 2

成功绿 Token 命名

适合把反馈色整理成状态别名、Design Token JSON 和前端常量。

输入

基础颜色

#16A34A

家族名

success

命名类型

成功色

输出

语义别名

--success-main: var(--success-500)
--success-hover: var(--success-600)
--success-soft: var(--success-50)
--success-border: var(--success-200)
--success-strong: var(--success-700)
--success-text: var(--success-800)

JSON Token 片段

{
  "color": {
    "success": {
      "50": { "value": "#EFFAF3" },
      "100": { "value": "#DFF6E7" },
      "200": { "value": "#B8EFCC" },
      "300": { "value": "#86EAAA" },
      "400": { "value": "#40E27C" },
      "500": { "value": "#16A34A" },
      "600": { "value": "#139643" },
      "700": { "value": "#0E8138" },
      "800": { "value": "#0B6B2E" },

规则说明

颜色 Token 命名生成器会同时保留原始 `50-900` 色阶和语义别名，核心目标是把颜色值和角色命名统一下来。

原始色阶更适合做颜色仓库，语义别名更适合给按钮、背景、边框和状态提示直接使用。
家族名会被统一整理成 kebab-case，方便同时服务 CSS、JSON 和前端常量命名。
品牌色、中性色和状态色的别名结构不应该完全一样，这也是工具区分命名类型的原因。

常见误区

很多命名混乱问题不是颜色太多，而是原始色阶和语义角色没有分层。

只有 `blue-500` 这类原始名，没有 `primary`、`surface`、`border` 这类角色名，组件层仍然会反复找色。
如果同一种颜色在 CSS、JSON 和前端常量里叫三套名字，后续维护成本会越来越高。
命名生成器不是替你决定颜色审美，它只是先把规则统一好，便于后续团队协作。

结果解释

结果区会同时给出 CSS 变量、语义别名、Design Token JSON、JS 常量和使用示例，适合一次性把命名规则落到多个消费层。

CSS 变量适合页面样式和主题文件。
Design Token JSON 更适合设计 token 平台或多端同步。
JS 常量和使用示例更适合前端主题配置、组件库和文档代码片段。