在不丢失透明度的前提下转换 HEX 和 RGBA

如果半透明颜色在复制后变成不透明，请检查你复制的是哪个输出。六位 HEX 颜色只包含红、绿、蓝，没有透明度通道。在颜色转换器中，若想保留透明度，请使用 HEX · 带透明度、RGBA、HSLA 或 现代 CSS。

在 要转换的颜色 中尝试 rgba(255, 136, 0, 0.5)。预览会在棋盘格、白色和深色背景上显示相同的橙色。不透明和半透明输出并排显示，因此选择很重要。

复制保留透明度的输出

对于该输入，工具会生成：

/* Opaque: alpha is omitted */
#FF8800
rgb(255, 136, 0)

/* Keeps the decimal alpha */
rgba(255, 136, 0, 0.5)
rgb(255 136 0 / 50%)

/* Alpha rounded to one byte */
#FF880080

使用所需格式旁边的复制按钮。复制 CSS 变量 提供两个变量：--color 是不透明的，--color-alpha 以现代 RGB 语法保留透明度。即使同一片段中存在第二个变量，为叠加层选择第一个变量也会使其变为不透明。

你可以下载 CSS 示例 并在自己的样式表中尝试。该表示法不会替你选择元素或 CSS 属性。

为什么 50% 在 HEX 中变成约 50.2%

CSS 使用八位 HEX 颜色的最后两位表示透明度。00 是完全透明，FF 是完全不透明；MDN 的 HEX 参考 记录了顺序和简写语法。

透明度字节有 256 个可能值。0 到 255 的中间值是 127.5，因此此转换器将 50% 四舍五入为 128，写作 80。将该字节读回得到 128 ÷ 255，即约 50.1961%。

将 #FF880080 粘贴回输入框。工具会显示 rgba(255, 136, 0, 0.501961)。这个微小变化是量化，而不是第二个透明度设置。当需要精确保留 0.5 时，请使用十进制透明度形式；其他输入显示的十进制值仍可能被四舍五入。

短 HEX 可能隐藏更大差异

以下输入容易混淆：

四位 HEX 中的每一位都重复一次。最后的 8 变成 88，而不是 80，因此上面的短形式不是 50% 的简写。转换结果 包含所有三个输入和橙色示例。

发布前检查背景

相同的颜色值并不能保证在所有表面上显示相同。转换器的白色和深色预览可帮助你发现叠加层依赖于其背后的内容。对于文本，也要检查实际的文本/背景组合；我们的对比度指南 详细介绍了这一单独检查。

此转换器处理列出的 HEX、RGB、HSL 和 HSV 输入。它不解析 CSS 变量、除 transparent 之外的命名颜色，或广色域颜色空间。其 CMYK 输出是未使用印刷色彩配置文件的近似值，HSV/CMYK 表示法不是可粘贴到样式表中的 CSS 值。

我们于 2026 年 10 月 21 日针对工具检查了这些示例。结果记录 保留了解析的通道和格式化输出；它不是显示校准或打印颜色测试。