RGB 转 HEX 转换器

什么是 RGB 转 HEX 转换器?

// Serialize {r, g, b, alpha} → canonical hex string
// Emits 6-digit #RRGGBB when alpha === 1, 8-digit #RRGGBBAA otherwise.
function formatHex({ r, g, b, alpha = 1 }) {
  const pair = (v) => Math.round(v).toString(16).padStart(2, '0').toUpperCase();
  const rgb = pair(r) + pair(g) + pair(b);
  if (alpha >= 1) return `#${rgb}`;
  const a = pair(alpha * 255);
  return `#${rgb}${a}`;
}

console.log(formatHex({ r: 255, g: 87, b: 51 }));              // '#FF5733'
console.log(formatHex({ r: 59, g: 130, b: 246 }));             // '#3B82F6'
console.log(formatHex({ r: 255, g: 87, b: 51, alpha: 0.5 })); // '#FF573380'
console.log(formatHex({ r: 5, g: 0, b: 0 }));                  // '#050000' — padStart matters

核心特性

RGB 转 HEX 转换器替代品对比

RGB 转 HEX 示例

rgb(255 87 51)

rgb(59 130 246)

rgb(255 87 51 / 0.5)

rgb(100% 50% 0%)

常见 RGB → HEX 转换

10 个最常转换的 RGB 三元组及其 HEX 等价值的参考表 —— 纯原色、纯次原色,以及来自 Tailwind 调色板的 2 个真实品牌色。

如何使用 RGB 转 HEX 转换器

1. 1

   把 RGB 三元组键入或粘贴到 RGB 字段

   把任意 `rgb()` 值丢进 RGB 输入框 —— 现代空格分隔 `rgb(255 87 51)`、遗留逗号 `rgb(255, 87, 51)`、用斜线表 alpha 的 `rgb(255 87 51 / 0.5)` 或 `rgba(255, 87, 51, 0.5)` 形式,或百分比通道 `rgb(100% 34% 20%)`。工具会在计算 HEX 之前把所有输入形态归一到同一个内部 RGB 三元组。非法字符、超出范围的整数或语法错误会产生一个安静的行内错误;合法 RGB 则会实时刷新其他每一个格式字段。

2. 2

   从 HEX 字段读取 HEX 代码

   RGB 字段上方的 HEX 字段显示对应的 HEX 值:不透明颜色为 `#FF5733`,带 alpha 时为 `#FF573380`(8 位形式)。输出默认使用大写 HEX 数字,以与大多数品牌指南保持一致;小写(`#ff5733`)只是一次机械替换的事,同样是合法 CSS。转换是比特精确的 —— 一次 RGB → HEX → RGB 往返会逐字还原原始三元组,无浮点漂移。

3. 3

   点击「复制」抓取 HEX 字符串

   每个格式卡片右侧都有一个复制按钮。一键即可把值送到剪贴板 —— 按钮标签短暂闪现「Copied!」以便您知道。复制出来的字符串带前导 `#`,可直接粘贴进一条 CSS 规则、一个 Figma 颜色字段、一个 SwiftUI HEX 扩展,或者一个 Android `colors.xml`。要输出特定平台的语法(SwiftUI `Color(red:green:blue:)`、Compose `Color(0xFF...)`、Tailwind v4 `@theme` token),请使用取色器下方的「复制为代码」区段。

4. 4

   同屏可见:HSL、OKLCH、OKLAB、CMYK、命名颜色

   您粘贴的同一个 RGB 也会点亮其他格式字段 —— 给遗留 CSS 用的 HSL,给感知均匀设计系统用的 OKLCH 与 OKLAB,给设计师取色器工作流用的 HSV 与 HWB,给印刷估算用的 CMYK,以及给文档与文案用的最接近 CSS 命名颜色。您绝不会被锁死在仅 RGB → HEX;如果您还需要把 OKLCH 三元组放进 Tailwind v4 `@theme` 块,它就在 OKLCH 字段中,带自己的复制按钮。

5. 5

   用取色器做可视化微调

   格式网格下方是一个 SL 方块 + 色相滑块 + alpha 滑块,用于可视化探索。拖动任意控件,每一个文本字段都会实时更新,包括您一开始用的 RGB 与 HEX。在 Chromium 系浏览器(Chrome、Edge、Brave)上,EyeDropper 按钮会激活原生 `EyeDropper` API,可在屏幕任意位置取样像素(包括浏览器窗口之外) —— 当您想从另一应用 UI 抓一个 RGB 三元组、又不愿先截图,然后立刻读出 HEX 时非常有用。

RGB / HEX 常见错误

跳过 padStart:
[5, 87, 51].map(v => v.toString(16)).join('') → '55733'
产生非法的 5 字符 HEX。

使用 padStart(2, '0'):
[5, 87, 51].map(v => v.toString(16).padStart(2, '0')).join('') → '055733'
合法的 6 字符 HEX;对所有 0–255 通道值都正确。

跳过舍入:
(0.5 * 255).toString(16) → '7f.8'
产生带小数点的非法 HEX。

先舍入到整数:
Math.round(0.5 * 255).toString(16).padStart(2, '0') → '80'
合法的 2 位 HEX 对;匹配 CSS Color 4 归一化。

把 Android 前 alpha HEX 输出到 CSS:
rgb(255 87 51 / 0.5) → #80FF5733(Android 格式)
CSS 会解析为 alpha=128、R=255、G=87、B=51 —— 颜色完全不对。

使用目标平台所声明的格式:
for CSS: #FF573380(alpha 在末字节)
for Android Compose: Color(0x80FF5733)(alpha 在首字节)
不要在两者之间直接互换粘贴而不重新排序。

直接对 gamma 编码的 RGB 求平均:
(rgb(255,0,0) + rgb(0,255,0)) / 2 = rgb(128, 128, 0)
看上去像暗橄榄色,而不是明亮黄色。

在线性 RGB 中求平均:
解码 → 线性 RGB → 求平均 → 重新编码 → rgb(188, 188, 0)
可见的明亮黄色,与物理光混合的结果相符。

谁在使用 RGB 转 HEX

前端开发者把 Canvas RGB 转成 CSS HEX

Canvas API 绘制函数以 RGB 三元组报告和接受颜色(`ctx.fillStyle = 'rgb(255 87 51)'`),但周围的 CSS 样式表想要 HEX 变量(`--color-fill: #FF5733`)。粘贴一次 RGB 就能得到对应 HEX,可直接放进 CSS 自定义属性。当您从 canvas 渲染的图表或数据可视化中提取品牌色、在静态 UI 中复用时很有用。

设计师把 Photoshop RGB 翻译成 Figma HEX

Adobe 的取色器(Photoshop、Illustrator、InDesign 中)以三个 0–255 整数(分布在三个通道框里)报告 RGB。相对地,Figma 在其设计面板中默认把颜色值显示为 HEX。在这里把 Photoshop 的三个整数作为 `rgb(...)` 粘贴,复制 HEX 输出,丢进 Figma 的颜色字段。和原 Photoshop 颜色精确匹配,无需绕道截图加吸管。

硬件开发者把 LED 传感器 RGB 转成 Web HEX

可寻址 LED 灯带、颜色传感器与硬件 RGB 摄像头都以 0–255 整数报告通道值。当这些读数需要驱动 Web 仪表盘(「灯当前发出这种颜色」)时,CSS `style="background: ..."` 属性期望的就是对应的 HEX 代码。粘贴传感器的 RGB 三元组,复制 HEX,插入仪表盘的标记中。

游戏开发者把 Unity Color 导出到 Web 模型稿

Unity 的 `Color` 与 Unreal 的 `FLinearColor` 构造器接受归一化的 0–1 浮点数;每个分别乘以 255,就得到对应的 RGB 整数。把得到的 `rgb(...)` 粘到这里,复制 HEX,丢进需要精确匹配游戏内强调色的 Web 模型稿或营销站点。同屏的 OKLCH 视图还会显示感知亮度,所以稿件调色板可以手动调到与游戏的亮度水平匹配。

无障碍工程师审计 Photoshop 品牌色

当品牌风格指南以 RGB 整数三元组报告颜色(「品牌橙是 RGB 255 / 87 / 51」),而 WCAG 审计工具想要 HEX 代码时,本转换器就是桥梁。粘贴 RGB 三元组,复制 HEX,跑一遍审计。本工具中的 WCAG 与 APCA 对比度徽章也会一步显示结论,因此您不必在三个独立工具之间来回切换。

邮件开发者把 rgba() 迁移到 8 位 HEX

现代邮件客户端 HTML 支持带 alpha 颜色的 8 位 HEX(`#FF573380`),但遗留模板常常把同一值存为 `rgba(255, 87, 51, 0.5)`。在这里粘贴 rgba(),读出 8 位 HEX 输出,迁移就变成机械操作。HEX 字段对 50% alpha 的情形显示 `#FF573380`;遗留 `rgba()` 形式仍然就在 RGB 字段中,供仍然需要它的回退场景使用。

开发者用两种格式记录品牌 token

设计 token 文档常常用 HEX 与 RGB 两种形式展示同一个颜色:CSS 代码块用 HEX,文案注释用 RGB(「品牌橙是 `#FF5733`,等价于 RGB 255 / 87 / 51」)。同屏并排显示两者,让文档作者一次复制全部,而不必跑两个工具。可分享的 URL 哈希也让读者能点进去看到讨论中那一确切颜色。

QA 工程师对照 HEX 规范断言像素颜色

视觉回归测试有时把像素颜色捕获为 RGB 整数(`expect(pixel).toMatchRgb([255, 87, 51])`),而底层规范以 HEX 给出(「按钮必须渲染为 `#FF5733`」)。在这里粘贴捕获的 RGB,就能得到对应 HEX,QA 工程师可以直接与规范比对。转换的比特精确性意味着比对不会因为浮点漂移差异而抖动。

RGB 转 HEX 的数学与序列化

toString(16).padStart(2, '0') 即为一行实现

整个 RGB 到 HEX 的转换每通道一行表达式就够了:`value.toString(16).padStart(2, '0')`。JavaScript 的 `toString(16)` 把十进制整数转为 16 进制字符串表示。`padStart(2, '0')` 是容易遗忘的细节 —— 没有它,通道值 5 会被序列化成 `'5'` 而不是 `'05'`,在与其他通道拼接时产生非法 5 字符 HEX,如 `#55733`。标准写法是 `[r, g, b].map(v => v.toString(16).padStart(2, '0')).join('')`,然后前置 `'#'`。

百分比归一化:× 255 / 100,再舍入

CSS Color 4 允许在 `rgb()` 中使用百分比通道:`rgb(100% 34% 20%)` 等价于 `rgb(255 87 51)`。归一化规则是 `Math.round(percent × 255 / 100)`。`50% × 255 / 100 = 127.5` 舍入到 128(银行家舍入远离 .5)。同样规则适用于以百分比表达的 alpha(`rgb(255 87 51 / 50%)` ↔ `rgb(255 87 51 / 0.5)`)。整数形式与百分比形式归一化后产生完全相同的 HEX 输出;工具会在重新归一化之后,在 RGB 字段中显示规范的整数形式。

alpha 到 HEX:乘以 255、舍入、编码为末尾对

带 alpha 的 RGB(`rgb(255 87 51 / 0.5)`)通过把 alpha 乘以 255、舍入到最近的整数、编码为附加在 RGB 之后的第 4 个 HEX 对,输出 8 位 HEX。`0.5 × 255 = 127.5`,舍入到 128 = `0x80`,输出 `#FF573380`。CSS Color 4 规范在这一转换中使用银行家舍入(round-half-to-even),工具沿用同一约定。当 alpha 恰好为 1 时,8 位形式回退到 6 位,避免把多余的 `FF` 对漏进样式表。

RGB 输入:CSS Color 4 空格分隔与遗留逗号都接受

解析器同时接受现代 CSS Color 4 形式 `rgb(255 87 51)` 与遗留 CSS 1 形式 `rgb(255, 87, 51)`。现代形式与其他 CSS Color 4 函数式记法(`hsl()`、`lab()`、`oklch()`、`color()`)对齐,它们全部使用空格分隔加斜线表 alpha。遗留逗号形式在每个常青浏览器中仍然受支持,在较老的代码库中也仍然常见。两者产生完全相同的 HEX 输出;工具的 HEX 序列化器并不在意是哪种输入形态送进来的。

OKLCH 作为内部事实源,保障往返稳定

尽管这个辐条专门针对 RGB → HEX,共享的底层转换器在内部以 OKLCH 三元组持有规范颜色。这意味着 RGB → HEX → HSL → OKLAB → CMYK → RGB 往返不会有逐步浮点漂移;把 HSL 或 sRGB 作为枢轴的老式转换器会在每一步累积舍入误差。选择 OKLCH(而不是 OKLAB)是为了把色相保留为稳定的轴,因此拖动色相滑块不会意外地穿过灰色淡入淡出。按照 Björn Ottosson 2020 年的 OKLAB 论文。

通道编码:8 位无符号,sRGB gamma 编码

每个 RGB 通道是 8 位无符号整数(0–255),在 IEC 61966-2-1(1996)定义的 sRGB 色彩空间中编码。这些值是 *gamma 编码* 的 —— 也就是说,通道值与感知亮度之间的关系是非线性的,遵循分段 sRGB 传递函数(大致是 2.4 指数,接近 0 处带一段小的线性段)。当您做颜色运算时这一点很重要:在 gamma 编码形式下对两个 RGB 值求平均,得到的是错误的感知中点。要正确混色,先解码到线性 RGB(CSS Color 4 §11.2),然后求平均,再重新编码。工具的 OKLCH 内部模型让这一切对外透明。

RGB / HEX 工作流最佳实践

品牌指南偏好大写 HEX,代码偏好小写

品牌指南、营销 PDF 与面向设计师的文档通常使用大写 HEX(`#FF5733`),以保持视觉一致 —— 全大写的样子读起来像品牌标识。代码(CSS、JSON、JavaScript 源码)按惯例通常使用小写(`#ff5733`),因为小写更快敲、也是自动生成的 linter 输出中更常见的形式。两者都是合法 CSS,解析结果完全相同;每个场景挑一种、保持一致。工具默认大写;一次机械替换即可切到小写。

只在 alpha < 1 时输出 8 位 HEX

当 alpha 等于 1(完全不透明)时,回退到 6 位形式。末尾的 `FF` 对(`#FF5733FF`)是合法 CSS,但在视觉上会让样式表显得杂乱,还会让某些遗留解析器误渲染。8 位形式应只在 alpha 实际具有意义的透明度时出现。本工具自动遵循这条规则 —— 不透明颜色输出 6 位 HEX,带 alpha 颜色输出 8 位 HEX,分界点是精确的(alpha = 1.0 输出 6 位;alpha = 0.9999 输出 8 位以保留数据)。

不要直接对 RGB 通道求平均做颜色运算

RGB 通道是 gamma 编码的 —— 对两个 RGB 值求平均,得到的是错误的感知中点。`(255, 0, 0)` 与 `(0, 255, 0)` 平均出 `(127, 127, 0)`,一个浑浊的暗橄榄色,而不是您期望的视觉上明亮的黄色中点。要正确混色,先解码到线性 RGB(CSS Color 4 §11.2),然后求平均,再重新编码。或者更好地,在 OKLAB 或 OKLCH 中工作,那里的感知距离是均匀的 —— 设计系统的调色板生成器正是这样做的。

CSS 变量偏好 HEX,硬件偏好 RGB

当您写 CSS 自定义属性或 Tailwind 配置 token 时,偏好 HEX —— 它更短,能干净地放进 JSON 或 YAML。当消费方代码做逐通道运算(canvas 调用、图像操作、硬件 LED 驱动、OpenGL 颜色属性)时,RGB 整数形式更便于消费。两种格式描述同一个颜色;选择纯粹关乎读写者是谁,无关正确性。本工具的同屏字段视图让两者同样便利。

乘以 255 之前先校验 alpha 区间

当您自己实现 RGB → 8 位 HEX 转换器时,在 `× 255` 步骤之前先校验 alpha 浮点数落在 `[0, 1]` 区间内。超出范围的 alpha(负数或 > 1)会安静地产生非法 HEX 对,某些解析器接受、某些拒绝 —— 一种脆弱的失败模式。先夹紧(`Math.max(0, Math.min(1, alpha))`),再乘、再舍入、再 HEX 编码。本工具对超出范围的 alpha 显示一个安静的行内错误,而不是输出损坏的 HEX 字符串。

用 URL 哈希分享实时的颜色决策

每次颜色变更都会自动把 URL 哈希更新为 `#hex=ff5733`。把 URL 复制进 Slack 线程或 GitHub issue,打开它的人会落在同样的颜色、同样的 HEX 上。这比在聊天里粘贴一个 RGB 三元组更可靠 —— 收件人手动输入时偶尔会打错逗号或漏掉一个通道 —— 也让设计评审讨论可以指向某一确切颜色,而不是「上周二聊过的那个橙色」。哈希永远不会传到服务器。

常见问题