HEX 转 RGB 转换器，免费

HEX 转 RGB 的原理

HEX 颜色使用 6 位十六进制字符串（#RRGGBB），每两位代表红、绿、蓝通道。数值范围为 00（0）到 FF（255）。

RGB 为每个通道使用三个十进制数字（0 到 255）。例如，#2b7190 拆分为 R:43、G:111、B:142。

常见问题

如何手动将 HEX 转换为 RGB？

将 hex 代码分成三对（如 #FF8800 → FF、88、00），然后把每对从 16 进制转换为 10 进制：FF = 255，88 = 136，00 = 0。结果是 rgb(255, 136, 0)。

3 位 HEX 代码怎么处理？

3 位 HEX 是一种缩写形式，每位数字都被重复：#F80 = #FF8800。此转换器会自动处理两种格式。

什么时候用 HEX，什么时候用 RGB？

HEX 更紧凑，在 CSS 中广泛使用。当您需要在代码中单独操作各通道，或使用 rgba() 处理透明度时，RGB 更合适。

十六进制颜色表示法的本质

十六进制颜色是一种24位RGB颜色的十六进制（Base-16）表示。# 后跟六个数字，分三对：红、绿、蓝。每对是从 00 到 ff 的数字：每通道一个字节（8位），三个通道共24位。这恰好足以编码2²⁴ = 16,777,216种离散颜色之一，即「真彩色」/「数百万种颜色」范围，自1990年代末以来一直是消费级显示器的基准。

井号（#）不是值的一部分，而是语法前缀，告知CSS解析器「接下来是十六进制颜色而非变量名」。没有它，ff0000 等字符串对词法分析器可能存在歧义。数字0-9保持其十进制含义；字母A-F（在CSS中大小写不敏感）表示十进制10-15。因此 f 是15，ff 是 15 × 16 + 15 = 255。

数学原理与示例计算

每个两位十六进制对均以公式 (high_digit × 16) + low_digit 映射到十进制0-255，其中每个数字被解释为0-15（A=10至F=15）：

• FF → (15 × 16) + 15 = 255
• 88 → (8 × 16) + 8 = 136
• 00 → 0
• 2B → (2 × 16) + 11 = 43（上方默认色块 #2b7190 的红色通道）
• 71 → (7 × 16) + 1 = 113
• 90 → (9 × 16) + 0 = 144

在JavaScript中，整个解析逻辑只需两行。const n = parseInt(hex.slice(1), 16);，接着 const [r, g, b] = [(n >> 16) & 0xff, (n >> 8) & 0xff, n & 0xff];：这基本上就是网络上所有十六进制转RGB转换器的核心代码。反向转换为 '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')。

3位、4位与8位简写形式

CSS允许在通道对称时使用缩写形式：

• 3位（#RGB）：每个数字被复制以构成等价的6位代码。#F00 → #FF0000；#FFF → #FFFFFF；#369 → #336699。此形式便于表达「圆整」的设计友好色彩，但只能表达4096个唯一值而非1670万个；#778899 就无法缩写，因为各对数字不同。
• 8位（#RRGGBBAA）：与6位格式相同，外加一个透明度对。00 = 完全透明，FF = 完全不透明，80 ≈ 50%不透明度。功能上等同于 rgba(255, 0, 0, 0.5)，但更紧凑。
• 4位（#RGBA）：8位格式的复制缩写。#F00A → #FF0000AA。

3位简写形式存在于CSS Level 1（1996年）。4位和8位的透明度形式出现较晚，收录于CSS Color Module Level 4，约自2015年中期起获得广泛的跨浏览器支持。

CSS命名颜色与rebeccapurple的故事

在十六进制成为网页主流之前，命名颜色才是规范。HTML 4.01（1999年12月）规定了16种命名颜色：black、silver、gray、white、maroon、red、purple、fuchsia、green、lime、olive、yellow、navy、blue、teal、aqua，均来自Windows VGA调色板的标准16色。CSS 2.1新增 orange 作为第17个。CSS Color Module Level 3随后从X11的 rgb.txt 文件（Mosaic和早期Netscape继承自其X Window System根源）中正式采纳了约130个额外名称，使总数达到大约147-148个，取决于如何统计 cyan/aqua、gray/grey 等别名。

CSS Color Module Level 4又新增了一个，并附有一段故事。Rebecca Meyer是CSS权威人士兼W3C参与者Eric A. Meyer六岁的女儿，于2014年6月7日因脑癌去世，那天正是她的六岁生日。同周Eric在博客上写道：「她活到了六岁。将近十二个小时，她是六岁的。」一位社区成员提议将她喜爱的颜色，具体说是一种深茄子紫，十六进制代码为 #663399，命名为 beccapurple；Eric接受了，但提出一个条件：必须命名为 rebeccapurple，而非 beccapurple，因为Rebecca自己最近宣布她已经长大了，不再用小名了。CSS工作组于2014年6月22日（她去世两周后）批准了这一更改。WebKit等浏览器引擎在数天内就发布了支持。它是CSS中唯一以人名命名的颜色，永远驻留在每款现代浏览器中，静默地缅怀她。

sRGB：每个十六进制颜色代码隐含的色彩空间

当您在CSS中写下 #FF5733 时，不只是在指定一个数字，而是在指定sRGB色彩空间中的一个颜色。这是隐式的；浏览器会将您的十六进制值解释为sRGB，除非您使用较新的 color() 函数另行指定。

sRGB由惠普和微软于1996年联合提出，并被采纳为IEC 61966-2-1:1999标准，这是一种以彼时典型CRT显示器响应曲线为基准设计的单一设备无关色彩空间。其基色坐标与ITU-R BT.709（HDTV标准）相同，白点为D65（6500 K）。W3C明确将sRGB定义为网页的默认色彩空间；所有十六进制代码、所有 rgb() 值、所有传统JPEG和无标记PNG图像均以sRGB解释。

诚实的局限性：sRGB约覆盖CIE 1931可见色彩图的35.9%。有些颜色存在于自然界，可在现代OLED手机屏幕上显示，却无法用十六进制表示，如饱和翠绿、鲜艳的红橙日落色调、荧光颜料。CSS Color Module Level 4通过 color() 函数引入了新的色彩空间：Display P3（自iPhone 7和2015年底iMac以来被Apple显示器采用，比sRGB约宽25%）和Rec. 2020（4K/8K广播标准，约覆盖CIE 1931的75%）。在仅支持sRGB的旧设备上，浏览器会优雅降级。

现代替代方案：HSL、HWB、OKLCH

十六进制格式紧凑但对人不友好，看到 #3DE7C9 无法猜出其色调。CSS逐步增加了符合人类色彩思维方式的函数式表示法：

• HSL：色调、饱和度、亮度。色调是0-360°的角度值。引入于CSS Color Module Level 3（2011年）。滑块直观，但亮度在感知上不均匀，L=50%的黄色看起来比相同亮度的蓝色明亮得多。
• HWB：色调、白度、黑度。更符合画家的思维模型（「加了一点白和一点黑的蓝色」）。色域与HSL相同。
• LCH / Lab：感知均匀；相同的数值变化对应相同的感知变化。支持P3+宽色域。
• OKLCH：最新引入者，由Björn Ottosson于2020年12月提出。修正了CIELAB的色调失真和暗色渐变问题。相同的亮度数值在所有色调下看起来一样亮。在OKLCH中线性插值可生成视觉平滑的渐变，避免sRGB中 linear-gradient(red, green) 产生的浑浊灰色中间点。Tailwind CSS v4.0（2025年1月）将整个默认色板从 rgb() 切换至 oklch()。浏览器支持自2023年起已相当普遍。

从长远看，OKLCH是CSS色彩的发展方向，但十六进制代码仍将是设计工具、品牌规范和复制粘贴片段的通用语言，它们简短、可安全复制粘贴到任何文本媒介，且被普遍理解。

加法混色RGB的1861年起源

RGB模型可追溯至Young-Helmholtz三色视觉理论（19世纪初），该理论提出人眼有三类对应红、绿、蓝的色觉感受器。James Clerk Maxwell于1861年5月17日在伦敦皇家研究院以实验验证了这一理论。他将一条花格缎带的三张黑白照片（分别透过红、绿、蓝滤镜拍摄）通过装有相同彩色滤镜的三台投影仪投射，屏幕上的叠合图像近似呈现出缎带的完整色彩，这通常被认为是第一张彩色照片。同样的加法RGB原理驱动着有史以来每一款CRT、LCD、OLED和等离子显示器：每个像素由红、绿、蓝三个亮度可独立调节的子像素构成，视网膜将它们混合为感知到的颜色。

更多问题

十六进制颜色值区分大小写吗？

不区分。#abcdef 和 #ABCDEF 对解析器来说完全相同。CSS规范明确指出：十六进制颜色值不区分大小写。#FfAa00 这样的混合大小写也合法，尽管在生产代码中少见。（不要与URL片段标识符混淆，其中前导井号是完全不同的语法概念。）

为什么对两个十六进制颜色取平均值会产生浑浊的灰色？

因为十六进制值经过了伽马编码（应用了sRGB传递函数），在伽马空间中取平均值与在线性光空间中取平均值并不相同。典型例子是 linear-gradient(red, green) 产生浑浊的橄榄色中间点，在伽马编码空间中数学上是正确的，但视觉上是错误的。OKLCH等现代色彩函数通过在感知均匀空间中插值解决了这个问题，因此能生成更平滑的渐变。

为什么没有「霓虹色」或「荧光色」的十六进制代码？

因为十六进制表示法隐式使用sRGB，而sRGB仅覆盖人眼可见颜色的约36%。许多鲜艳颜色（饱和翠绿、明亮红橙、荧光颜料）存在于自然界，可在现代宽色域屏幕上显示，但超出了sRGB色域范围。要使用它们，需要 color(display-p3 …)、color(rec2020 …) 或高彩度值的 oklch()。这些颜色没有对应的十六进制表示。

什么是「网络安全色」调色板？

1990年代末，当许多显示器仅限256色时，设计师坚守一个216色的调色板，即Windows与Mac OS系统调色板的交集。这216色来自一个6×6×6的立方体：R、G、B各仅取值 00、33、66、99、CC、FF。Lynda Weinman在其1996年的著作Designing Web Graphics中将其普及开来。随着24位彩色消费级硬件在2000年前后普及，此调色板逐渐淡出历史。如今它纯属历史遗迹，偶尔仍可在 #CC0033 或 #993366 等老式十六进制代码中见到。

有任何内容会被发送至服务器吗？

不会。十六进制转RGB只需两行纯函数式JavaScript算术运算，完全在本地进行；您输入的颜色不会被上传至任何地方；页面加载后可离线使用。

相关工具