RGB 转 HEX — 将 RGB 颜色值转换为 HEX 码
将 RGB 颜色值转换为 HEX 码。实时色样预览,支持 RGB 和 RGBA —— 完全在浏览器中运行,无上传。
RGB to HEX
Convert RGB color values to HEX color codes online. Enter RGB like 255,102,0 and get the hex code.
RGB 和 HEX 是同一种颜色语言的两种方言,两者之间的相互切换是每个工作在设计与代码交汇处的人的日常琐事。设计交付用 RGB 三元组传递颜色 —— 这是每块屏幕、每个设计工具、每个图像编辑软件的原生格式。生产环境的 CSS 和配置文件需要 HEX 码 —— 这种自 HTML 3.2 的 bgcolor 属性起就是标准的紧凑单字符串表示法。转换器所做的,就是每个开发者最终都会学会心算的那点算术:每个通道乘以 16、除以 16,再重复。
转换中「不那么显然」的一点,是它消除的实际摩擦是心智上的上下文切换。一边读着设计稿里写明的 rgb(59, 130, 246),一边编辑需要 #3B82F6 的 CSS 文件,必须停下来做转换。一天的样式工作下来,这种上下文切换会发生几十次,每一次都是连续思维流中的小打断。转换器让流程不断 —— 粘贴 RGB 值,复制 HEX,继续编辑。
最终的交接:alpha 通道的处理是面向现代网页开发的关键能力。CSS 现在在所有主流浏览器中都支持 8 位 hex 颜色(#3B82F680 表示 50% 不透明度),但多数设计工具把 alpha 导出为单独的 opacity 值或 RGBA 声明。转换器在两种表示法之间搭桥:接收 RGBA 输入,存在 alpha 时输出 8 位 hex,目标环境不支持扩展 hex 格式时去掉 alpha 输出 6 位 hex。
使用方法
输入 RGB 值
在三个通道输入框中分别输入红、绿、蓝值(各 0-255),或粘贴 rgb(59, 130, 246) 或 rgba(59, 130, 246, 1) 字符串。HEX 输出实时更新,色样预览实时显示颜色。
查看 HEX 输出
输出是带 # 前缀的 6 位 HEX 码。如果开启 alpha,输出是 8 位 HEX 码(RGBA)。输出可复制为 CSS 可用的 `#3B82F6` 字符串。
复制 HEX 码
把 HEX 颜色复制到剪贴板,用于 CSS、设计工具或配置文件。复制按钮默认带 # 前缀复制;如果目标环境需要裸 hex,可切换为不带前缀复制。
常见问题
RGB 如何映射到 6 位 HEX 格式?
每个 RGB 通道(0-255)转换为两位十六进制数字(00-FF)。红通道对应前两位十六进制,绿通道对应中间两位,蓝通道对应最后两位。`rgb(59, 130, 246)` 变为 `#3B82F6`,因为 59=0x3B,130=0x82,246=0xF6。
Alpha 通道在 HEX 输出中如何处理?
开启 alpha 后,输出变为 8 位 HEX 码:前六位是 RGB 通道,后两位编码 alpha 值(十六进制 0-255,FF 表示完全不透明,00 表示完全透明)。所有现代浏览器都支持 8 位 HEX 颜色。
可以输入百分比形式的 RGB 值吗?
本工具接受 0-255 整数和 css 风格的 rgb() 字符串。逐通道输入框不接受 `rgb(50%, 50%, 50%)` 这类百分比值。粘贴完整的 `rgb(50%, 50%, 50%)` 字符串即可转换 —— 工具在转换前会把百分比归一化到 0-255。
为什么要从 RGB 转 HEX,而不是直接用 RGB?
部分设计工具(Figma、Sketch、Adobe XD)默认输出 HEX。部分 CSS 框架和老式模板引擎只接受 HEX 颜色字符串。部分配置文件(终端主题、窗口管理器配置)要求 HEX。把现有的 RGB 值转为 HEX,就能在要求另一种格式的工具中使用这个颜色。
输出始终是大写 HEX 吗?
是的 —— 输出 HEX 使用大写字母 A-F,与 CSS 惯例和设计工具使用的格式一致。CSS 对 HEX 颜色不区分大小写,小写 `#3b82f6` 与大写完全等价。如果目标环境需要小写,可在设置中切换为小写输出。
限制说明
- 每个通道裁剪到 0-255超出 0-255 的值会被裁剪到最近的有效值。负值变为 0,超过 255 的值变为 255。对于通道超出 SDR 范围的 HDR 或广色域颜色,请使用色彩管理工具。
- 不做色彩空间转换本工具默认 RGB 值在 sRGB 色彩空间。Display P3、Adobe RGB 和 ProPhoto RGB 值会被当作 sRGB 处理,导致显示颜色偏移。对于非 sRGB 色彩空间,请使用读取内嵌配置文件的色彩管理工具。
- 输出始终是 6 位或 8 位 hex默认不输出 3 位短格式 hex(如 #33BB88 对应的 #3B8)。当三对通道数字相同时,可在设置中开启短格式输出生成 3 位 hex(alpha 也可化简时为 4 位 hex)。
平台说明
- macOS
- Digital Color Meter 显示 RGB。本浏览器工具是把设计交付中的 RGB 值转换为 CSS 或配置文件所需 HEX 格式的合适选择。
- Linux
- 命令行场景下,`printf '#%02X%02X%02X\n' 59 130 246` 输出 HEX。本浏览器工具额外提供实时色样预览和 RGBA 支持。
- Web
- 完全在客户端运行。离线可用。