Hex 到 RGB 颜色转换：完全指南
把 hex 颜色代码转换为 RGB、HSL 和 CMYK。附带一个免费的浏览器内转换器。
什么是十六进制（Hex）颜色代码？
十六进制颜色代码是网页设计中表示颜色的六位字符串，看起来像这样：`#FF5733`。`#` 是前缀，六位字符是三对十六进制数字 —— 红、绿、蓝各一对。Hex 是 hexadecimal（十六进制）的缩写，基数为 16，所以每对可以表示 00 到 FF（十进制的 0 到 255）之间的值。
所以 `#FF5733` 可以拆解为：
- `FF` = 红 255
- `57` = 绿 87
- `33` = 蓝 51
把这三种强度的光混合起来，就得到一种暖橙色。Hex 代码是 CSS、HTML 和大多数设计工具中最常见的颜色书写方式。它短小、与 RGB 转换不丢精度，是网页颜色的通用语言。
你还会遇到的常见颜色表示法有 RGB（红 0-255、绿 0-255、蓝 0-255）、HSL（色相 0-360、饱和度 0-100%、亮度 0-100%）和 CMYK（青、品红、黄、黑/Key 的百分比，用于印刷）。知道如何在它们之间转换，是网页开发者、设计师和数字营销人员的日常工作。
方法一：使用 UtilBoxx 免费颜色转换工具（推荐）
最快、最安全、最私密的方式是 UtilBoxx 的 Hex 转 RGB 工具。它完全在你的浏览器中运行，没有任何数据离开你的设备。没有上传、没有注册、没有追踪。
使用方法如下：
- 打开 utilboxx.com/zh/tools/color/hex-rgb
- 输入或粘贴你的 hex 代码（带或不带前缀 `#` 都可以）
- 一次性看到 RGB、HSL、CMYK 的实时转换
- 用取色器从屏幕任何地方吸取颜色
- 点击任意输出即可复制到剪贴板
为什么推荐这个方法：
- 100% 免费，无账号、无注册、无邮箱验证
- 隐私优先：所有处理都在你的浏览器本地完成，没有任何数据被上传
- 全能：HEX、RGB、HSL、CMYK 在同一个界面
- 双向转换：任意格式输入，得到所有其他格式
- 取色器：从屏幕任意像素吸取颜色
- 一键复制：任意格式一键复制到剪贴板
- 全设备支持：Windows、Mac、Linux、ChromeOS、iOS、Android
如果你只是偶尔转换一下颜色，这是最省心的选择。
方法二：Photoshop 拾色器（付费）
Photoshop 是图像编辑领域的重量级选手，它的拾色器（点击工具栏的前景/背景色色块即可打开）是颜色选择的黄金标准。它把 HEX、RGB、HSL、CMYK、Lab 和其他几种颜色空间并排显示。你可以在 `#` 字段输入 hex 代码，拖动 H/S/B 滑块，点击颜色区域的任意位置，或用吸管工具从打开的图片中取样。
代价是价格。Photoshop 是 Creative Cloud 订阅的一部分，每月约 $22.99（每年约 $240 美元）。如果只是偶尔转一次颜色，杀鸡用牛刀。而且需要桌面安装，对老机器也不太友好。
只有当你已经用它做修图、合成或设计时，Photoshop 才值得。如果颜色转换就是你的全部需求，浏览器工具就够用，还免了账单。
方法三：用代码转换（JavaScript 或 Python）
如果你是开发者，可以用一行代码在任何你喜欢的语言里转换颜色。下面是可靠的片段：
```bash # 在任何装有 Python 的 Unix shell 中： python3 -c "import sys; h=sys.argv[1].lstrip('#'); print(tuple(int(h[i:i+2], 16) for i in (0,2,4)))" "#FF5733" # (255, 87, 51) ```
```javascript // JavaScript：用 parseInt 解析每对 hex const hex = "#FF5733"; const r = parseInt(hex.slice(1, 3), 16); // 255 const g = parseInt(hex.slice(3, 5), 16); // 87 const b = parseInt(hex.slice(5, 7), 16); // 51 console.log(`rgb(${r}, ${g}, ${b})`); // "rgb(255, 87, 51)"
// 反向：RGB 转 HEX function rgbToHex(r, g, b) { return "#" + [r, g, b].map(x => x.toString(16).padStart(2, "0")).join("").toUpperCase(); } console.log(rgbToHex(255, 87, 51)); // "#FF5733" ```
```python # Python f-string 配合 format 规范 hex = "FF5733" r, g, b = int(hex[0:2], 16), int(hex[2:4], 16), int(hex[4:6], 16) print(f"rgb({r}, {g}, {b})") # "rgb(255, 87, 51)"
# RGB 转 HEX def rgb_to_hex(r, g, b): return "#{:02X}{:02X}{:02X}".format(r, g, b) print(rgb_to_hex(255, 87, 51)) # "#FF5733" ```
```css / 现代 CSS 支持 color() 和相对颜色 / :root { --brand: #FF5733; --brand-rgb: 255, 87, 51; / 套进 rgba() / }
.button { background: rgb(var(--brand-rgb)); border: 1px solid rgba(var(--brand-rgb), 0.5); } ```
临时转换，浏览器工具更快；集成进构建流水线或设计系统，代码才是正路。
常见问题
HEX 和 RGB 有什么区别？
HEX 是六位十六进制字符串。RGB 是 0-255 之间的三个十进制数。它们表示完全相同的颜色；这两种格式可以互换。`#FF5733` = `rgb(255, 87, 51)` = 同一种暖橙色。
HSL 适合什么场景？
HSL（色相、饱和度、亮度）是一种比 RGB 直观得多的颜色推理方式。要让颜色"更亮"，增大 L；要让它"更鲜艳"，增大 S；要沿光谱平移，旋转 H。这就是为什么现代 CSS 颜色混合函数和许多设计工具都偏好 HSL。
CMYK 是干什么的？
CMYK 是用于印刷的颜色模型。RGB 是用于屏幕的颜色模型。它们有重叠但不相同：一种鲜艳的 RGB 蓝色在 CMYK 中可能无法不偏紫地印刷出来。在把文件发给印刷厂之前转换成 CMYK，可以预览实际印出来的样子。
Hex 代码大小写敏感吗？
不敏感。`#FF5733` 和 `#ff5733` 是同一种颜色。CSS 也视它们为相同。约定俗成是用大写，更清晰（`#FFFFFF` 比 `#ffffff` 读起来更像"白色"）。
怎么从网页上取色？
用浏览器开发者工具里的吸管。在 Chrome、Firefox 或 Edge 中，打开开发者工具（F12 或 Cmd+Opt+I），点击"检查"工具，然后在样式面板里点击色块。可以在弹出框里复制 hex、RGB 或 HSL 值。UtilBoxx 的工具也内置了屏幕取色器。
在线颜色转换工具安全吗？
取决于服务。UtilBoxx 一切处理都在浏览器中完成 —— 不上传、服务器不处理、不记录日志。对其他工具，假设你的输入会被记录。对一次性颜色代码这没什么大不了，但对专有的品牌色，用一个私密工具更值得。
结论
颜色转换是任何做网页设计、品牌或印刷的人经常要做的小事，不应该为此付费订阅或安装软件。对大多数人来说，UtilBoxx 的免费颜色转换工具 是显而易见的选择：私密、快速、免费、无需注册。
如果你是常驻 Photoshop 的设计师，拾色器是很好的备用。如果你写脚本，JavaScript 和 Python 一行代码无可替代。Mac 用户也可以用内置的 Digital Color Meter（在应用程序/实用工具中）从屏幕取任意颜色并读出 RGB。
其他情况下，去看 UtilBoxx 的颜色工具集，你会找到一个完整的、隐私优先的颜色处理工具箱 —— 全部在浏览器里完成。