HEX 转 RGB 转换器

什么是 HEX 转 RGB 转换器?

// Parse any hex shape (3/4/6/8-digit) into an RGB tuple [r, g, b, a]
// All channels in 0-255 range; alpha in 0-1.
function parseHex(input) {
  let h = input.trim().replace(/^#/, '');
  // Expand 3-digit and 4-digit shorthand by duplicating each digit
  if (h.length === 3 || h.length === 4) {
    h = h.split('').map(c => c + c).join('');
  }
  if (!/^[0-9a-fA-F]+$/.test(h) || (h.length !== 6 && h.length !== 8)) {
    throw new Error(`Invalid hex: ${input}`);
  }
  const r = parseInt(h.slice(0, 2), 16);
  const g = parseInt(h.slice(2, 4), 16);
  const b = parseInt(h.slice(4, 6), 16);
  const a = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
  return [r, g, b, a];
}

console.log(parseHex('#FF5733'));   // [255, 87, 51, 1]
console.log(parseHex('#F73'));       // [255, 119, 51, 1]
console.log(parseHex('#FF573380'));  // [255, 87, 51, 0.5019607843137255]

核心特性

HEX 转 RGB 转换器替代品对比

HEX 转 RGB 示例

#FF5733

#3b82f6

#FF573380

#F73

常见 HEX → RGB 转换

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

如何使用 HEX 转 RGB 转换器

1. 1

   把 HEX 代码粘贴到 HEX 字段

   把任意 HEX 值丢进 HEX 输入框 —— 带或不带前导 #、3 位简写(#F73)、6 位完整形式(#FF5733)、4 位 alpha 简写(#F738),或者 8 位 alpha 完整形式(#FF5733CC)。工具会把全部 5 种输入形态在内部归一到同一规范颜色。大小写无关(#ff5733 与 #FF5733 解析结果完全相同)。非法字符或位数错误会产生一个安静的行内错误;合法 HEX 则会实时刷新其他每一个格式字段。

2. 2

   从 RGB 字段读取 RGB 三元组

   HEX 字段下方的 RGB 字段以 CSS Color 4 现代空格分隔语法显示对应的 rgb() 值:不透明颜色为 rgb(255 87 51),带 alpha 时为 rgb(255 87 51 / 0.5)。每个通道是 0–255 整数;alpha 归一化到 0–1。数值是比特精确的 —— parseInt('FF', 16) 返回 255,过程中不涉及浮点运算,因此往返回到 HEX 时输出与原始输入逐字一致。

3. 3

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

   每个格式卡片右侧都有一个复制按钮。一键即可把值送到剪贴板 —— 按钮标签短暂闪现「Copied!」以便您知道。复制出来的字符串是规范的 CSS Color 4 语法(rgb(255 87 51));如果您的目标需要遗留的逗号形式,转换是机械的(把空格替换为 , )。要输出特定平台的代码(SwiftUI、Compose、Flutter、Tailwind v4),请使用取色器下方的「复制为代码」区段。

4. 4

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

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

5. 5

   用取色器做可视化微调

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

HEX / RGB 常见错误

假定 #F73 左填充到 #000F73:
expected: 深蓝 rgb(0, 15, 115)
actual:   亮橙 rgb(255, 119, 51)

3 位简写复制每一位:
#F73 → #FF7733 → rgb(255, 119, 51)
本工具的实时展开会随键入显示这一点。

跳过 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 通道值都正确。

把 CSS 8 位 HEX 粘进遗留 Android 的 Color.parseColor():
#FF573380 被当作 #AARRGGBB 解读
→ 颜色和 alpha 都完全错了。

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

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

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

谁在使用 HEX 转 RGB

前端开发者把 Figma HEX 转成 Canvas RGB 调用

Figma 导出 HEX,而 CanvasRenderingContext2D.fillStyle 既接受 HEX 也接受 rgb() —— 当您在做逐通道运算(渐变、混合、图像操作)时,直接拿到通道整数比每次重新解析 HEX 更快。HEX 粘贴一次,复制 rgb(255 87 51) 三元组,插入 canvas 调用。您这边一行 HEX 解析代码都不用写。

设计师把 Web HEX 翻译给 Photoshop / Illustrator RGB

Adobe 的取色器把跨三个通道框的 0–255 整数作为原生输入。把 Web HEX 粘贴到本工具,读出 R / G / B 整数,在 Photoshop 中输入。原 Web 颜色被精确匹配,无需绕道截图加吸管。当设计师需要在面向印刷的 Adobe 排版应用中模拟一个 Web 颜色时很有用。

游戏开发者把品牌 HEX 加载进 Unity / Unreal RGB API

Unity 的 Color 和 Unreal 的 FLinearColor 都接受 0–1 归一化浮点数。粘贴品牌 HEX,读出 0–255 整数,除以 255(或通过「复制为代码」直接用工具的归一化浮点输出)。这个转换是机械的但手做容易出错 —— 把 (255, 87, 51) 输进期望 (1.0, 0.341, 0.2) 的构造器,会得到一个被裁成白色的颜色和一条困惑的推文。本工具同屏展示两种形式。

硬件开发者给可寻址 LED 灯带编程

WS2812、APA102 以及其他可寻址 RGB LED 灯带把每个 LED 表示为 0–255 整数通道。粘贴墙挂产品展示用的品牌 HEX,读出 RGB 三元组,把它放进控制器的颜色数组。当市场团队指定一个 HEX、固件工程师需要通道值用于一次 pixels.setPixelColor(i, r, g, b) 调用时非常有用。

无障碍工程师核验品牌色可读性

WCAG 2.1 对比度检查在内部接受 RGB 输入。粘贴品牌 HEX,在一屏内得到对应的 RGB,加上对白与对黑的 WCAG 比率,再加上 APCA Lc 分数。如果品牌色没过正文文本 4.5:1 的下限,旁边那个感知均匀的 OKLCH 字段能让您方便地往上推 L,直到对比度通过,且不丢失品牌识别度。

设计师在邮件模板中内嵌 RGB

某些邮件客户端(Windows 上的 Outlook、较老的 Gmail 移动版)在 HTML 属性中解析 HEX 不一致 —— <font color="#FF5733"> 在某些平台上可能渲染为黑色。可靠的兜底是等价的 RGB rgb(255, 87, 51) 内联形式。粘贴品牌 HEX,用遗留逗号语法复制 RGB 字符串(从现代空格形式手动替换),放进邮件模板的 style 属性。

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

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

QA 工程师验证像素颜色快照

视觉回归测试常常对渲染像素断言特定的 RGB 值(expect(pixel.r).toBe(255))。当规范以 HEX 形式给出(「按钮必须渲染为 #FF5733」)时,QA 工程师需要对应的 RGB 整数才能写出断言。粘贴 HEX,读出 R / G / B,插入测试。转换的比特精确性意味着测试不会因为浮点漂移差异而抖动。

HEX 转 RGB 的数学与解析

parseInt(hex, 16) 即为一行实现

整个 HEX 到 RGB 的转换每通道一行表达式就够了:R 用 parseInt(hex.slice(1, 3), 16)、G 用 parseInt(hex.slice(3, 5), 16)、B 用 parseInt(hex.slice(5, 7), 16)。JavaScript 的 parseInt 在基数 16 下把 HEX 字符串读成 0–255 范围内的十进制整数,完全不涉及浮点。反方向(value.toString(16).padStart(2, '0'))同样是一行式 —— padStart(2, '0') 是容易遗忘的细节,它能让像 5 这样的单位通道值得到 '05' 而不是 '5'。

简写展开:复制每位,而不是左填充

CSS 规范把 3 位简写定义为 #RGB 通过复制每一位扩展为 #RRGGBB。#F73 → #FF7733,不是 #000F73。同样规则适用于 4 位 alpha 简写 #RGBA → #RRGGBBAA。这是 CSS 颜色语法里最常被搞错的角落之一 —— 初学者经常以为 #F73 是左填充成 #000F73,那会得到一个完全不同的颜色(去饱和的深蓝,而不是预期的亮橙)。本工具的展开行为让规则一眼可见。

8 位 alpha:末尾那一对,除以 255

8 位 HEX #RRGGBBAA 在 RGB 三元组之后用一对 2 位 HEX 编码 alpha,以相同方式解析,然后除以 255 得到 0–1 浮点数。#FF573380 解析出 alpha = 0x80 / 255 = 128 / 255 = 0.5019607843137255。CSS Color 4 规范对输出使用 4 位小数精度(/ 0.502);本工具沿用同一约定。8 位 HEX 在 2018 年登陆所有常青浏览器(Chrome 62、Firefox 49、Safari 9.1、Edge 79)。2018 年之前的回退是 rgba()。

RGB 输出:默认 CSS Color 4 空格分隔

工具默认输出 rgb(255 87 51)(现代空格分隔),而不是遗留的 rgb(255, 87, 51)(CSS 1 逗号分隔)。两种形态在 2018 年以来的每个常青浏览器中都是合法且可互换的。现代语法与 CSS Color 4 的其他函数式记法(hsl()、lab()、oklch()、color())对齐,它们全部使用空格分隔加斜线表 alpha。如果您的工具链需要,遗留的逗号形式只是一次机械替换的事;在 IE 9–11 场景中,rgba() 仍然是合适的回退。

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

尽管这个辐条专门针对 HEX → RGB,共享的底层转换器在内部以 OKLCH 三元组持有规范颜色。这意味着 HEX → RGB → HSL → OKLAB → CMYK → HEX 往返不会有逐步浮点漂移;把 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 内部模型让这一切对外透明。

HEX / RGB 工作流最佳实践

新代码使用现代空格分隔的 RGB 语法

对于 2025 年及以后交付的代码,CSS Color 4 的 rgb(255 87 51)(空格分隔)和 rgb(255 87 51 / 0.5)(斜线表 alpha)是规范语法。遗留的逗号形式 rgb(255, 87, 51) 与 rgba(255, 87, 51, 0.5) 仍处处被支持,但在 CSS Color 4 中已在文体上被视为不推荐。新样式表中请使用现代语法;只在确实需要遗留支持的 IE 9–11 场景里继续保留 rgba() 作为兜底。

上线带 alpha 的代码前,核验 8 位 HEX 支持

带 alpha 的 8 位 HEX(#FF573380)在 2018 年登陆所有常青浏览器,但遗留 CSS 预处理器与某些较老的设计工具会静默把 alpha 那一对截断为 6 位 HEX。结果就是:一个您期望 50% 透明的颜色,渲染成完全不透明。在生产环境发布 8 位 HEX 之前,请核实目标解析器是否支持;对于遗留目标,请回退到显式的 rgba(255, 87, 51, 0.5) 语法,它自 IE 9 起就一直被支持。

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

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

设计 token 源用 HEX,硬件用 RGB

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

在 token 名中显式记录 alpha

当设计 token 包含 alpha(例如一个 50% 不透明的遮罩),不要把 alpha 埋进 8 位 HEX 像 #000000CC —— 把 token 拆成 --color-overlay-base: #000000 与 --color-overlay-alpha: 0.8,或者使用显式 RGBA 形式。把 alpha 埋进 HEX 会让任何浏览这份文件的人都读不懂 token,也让按 token 微调 alpha 变得困难,必须先重新解析 HEX。当代价只是多一个变量时,token 系统的清晰度胜过简短性。

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

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

常见问题