HEX 转 RGB 怎么转 - 颜色代码转换方法（附对照表）

🌟 HEX 和 RGB 是同一颜色的两种写法#

#ff0000 和 rgb(255, 0, 0) 说的是同一个红色。HEX 用十六进制表示，RGB 用三个十进制数表示红、绿、蓝三个通道的强度（0~255）。两者可以互相换算。

不想手算？用星点颜色格式转换输入任意一种，其余格式自动出来。

🧮 HEX 转 RGB 怎么算#

HEX 格式为 #RRGGBB，每两位一组：

• RR → 红色（转成十进制）
• GG → 绿色
• BB → 蓝色

例子：#409eff

结果：rgb(64, 158, 255)。

🧮 RGB 转 HEX 怎么算#

反过来：每个通道除以 16 取整得高位，余数得低位，再拼起来。

以 rgb(64, 158, 255) 为例：

结果：#409eff。

📋 常见颜色对照表#

🔤 简写与透明度#

• 简写：#f00 等价于 #ff0000（每位重复一次）；
• 带透明度：#409eff80（8 位 HEX）≈ rgba(64, 158, 255, 0.5)，末尾两位表示 alpha；
• 范围：每个通道 0~255，超出要钳制。

🎯 该用哪种格式#

💻 代码示例#

1
function hexToRgb(hex) {
2
  const h = hex.replace('#', '');
3
  const full = h.length === 3 ? h.split('').map(c => c + c).join('') : h;
4
  return {
5
    r: parseInt(full.slice(0, 2), 16),
6
    g: parseInt(full.slice(2, 4), 16),
7
    b: parseInt(full.slice(4, 6), 16)
8
  };
9
}
10

11
function rgbToHex({ r, g, b }) {
12
  const toHex = (v) => v.toString(16).padStart(2, '0');
13
  return '#' + toHex(r) + toHex(g) + toHex(b);
14
}

1
def hex_to_rgb(hex_str):
2
    h = hex_str.lstrip('#')
3
    if len(h) == 3:
4
        h = ''.join(c * 2 for c in h)
5
    return tuple(int(h[i:i+2], 16) for i in (0, 2, 4))
6

7
def rgb_to_hex(r, g, b):
8
    return '#{:02x}{:02x}{:02x}'.format(r, g, b)

❓ 常见问题（FAQ）#

🔬 深入：sRGB、Gamma 与色彩空间#

HEX/RGB 默认在 sRGB 色彩空间。sRGB 有”伽马校正”：同样的数值差，在暗部的视觉变化比亮部更明显。所以：

• 数值上”中间”的颜色（如 #808080），并不是视觉上的”中灰”；
• 做渐变、混色时，直接在 sRGB 里插值，中段可能偏暗或发灰；
• 追求自然过渡，可在 OKLab 等感知均匀空间插值（见颜色混合与色差）。

这也是为什么同一组数值，在不同色彩配置（sRGB / Display P3）下看起来会略有差异。

🧪 更多颜色对照#

🛠 在项目里处理颜色#

• CSS：直接用 HEX 或 rgb()；
• JavaScript 动态改色：用 RGB 数值加减更直观，再用 rgbToHex 输出；
• 主题变量：把颜色集中为 CSS 变量，见 CSS 颜色变量与主题；
• 可读性检查：改完色用对比度检测确认文字清晰。

🧾 十六进制换算速记#

记忆法：ff=255、80=128、40=64，其余按”高位×16+低位”推。

🔗 相关工具#

• 任意格式互转 → 颜色格式转换；
• 取色 → 颜色选择器；
• 识别颜色名 → 颜色识别；
• 检查对比度 → 对比度检测。

🧭 更多常见问题#

💬 总结#

HEX 转 RGB 就是”每两位十六进制转十进制”；RGB 转 HEX 反过来。记不住公式没关系，用颜色格式转换输入即得结果，还能一键复制 CSS / SCSS / Tailwind 代码。

立即体验：访问 颜色格式转换