批量转换

批量颜色格式转换器（HEX / RGB / HSL）

把多行 HEX、RGB 和 HSL 颜色列表统一转换成标准输出，同时生成可直接复制的 CSS 变量清单，适合设计规范、样式系统和历史样式表整理。这个页面首屏优先完成多颜色列表收口。

批量转换多行颜色列表统一输出 HEX / RGB / HSL顺手生成 CSS 变量清单

实时批量转换

它更适合一次性处理多条颜色，而不是逐个手工来回切换单颜色转换工具，尤其适合设计规范整理和主题迁移。

批量颜色输入每行一条颜色，支持 `HEX`、`rgb(...)`、`hsl(...)`，行内可带标签文本，工具会自动提取第一个有效颜色。CSS 变量前缀例如填写 `brand`，结果会输出 `--brand-primary` 这类变量名。

这个工具更适合设计规范整理、组件库变量收口、旧样式表统一换格式，不适合只转换单一颜色。

批量转换结果

已识别 4 条有效颜色

当前输入都已成功转换

结果会同时输出 HEX、RGB、HSL 和 CSS 变量，适合把多来源颜色整理成统一的可交付清单。

4输入行数

4有效颜色

0未识别行数

brand变量前缀

原始输入来源格式HEXRGBHSL

primary: #2563EBHEX#2563EB37, 99, 235221, 83%, 53%

soft-bg: #E0F2FEHEX#E0F2FE224, 242, 254204, 94%, 94%

cta rgb(217, 91, 50)RGB#D95B32217, 91, 5015, 69%, 52%

mint hsl(172, 66%, 50%)HSL#2BD4BD43, 212, 189172, 66%, 50%

HEX 列表: #2563EB, #E0F2FE, #D95B32, #2BD4BD
RGB 列表: rgb(37, 99, 235), rgb(224, 242, 254), rgb(217, 91, 50), rgb(43, 212, 189)
HSL 列表: hsl(221, 83%, 53%), hsl(204, 94%, 94%), hsl(15, 69%, 52%), hsl(172, 66%, 50%)
首个变量名: --brand-primary

HEX 输出列表

#2563EB
#E0F2FE
#D95B32
#2BD4BD

RGB 输出列表

rgb(37, 99, 235)
rgb(224, 242, 254)
rgb(217, 91, 50)
rgb(43, 212, 189)

HSL 输出列表

hsl(221, 83%, 53%)
hsl(204, 94%, 94%)
hsl(15, 69%, 52%)
hsl(172, 66%, 50%)

CSS 变量

:root {
  --brand-primary: #2563EB;
  --brand-soft-bg: #E0F2FE;
  --brand-cta: #D95B32;
  --brand-mint: #2BD4BD;
}

适合阶段规范整理 / 样式收口

当项目里已经散落了一批不同格式的颜色值时，批量转换会比逐个粘贴更高效。

输入特点一行一条最稳

每行保留一个颜色值，前面可以加标签文本，工具会自动提取第一个有效颜色。

输出目标统一清单而不是单值

最终更适合拿到一整份 HEX、HSL 或 CSS 变量清单，再去和组件、设计规范或主题文件对齐。

这个工具最适合解决什么问题

它的价值不在单一转换，而在于把多来源颜色一次性拉回统一规则。

把设计规范、历史 CSS、组件草稿里混杂的 HEX、RGB、HSL 颜色统一成一个交付格式。
整理一批主色、浅底色、边框色和辅助色，方便继续生成 CSS 变量或 Token。
给旧项目做主题迁移时，先批量识别现有颜色，再决定哪些值需要保留、替换或重新命名。

输入时怎么更稳

想让结果更可靠，输入时尽量遵守这几条规则。

一行只放一个颜色值，前后可以带标签，但不要把两种颜色写在同一行。
`rgb(...)` 和 `hsl(...)` 建议使用标准 CSS 写法，避免省略括号或百分号。
如果后续还要生成变量名，提前把每行前缀写成有语义的标签，会比后面再补名更省事。

支持的输入方式

当前首版重点覆盖设计和前端交付里最常见的 3 类颜色写法。

格式输入示例输出方向说明适合场景

HEX#2563EB / primary: #2563EB输出标准 HEX、RGB、HSL 和变量名统一到标准色值和变量名适合品牌规范、设计稿标注和旧样式表整理。

RGBrgb(217, 91, 50)统一换成 HEX、HSL 和 CSS 变量统一到标准色值和变量名适合把组件库或临时 CSS 里的 RGB 收口到同一规则。

HSLhsl(172, 66%, 50%)输出 HEX、RGB 和变量列表统一到标准色值和变量名适合把调色阶段结果整理成最终交付清单。

使用建议

如果你是在做主题收口或变量整理，建议按这条链路继续处理。

先把多来源颜色批量统一格式，再继续做 Token 命名或主题变量映射。
如果这批颜色是准备落到品牌系统里，下一步更适合继续整理语义别名和页面角色。
如果列表里还包含透明度颜色，建议把纯色和透明色拆开，分别进入透明度工具处理。

实际演示

示例输入输出

示例覆盖品牌规范整理和内容站主题收口两类常见批量颜色转换场景。

示例 1

品牌色批量整理

适合把规范文档里的多行品牌色统一成一套可复制的 CSS 变量和标准色值。

输入

批量输入

primary: #2563EB
cta rgb(217, 91, 50)
soft hsl(172, 66%, 50%)

变量前缀

brand

输出

HEX 输出

#2563EB
#D95B32
#2BD4BD

CSS 变量

:root {
  --brand-primary: #2563EB;
  --brand-cta: #D95B32;
  --brand-soft: #2BD4BD;
}

示例 2

内容站颜色清单

适合把专题页标题、浅底和强调色统一收口到同一变量前缀。

输入

批量输入

title: #2F241B
panel rgb(247, 241, 232)
accent hsl(28, 54%, 58%)

变量前缀

editorial

输出

HEX 输出

#2F241B
#F7F1E8
#CE905A

CSS 变量

:root {
  --editorial-title: #2F241B;
  --editorial-panel: #F7F1E8;
  --editorial-accent: #CE905A;
}

规则说明

批量颜色格式转换器按一行一条的方式读取输入，识别其中的 HEX、rgb(...) 和 hsl(...)，再统一输出。

每行保留一个颜色值最稳，前面可以带标签文本，工具会自动提取第一个有效颜色。
混合输入是允许的，结果区会统一给出 HEX、RGB、HSL 和 CSS 变量。
这个工具的价值是一次性收口多条颜色，而不是替代单个颜色转换页。

常见误区

批量转换失败往往不是算法问题，而是输入结构太松散。

如果一行里同时写了多种颜色，工具只会取第一个有效颜色，不适合做复杂文本解析。
带透明度的颜色和纯色最好分开处理，避免变量清单里混入不同通道规则。
批量输出前缀只是基础收口，真正上线前仍然建议再做一次命名规范整理。

结果解释

结果区会把有效条目、未识别条目、格式列表和 CSS 变量一起展示，方便你快速判断这批颜色是否已经可交付。

HEX、RGB 和 HSL 列表适合直接复制给设计规范、文档或代码评审。
未识别输入区更适合帮助你快速定位哪几行还需要手工修正。
CSS 变量输出适合直接进入主题文件或作为后续 Token 命名的初稿。