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 不一致 —— `` 在某些平台上可能渲染为黑色。可靠的兜底是等价的 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,插入测试。转换的比特精确性意味着测试不会因为浮点漂移差异而抖动。