RGBA 转 HEX 转换器
这个 RGBA 转 HEX 转换器可将 RGBA 颜色值（红、绿、蓝、透明度）转换为十六进制颜色代码。输入 RGBA 值，即可获取 6 位或 8 位（含透明度）十六进制代码，带有实时颜色预览。
RGBA 转 HEX 转换器
将 RGBA 数值转换为 6 位或 8 位十六进制颜色代码，并提供实时预览和反向转换。
rgba(255, 255, 255, 1)#FFFFFF#FFFFFFFFHEX 转 RGBA
粘贴 3 位、4 位、6 位或 8 位十六进制颜色代码，转换回 RGBA 数值。
常见问题
什么是RGBA颜色格式？
RGBA代表红（Red）、绿（Green）、蓝（Blue）、透明度（Alpha）。每个颜色通道（R、G、B）的值范围为0-255，而透明度通道控制不透明度，从0（完全透明）到1（完全不透明）。例如，rgba(255, 0, 0, 0.5)是半透明的红色。
如何将RGBA转换为十六进制？
将每个R、G、B值从十进制转换为十六进制：除以16，商是第一个十六进制数字，余数是第二个。对于透明度通道，乘以255，然后转换为十六进制。例如，rgba(255, 128, 0, 0.5)：R=FF，G=80，B=00，A=80，得到#FF800080。
什么是8位十六进制颜色？
标准十六进制颜色使用6位（#RRGGBB）表示红、绿、蓝通道。8位十六进制（#RRGGBBAA）添加两位表示透明度通道，支持不使用rgba()函数的透明效果。例如，#FF000080是50%不透明度的红色。
rgba(255,0,0,0.5)的十六进制是什么？
rgba(255,0,0,0.5)以8位十六进制格式转换为#FF000080。红色通道（255）变为FF，绿色（0）变为00，蓝色（0）变为00，透明度（0.5）变为80（十进制128，即255的50%）。
所有浏览器都支持8位十六进制颜色吗？
是的，所有现代浏览器都支持8位十六进制颜色（#RRGGBBAA），这是CSS Color Level 4规范的一部分。包括Chrome 62+、Firefox 49+、Safari 10+和Edge 79+。对于旧版浏览器支持，请改用rgba()函数。
RGBA和HSLA有什么区别？
RGBA使用红、绿、蓝通道（0-255）加透明度来定义颜色。HSLA使用色相（0-360°）、饱和度（0-100%）、亮度（0-100%）加透明度。HSLA对于选择颜色变体（更亮、更暗、更饱和）更直观，而RGBA直接映射到屏幕的显示方式。
十六进制中透明度如何工作？
在8位十六进制格式中，最后两位代表透明度通道。00=完全透明，FF=完全不透明。常见值：80≈50%不透明度，BF≈75%，40≈25%。转换公式为：hex_alpha = Math.round(alpha * 255).toString(16)。
十六进制和RGB有什么区别？
十六进制（#FF0000）和RGB（rgb(255,0,0)）表示相同的颜色，只是使用不同的表示方法。十六进制使用16进制数字，RGB使用0-255的十进制值。它们对任何颜色都是可互换的。十六进制在CSS代码中更紧凑，而RGB更易于以编程方式阅读和操作。
如何将 RGBA 转换为十六进制
RGBA 转十六进制的过程，是将每个颜色通道从十进制（base-10）转换为十六进制（base-16）表示。每个通道的转换公式如下：
十六进制第一位 = floor(数值 ÷ 16)
十六进制第二位 = 数值 mod 16
对于 alpha 通道，先将 0–1 范围内的值乘以 255，再将结果转换为十六进制：
Alpha（十六进制）= toHex(Math.round(α × 255))
计算示例：rgba(255, 128, 0, 0.5)
1. 转换各 RGB 通道：
- R：255 ÷ 16 = 15 余 15 →
FF - G：128 ÷ 16 = 8 余 0 →
80 - B：0 ÷ 16 = 0 余 0 →
00
2. 转换 alpha 通道：
- 0.5 × 255 = 127.5 ≈ 128
- 128 ÷ 16 = 8 余 0 →
80
结果：
- 6 位十六进制颜色：
#FF8000（不含透明度） - 8 位十六进制颜色：
#FF800080（含透明度）
常见 RGBA 与十六进制对照表
以下为常见颜色的 RGBA 值、6 位十六进制代码及 8 位十六进制代码对照：
| 颜色 | RGBA | 十六进制 | 8 位十六进制 |
|---|---|---|---|
| 白色 | rgba(255,255,255,1) | #FFFFFF | #FFFFFFFF |
| 黑色 | rgba(0,0,0,1) | #000000 | #000000FF |
| 红色 | rgba(255,0,0,1) | #FF0000 | #FF0000FF |
| 红色 50% | rgba(255,0,0,0.5) | — | #FF000080 |
| 绿色 | rgba(0,128,0,1) | #008000 | #008000FF |
| 蓝色 | rgba(0,0,255,1) | #0000FF | #0000FFFF |
| 蓝色 50% | rgba(0,0,255,0.5) | — | #0000FF80 |
| 黄色 | rgba(255,255,0,1) | #FFFF00 | #FFFF00FF |
| 青色 | rgba(0,255,255,1) | #00FFFF | #00FFFFFF |
| 品红 | rgba(255,0,255,1) | #FF00FF | #FF00FFFF |
| 橙色 | rgba(255,165,0,1) | #FFA500 | #FFA500FF |
| 紫色 | rgba(128,0,128,1) | #800080 | #800080FF |
| 灰色 | rgba(128,128,128,1) | #808080 | #808080FF |
| 深蓝 | rgba(0,0,128,1) | #000080 | #000080FF |
| 珊瑚色 | rgba(255,127,80,1) | #FF7F50 | #FF7F50FF |
理解十六进制中的 alpha 通道
8 位十六进制格式（#RRGGBBAA）在标准 6 位格式的基础上，追加两位十六进制数字表示 alpha（透明度）通道。alpha 值从 00（完全透明）到 FF（完全不透明）。
| 不透明度 | Alpha（0–1） | 十进制（0–255） | 十六进制 |
|---|---|---|---|
| 100% | 1.0 | 255 | FF |
| 75% | 0.75 | 191 | BF |
| 50% | 0.5 | 128 | 80 |
| 25% | 0.25 | 64 | 40 |
| 10% | 0.1 | 26 | 1A |
| 0% | 0.0 | 0 | 00 |
8 位十六进制格式是 CSS Color Level 4 规范的一部分，所有现代浏览器均支持。当 alpha 值为 FF（完全不透明）时，8 位代码与 6 位代码等效。例如，#FF0000FF 与 #FF0000 渲染结果相同。
RGBA 与十六进制的主要区别
| 特性 | RGBA | 十六进制 |
|---|---|---|
| 表示方式 | 十进制（0–255） | 十六进制（00–FF） |
| 透明度支持 | 内置（0–1） | 8 位格式（#RRGGBBAA） |
| 可读性 | 更直观易读 | 更简洁紧凑 |
| CSS 语法 | rgba(255, 0, 0, 0.5) | #FF000080 |
| 程序化操作 | 数值操控更便捷 | 字符串比较更方便 |
| 设计工具 | 部分颜色拾取器中使用 | Figma、Sketch 等工具标准格式 |
CSS 颜色格式对比
CSS 支持多种颜色格式，各有适用场景。以下为最常用格式的对比：
| 格式 | 语法示例 | 透明度 | 最适合 |
|---|---|---|---|
| HEX | #FF0000 | 仅 8 位支持 | 紧凑 CSS、设计工具 |
| RGB | rgb(255, 0, 0) | 无 | 程序化颜色操控 |
| RGBA | rgba(255, 0, 0, 0.5) | 有（0–1） | 叠加层、透明效果 |
| HSL | hsl(0, 100%, 50%) | 无 | 直观颜色选择 |
| HSLA | hsla(0, 100%, 50%, 0.5) | 有（0–1） | 主题变体、色板 |
| OKLCH | oklch(0.63 0.26 29) | 有（/ 0.5） | 感知均匀颜色空间 |
相关工具
- 十六进制转二进制转换器 — 将十六进制数值转换为二进制表示
- 十六进制转十进制转换器 — 将十六进制数字转换为十进制数值
- 十六进制转文本转换器 — 将十六进制代码转换为纯文本字符
- 十进制转十六进制转换器 — 将十进制数字转换为十六进制输出