转换器

RGBA 转十六进制：网页设计师 CSS 颜色格式完全指南

通过逐步示例学习如何将 RGBA 颜色值转换为十六进制代码。涵盖 8 位十六进制、CSS 颜色格式对比、Alpha 透明度及网页无障碍标准。

发布于 2026年3月19日
14 分钟阅读
密码学指南

RGBA 转十六进制：网页设计师 CSS 颜色格式完全指南

颜色是每个网站的视觉骨架。无论是定义品牌调色板、构建深色模式切换，还是精调毛玻璃叠加效果，你都会不断地在各种 CSS 颜色格式之间切换。RGBA 和十六进制是最常见的两种格式——它们以不同的方式表示完全相同的信息。掌握两者之间的转换方法，以及何时选择哪种格式，不仅能节省时间，还能避免难以察觉的 Bug。

本指南将逐步讲解 RGBA 转十六进制的转换过程，解释 Alpha 透明度的 8 位十六进制格式，对比所有主流 CSS 颜色格式，并介绍应当纳入颜色选择考量的无障碍标准。你可以使用我们免费的 RGBA 转十六进制工具，边阅读边对任意示例进行实操验证。

什么是 RGBA 颜色格式

RGBA 是一个 CSS 颜色函数，通过四个通道定义颜色：

  • R（红）： 0 到 255
  • G（绿）： 0 到 255
  • B（蓝）： 0 到 255
  • A（Alpha）： 0.0（完全透明）到 1.0（完全不透明）

RGB 通道通过混合不同强度的红、绿、蓝光来控制颜色本身。Alpha 通道控制颜色在叠加于其他内容上方时的透明或不透明程度。

CSS 语法

传统语法使用逗号分隔：

color: rgba(255, 0, 0, 0.5);  /* 半透明红色 */

现代 CSS（Color Level 4）还支持以斜杠表示 Alpha 的空格分隔语法：

color: rgb(255 0 0 / 0.5);  /* 效果完全相同 */

两种写法产生相同的结果。现代语法在所有主流浏览器中均可使用，且稍微更简洁。

RGB 混色原理

RGB 是一种加色模型。当三个通道均达到最大值（255, 255, 255）时，结果为白色；当三个通道均为零（0, 0, 0）时，结果为黑色。混合各通道可产生其他颜色：

  • rgb(255, 0, 0) —— 纯红色
  • rgb(0, 255, 0) —— 纯绿色（lime）
  • rgb(0, 0, 255) —— 纯蓝色
  • rgb(255, 255, 0) —— 黄色（红 + 绿）
  • rgb(0, 255, 255) —— 青色（绿 + 蓝）
  • rgb(255, 0, 255) —— 洋红色（红 + 蓝）
  • rgb(128, 128, 128) —— 中性灰

每个通道有 256 个可能的值（0 到 255），因此唯一 RGB 颜色的总数为 256 × 256 × 256 = 16,777,216。

什么是十六进制颜色代码

十六进制（hex）颜色代码是使用十六进制计数法紧凑表示 RGB 颜色的方式。格式为 #RRGGBB，其中每对字符代表一个颜色通道。

十六进制使用 16 个数字：0-9 和 A-F。每个两字符对可以表示从 00（十进制 0）到 FF（十进制 255）的值，与 RGB 通道的 0-255 范围完全对应。

常见十六进制示例

颜色十六进制代码十进制等价值
黑色#000000rgb(0, 0, 0)
白色#FFFFFFrgb(255, 255, 255)
红色#FF0000rgb(255, 0, 0)
绿色#008000rgb(0, 128, 0)
蓝色#0000FFrgb(0, 0, 255)
黄色#FFFF00rgb(255, 255, 0)
灰色#808080rgb(128, 128, 128)

十六进制简写

当每对中的两位数字相同时，CSS 允许使用 3 位简写：#RGB。例如，#FF0000 可以写成 #F00，#AABBCC 可以缩写为 #ABC。浏览器会将每位数字重复一次进行展开：#F00 会展开为 #FF0000。

如何将 RGBA 转换为十六进制

转换过程分为两部分：转换 RGB 通道和转换 Alpha 通道。

第一步：将每个 RGB 通道转换为十六进制

对于每个通道值（0-255），除以 16。商作为第一个十六进制数字，余数作为第二个。

示例：转换 R = 255

255 / 16 = 15 余 15
十六进制数字：F（15）和 F（15）= FF

示例：转换 G = 128

128 / 16 = 8 余 0
十六进制数字：8 和 0 = 80

示例：转换 B = 64

64 / 16 = 4 余 0
十六进制数字：4 和 0 = 40

值 10-15 的十六进制数字对应关系：A=10、B=11、C=12、D=13、E=14、F=15。

第二步：将 Alpha 转换为十六进制

RGBA 中的 Alpha 通道范围为 0.0 到 1.0，但十六进制使用 0 到 255。转换方法：

  1. 将 Alpha 值乘以 255
  2. 四舍五入到最近的整数
  3. 将该整数转换为两位十六进制值

示例：转换 alpha = 0.5

0.5 × 255 = 127.5
四舍五入：128
128 / 16 = 8 余 0 = 80

第三步：组合成十六进制代码

将所有十六进制对连接起来，并加上 # 前缀：

  • 6 位十六进制（无 Alpha）：#RRGGBB
  • 8 位十六进制（含 Alpha）：#RRGGBBAA

完整示例：rgba(66, 135, 245, 0.75)

  1. R = 66：66 / 16 = 4 余 2 --> 42
  2. G = 135：135 / 16 = 8 余 7 --> 87
  3. B = 245：245 / 16 = 15 余 5 --> F5
  4. A = 0.75：0.75 × 255 = 191.25，四舍五入为 191，191 / 16 = 11 余 15 --> BF

结果： #4287F5（6 位）或 #4287F5BF（8 位含 Alpha）

完整示例：rgba(255, 0, 0, 0.5)

  1. R = 255 --> FF
  2. G = 0 --> 00
  3. B = 0 --> 00
  4. A = 0.5 --> 0.5 × 255 = 127.5，四舍五入为 128 --> 80

结果： #FF0000（6 位）或 #FF000080（8 位含 Alpha）

理解 8 位十六进制（#RRGGBBAA）

标准 6 位十六进制代码仅能表示不透明颜色。8 位十六进制格式通过在末尾追加两个 Alpha 数字来扩展这一能力。

格式解析

#RRGGBBAA
 |  |  |  |
 |  |  |  +-- Alpha（00 = 透明，FF = 不透明）
 |  |  +----- 蓝色通道
 |  +-------- 绿色通道
 +----------- 红色通道

常用 Alpha 值的十六进制对照

不透明度Alpha（0-1）十进制（0-255）十六进制
100%1.0255FF
90%0.9230E6
80%0.8204CC
75%0.75191BF
60%0.615399
50%0.512880
40%0.410266
25%0.256440
20%0.25133
10%0.1261A
0%0.0000

浏览器支持

8 位十六进制颜色是 CSS Color Level 4 规范的一部分。浏览器支持情况：

  • Chrome 62+（2017 年 10 月）
  • Firefox 49+（2016 年 9 月）
  • Safari 10+（2016 年 9 月）
  • Edge 79+（2020 年 1 月）

所有主流浏览器均支持此格式。如果项目必须支持 Internet Explorer 或非常旧的浏览器版本，请改用 rgba() 函数。

4 位简写（#RGBA）

与 6 位十六进制的 3 位简写类似，CSS 也支持 8 位十六进制的 4 位简写：#RGBA。浏览器会将每位数字重复一次。例如，#F008 展开为 #FF000088。

CSS 颜色格式对比

CSS 提供了多种颜色格式，各有不同的优势和权衡。以下是全面的对比：

HEX（#RRGGBB）

  • 优点： 紧凑、广泛支持、设计工具（Figma、Sketch、Photoshop）中的标准格式
  • 缺点： 可读性不直观，没有内置 Alpha（6 位），编程操作较繁琐
  • 示例： #3B82F6

RGB / RGBA

  • 优点： 通道值易于理解，支持 Alpha，编程操作方便
  • 缺点： 比十六进制冗长，通道值（0-255）对颜色选择而言不够直观
  • 示例： rgba(59, 130, 246, 0.8)

HSL / HSLA

  • 优点： 模型直观（色相 = 颜色，饱和度 = 浓度，亮度 = 明暗），便于创建颜色变体
  • 缺点： 设计工具输出中较少见，与屏幕颜色的对应关系稍难把握
  • 示例： hsla(217, 91%, 60%, 0.8)

HWB（色相、白度、黑度）

  • 优点： 用于调色和加深颜色的思维模型简单
  • 缺点： 知名度较低，工具支持有限
  • 示例： hwb(217 23% 4%)

OKLCH

  • 优点： 感知均匀（数值变化量相同，视觉变化量也相同），非常适合设计系统
  • 缺点： 格式较新，许多开发者不熟悉，需要理解亮度-饱和度-色相模型
  • 示例： oklch(0.63 0.19 248)

LAB / LCH

  • 优点： 与设备无关，感知均匀
  • 缺点： 思维模型复杂，相较于 OKLCH 实际优势有限
  • 示例： lab(54% -5 -48)

汇总表

格式Alpha直观性紧凑性编程操作设计工具
HEX8 位否是一般标准
RGB否一般否容易常见
RGBA是一般否容易常见
HSL否是否一般部分
HSLA是是否一般部分
OKLCH是一般否一般普及中

在 CSS 中何时使用 RGBA，何时使用十六进制

RGBA 和十六进制表示相同的颜色。选择哪种格式往往取决于上下文、工具和团队约定。理解两者的权衡有助于在项目中做出一致的决策。

使用十六进制的场景：

  • 设计交付： Figma、Sketch 和 Adobe 工具默认以十六进制格式导出颜色。在 CSS 中使用十六进制可使数值与设计规范保持一致，降低实现过程中出现转录错误的可能性。
  • 纯色： 对于不含透明度的纯色，6 位十六进制是最紧凑的格式。#3B82F6 比 rgb(59, 130, 246) 更短，可节省样式表字节数。
  • CSS 自定义属性： 十六进制在 CSS 变量中使用简洁：--color-primary: #3B82F6;。许多设计系统框架和组件库以十六进制存储其 Token 值。
  • 快速扫读： 经验丰富的开发者能一眼识别常见十六进制值（#FFF、#000、#333）。随着时间推移，团队会对自家品牌的十六进制代码产生熟悉感。
  • Tailwind CSS 及工具类框架： Tailwind 的颜色调色板内部使用十六进制。tailwind.config.js 中的自定义颜色通常以十六进制值定义。

使用 RGBA 的场景：

  • 透明度： RGBA 能让不透明度一目了然。rgba(0, 0, 0, 0.5) 清楚地传达了「50% 不透明度的黑色」，无需解码十六进制 Alpha 数字。
  • 动态操作： 当需要在 JavaScript 中调整单个通道时，RGBA 值比十六进制字符串更易于解析和修改。颜色选择器和主题生成器等功能内部通常使用十进制通道值。
  • 叠加层与毛玻璃效果： 多层透明元素配合显式 Alpha 值可读性更好。background: rgba(255, 255, 255, 0.1) 的意图比 background: #FFFFFF1A 更加清晰。
  • 动画： 在不同不透明度的颜色之间进行过渡，使用 RGBA 更为直观。CSS 过渡对两种格式的支持同样出色，但 RGBA 在源代码中能更清楚地表达动画意图。
  • 服务端渲染： 在服务器端动态生成颜色（用于图表、数据可视化或个性化主题）时，从数值构建 rgba() 字符串比构建十六进制字符串更简单。

使用 HSL/HSLA 的场景：

  • 颜色调色板： HSL 通过调整亮度轻松生成更浅或更深的变体，通过调整饱和度生成更浓或更淡的变体。例如，将亮度从 50% 改为 30% 可在保持相同色相和饱和度的同时加深颜色。
  • 主题切换： 在保持饱和度和亮度不变的情况下调整色相，可产生和谐的颜色变体。主题可将色相旋转 180 度，创建互补色方案。
  • 程序化颜色生成： 在以算法构建色阶或生成无障碍颜色调色板时，HSL 比 RGB 提供更直观的控制方式。以等步长增加亮度，可产生视觉上均匀的渐变效果。

无障碍与颜色对比度

选择颜色不仅仅关乎美观。网页内容无障碍指南（WCAG）规定了最低对比度比率，以确保视觉障碍人士能够阅读文字内容。

WCAG 对比度要求

级别正常文本大文本
AA4.5
3
AAA7
4.5

大文本定义为 18pt（24px）或 14pt 粗体（18.66px 粗体）。

对比度比率的计算原理

对比度比率在 1

（无对比度，同一颜色）到 21
（最大对比度，白色背景上的黑色）的范围内比较两种颜色的相对亮度。公式如下：

对比度比率 = (L1 + 0.05) / (L2 + 0.05)

其中 L1 是较亮颜色的相对亮度，L2 是较暗颜色的相对亮度。

相对亮度通过一个考虑人眼亮度感知的加权公式从 sRGB 颜色值计算得出。绿色对感知亮度的贡献最大（0.7152），其次是红色（0.2126），最后是蓝色（0.0722）。这就是为什么纯绿色（#00FF00）看起来比纯蓝色（#0000FF）明亮得多，即使两个通道都处于最大强度。

常见颜色对比度示例

以下是一些说明通过和未通过对比度比率的实际示例：

前景色背景色比率WCAG AAWCAG AAA
#000000#FFFFFF21
通过通过
#333333#FFFFFF12.6
通过通过
#767676#FFFFFF4.54
通过未通过
#808080#FFFFFF3.95
未通过未通过
#FFFFFF#3B82F63.44
未通过未通过
#FFFFFF#1D4ED86.98
通过未通过

注意，#767676（中等灰色）是对白色背景能够通过 WCAG AA 的最浅灰色。这是选择文本颜色时值得牢记的实用基准线。

Alpha 与对比度

使用带 Alpha 透明度的 RGBA 颜色时，实际呈现的颜色取决于其背后的背景。在白色背景上满足对比度要求的半透明文本颜色，在深色背景上可能会不达标，反之亦然。请务必检查颜色相对于其实际背景的对比度。

例如，rgba(0, 0, 0, 0.5) 在白色背景上产生的实际颜色约为 rgb(128, 128, 128)（#808080），其与白色的对比度比率为 3.95

——未达到正常文本 WCAG AA 4.5
的要求。

要计算半透明颜色叠加在背景上的实际颜色，可对每个通道进行混合：

实际通道值 = 前景通道值 × alpha + 背景通道值 × (1 - alpha)

对于白色背景（rgb(255, 255, 255)）上的 rgba(0, 0, 0, 0.5)：

R = 0 × 0.5 + 255 × 0.5 = 127.5 ≈ 128
G = 0 × 0.5 + 255 × 0.5 = 127.5 ≈ 128
B = 0 × 0.5 + 255 × 0.5 = 127.5 ≈ 128

实际颜色为 rgb(128, 128, 128)，即 #808080。

实用建议

  • 使用浏览器开发者工具检测对比度比率（Chrome DevTools 在颜色选择器中显示对比度比率）
  • 尽量避免对文字颜色使用 Alpha 透明度——使用能达到所需对比度的纯色
  • 当叠加层必须半透明时，确保其上方的前景文字仍符合对比度要求
  • 使用 prefers-contrast 媒体查询为有需求的用户提高对比度
  • 请记住，从 WCAG 2.1 起，对比度要求同样适用于非文本内容（图标、表单控件、焦点指示器）
  • 对于大文本（18pt 或 14pt 粗体），最低对比度比率从 4.5
    降至 3
    ——但为了获得最佳可读性，仍建议达到 4.5

编程示例

JavaScript：RGBA 转十六进制

function rgbaToHex(r, g, b, a = 1) {
  const toHex = (n) => {
    const hex = Math.round(n).toString(16).padStart(2, '0');
    return hex.toUpperCase();
  };

  const hexR = toHex(r);
  const hexG = toHex(g);
  const hexB = toHex(b);
  const hexA = toHex(Math.round(a * 255));

  // 完全不透明时返回 6 位，否则返回 8 位
  if (a === 1) {
    return `#${hexR}${hexG}${hexB}`;
  }
  return `#${hexR}${hexG}${hexB}${hexA}`;
}

// 使用示例
rgbaToHex(255, 128, 0, 0.5);   // "#FF800080"
rgbaToHex(59, 130, 246, 1);    // "#3B82F6"
rgbaToHex(0, 0, 0, 0.75);     // "#000000BF"

JavaScript：十六进制转 RGBA

function hexToRgba(hex) {
  hex = hex.replace('#', '');

  // 展开简写（#RGB 或 #RGBA）
  if (hex.length === 3) hex = hex.split('').map(c => c + c).join('');
  if (hex.length === 4) hex = hex.split('').map(c => c + c).join('');

  const r = parseInt(hex.substring(0, 2), 16);
  const g = parseInt(hex.substring(2, 4), 16);
  const b = parseInt(hex.substring(4, 6), 16);
  const a = hex.length === 8
    ? parseInt(hex.substring(6, 8), 16) / 255
    : 1;

  return { r, g, b, a: Math.round(a * 100) / 100 };
}

// 使用示例
hexToRgba('#FF000080');  // { r: 255, g: 0, b: 0, a: 0.5 }
hexToRgba('#3B82F6');    // { r: 59, g: 130, b: 246, a: 1 }

Python：RGBA 转十六进制

def rgba_to_hex(r, g, b, a=1.0):
    """将 RGBA 值转换为十六进制颜色代码。"""
    hex_r = format(round(r), '02X')
    hex_g = format(round(g), '02X')
    hex_b = format(round(b), '02X')
    hex_a = format(round(a * 255), '02X')

    if a == 1.0:
        return f'#{hex_r}{hex_g}{hex_b}'
    return f'#{hex_r}{hex_g}{hex_b}{hex_a}'

# 使用示例
print(rgba_to_hex(255, 128, 0, 0.5))   # #FF800080
print(rgba_to_hex(59, 130, 246))        # #3B82F6

CSS：同时使用两种格式

/* 纯色使用十六进制 */
.button {
  background-color: #3B82F6;
  color: #FFFFFF;
  border: 1px solid #2563EB;
}

/* 叠加层和透明效果使用 RGBA */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

/* 透明效果使用 8 位十六进制 */
.glass-panel {
  background-color: #FFFFFF40; /* 25% 不透明度的白色 */
  backdrop-filter: blur(10px);
}

/* CSS 自定义属性同时使用两种格式 */
:root {
  --color-primary: #3B82F6;
  --color-overlay: rgba(0, 0, 0, 0.5);
  --color-glass: #FFFFFF26; /* 15% 不透明度 */
}

常见问题

电子邮件 HTML 中可以使用 8 位十六进制吗？

电子邮件客户端对 8 位十六进制的支持参差不齐。Outlook 和一些较旧的邮件客户端不支持该格式。对于邮件模板，请使用 rgba() 函数或在需要时配合单独的不透明度属性使用纯色。在使用较新的 CSS 特性前，务必在多个邮件客户端中进行测试。

RGBA 和十六进制之间有性能差异吗？

没有。两种格式都会被浏览器解析为相同的内部颜色表示。性能差异为零。请根据可读性和团队约定进行选择，而非性能因素。

如何在 CSS 中将十六进制转换为 RGBA？

CSS 本身没有内置的转换函数。如果需要从十六进制代码获取 RGBA 值，请使用转换工具或 JavaScript。不过，你可以在任何接受颜色的 CSS 属性中直接使用十六进制值——无需为 CSS 用途进行转换。两种格式在任何地方都能正常使用。

为什么我的 Alpha 十六进制值看起来不对？

最常见的问题出在四舍五入这一步。Alpha 0.5 乘以 255 在数学上等于 127.5。不同工具的舍入方式有所不同：有些舍入为 127（十六进制 7F），有些舍入为 128（十六进制 80）。这会产生略微不同的不透明度值（49.8% 与 50.2%），视觉上难以区分。我们的转换工具使用 Math.round() 以保持一致性。

CSS 变量应该使用十六进制还是 RGBA？

两者均可。十六进制更紧凑，是大多数设计系统的标准。但如果需要在 JavaScript 中操作单个通道（例如改变不透明度），RGBA 更易于处理。一种常见模式是将基础颜色定义为十六进制，在需要透明度变体时使用 RGBA。

opacity 和 alpha 有什么区别？

CSS 的 opacity 属性会影响整个元素及其所有子元素。RGBA 或 8 位十六进制中的 Alpha 只影响它所应用的特定颜色。例如，opacity: 0.5 会使文本、边框、背景和子元素全部变为半透明；而 background: rgba(0,0,0,0.5) 只会使背景变为半透明，同时保持文字和其他内容完全不透明。

这一区别对实际 UI 模式至关重要。模态框遮罩层需要半透明背景（rgba(0,0,0,0.5)），同时保持其子内容（模态对话框）完全不透明。若对遮罩层元素使用 opacity: 0.5，模态对话框也会变为半透明，这并非预期效果。同样，带毛玻璃效果的卡片使用 background: rgba(255,255,255,0.1) 结合 backdrop-filter: blur(10px)——Alpha 创建了半透明层，而上方的文字仍保持清晰可读。

如何从 CSS 字符串中解析 RGBA？

要从 CSS 颜色字符串（如 rgba(255, 128, 0, 0.5)）中提取 RGBA 值，可使用正则表达式：

function parseRgba(str) {
  const match = str.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
  if (!match) return null;
  return {
    r: parseInt(match[1]),
    g: parseInt(match[2]),
    b: parseInt(match[3]),
    a: match[4] ? parseFloat(match[4]) : 1,
  };
}

此函数同时处理传统逗号分隔语法的 rgb() 和 rgba() 格式。对于现代空格分隔语法（rgb(255 128 0 / 0.5)），需调整正则表达式以匹配空格和斜杠分隔符。

关于本文

本文是我们综合 转换器 教程系列的一部分。继续了解古典密码学，并探索我们的交互式密码工具。

更多 转换器 教程

转换器
2026年3月25日
16 分钟阅读

密码学哈希函数详解：MD5 vs SHA-256 vs SHA-512

密码学哈希函数完整指南，涵盖 MD5 vs SHA-256 vs SHA-512 对比、哈希函数内部工作原理、碰撞攻击、使用 bcrypt 和 Argon2 进行密码哈希的最佳实践、HMAC 认证，以及在区块链、TLS 和 Git 中的应用场景。

转换器
2026年3月20日
14 分钟阅读

如何读懂二进制代码：二进制翻译完全指南

读懂二进制代码的完整指南，涵盖位与字节、位权表示、逐步解码、ASCII 与 Unicode 编码、常见单词的二进制写法、Python 与 JavaScript 编程示例，以及与其他数制的对比。

转换器
2026年3月20日
16 分钟阅读

Unix 时间戳详解：什么是纪元时间，开发者如何使用它

Unix 时间戳与纪元时间完整指南，涵盖开发者为何使用、秒与毫秒之别、七种语言的编程示例、Excel 公式、值得记住的时间戳、2038 年问题，以及闰秒处理方式。

试用 转换器 工具

通过我们的交互式转换器工具，将所学知识付诸实践。

试用 转换器 工具