通过MCP连接 →

输入计算

输入 3 位或 6 位十六进制代码,开头带不带 # 均可。

数学公式

广告

结果

RGB 颜色
rgb(52, 152, 219)
from #3498DB
红色 (R) 52
绿色 (G) 152
蓝色 (B) 219
规范化十六进制 #3498DB
CSS rgb(52, 152, 219)

什么是十六进制转RGB转换器?

十六进制颜色代码是用六位十六进制数表示颜色的方式,写作 #RRGGBB。其中每两位数字对应一个加色通道:红色、绿色和蓝色。本转换器读取一个十六进制代码,并返回等价的 RGB 三元组,每个通道都是 0 到 255 之间的整数。RGB 是 CSS、设计软件以及绝大多数屏幕底层使用的格式,因此在这两种格式之间互转,对网页开发者和设计师来说是每天都会用到的操作。

使用方法

在输入框中填入一个十六进制代码——开头带不带 # 都可以。无论是完整的六位写法(#3498DB),还是三位简写(#39C,它会被展开为 #3399CC),工具都能识别。它会自动清除多余字符、规范化代码,并立即显示红、绿、蓝三个数值,同时给出实时颜色预览块和可直接复制粘贴的 CSS 代码。

计算公式详解

十六进制是逢 16 进一的计数法,使用数字 0–9 和字母 A–F(其中 A=10 …… F=15)。每两个字符为一组,按照数值 = 第一位 × 16 + 第二位的规则进行换算。

$$(R,\,G,\,B) = \bigl(\,\text{hex}_{[1,2]},\ \text{hex}_{[3,4]},\ \text{hex}_{[5,6]}\,\bigr)_{16}$$

$$\text{where}\quad \left\{ \begin{aligned} R &= \left(\text{Hex Code}\ \text{digits 1-2}\right)_{16} \\ G &= \left(\text{Hex Code}\ \text{digits 3-4}\right)_{16} \\ B &= \left(\text{Hex Code}\ \text{digits 5-6}\right)_{16} \end{aligned} \right.$$

因此 FF = \(15 \times 16 + 15 = 255\),即最大值;00 = 0,即最小值。三组数字分别独立解码为 R、G、B。

图示将六位十六进制代码拆分为三组两位数,分别映射到红、绿、蓝值
一个十六进制代码拆分为三对,每对转换为 0-255 的通道值。

实例演算

#3498DB 为例。红色组 34 = \(3 \times 16 + 4 = \mathbf{52}\);绿色组 98 = \(9 \times 16 + 8 = \mathbf{152}\);蓝色组 DB = \(13 \times 16 + 11 = \mathbf{219}\)。最终结果为 rgb(52, 152, 219)——一款在扁平化设计中非常流行的蓝色。

单个十六进制颜色样本,其转换后的红、绿、蓝通道分解以三条彩色条显示
实例:一个十六进制代码以色块形式显示,旁边是其 R、G、B 通道。

常见问题

支持像 #FFF 这样的简写吗?支持。三位代码会通过把每一位翻倍来展开,所以 #FFF 会变成 #FFFFFF = rgb(255, 255, 255)。

那 Alpha(透明度)通道呢?本工具处理的是三通道的 RGB 颜色。如果输入的是带 Alpha 的八位十六进制代码,在颜色转换时会截取其前六位。

如何从 RGB 反向转回十六进制?把每个通道的数值格式化为两位十六进制数,然后在前面加上 # 拼接起来即可。例如 52, 152, 219 → 34, 98, DB → #3498DB

最后更新: