RGB与HEX颜色代码转换

同一种颜色的两种写法

rgb(30, 144, 255) 与 #1E90FF 指向同一组 sRGB 红、绿、蓝通道，只是数字进制和书写方式不同。RGB 写法依次列出 R（红）、G（绿）、B（蓝）三个通道；常用的整数范围是 0～255，0 表示该通道的最低值，255 表示最高值。六位 HEX 则把三个通道分别写成两位十六进制数，组合为 #RRGGBB。

页面提供 RGB 与 HEX 两个输入框。编辑 RGB 后，HEX 框会给出大写的六位结果；编辑有效 HEX 后，RGB 框会显示对应的三个十进制通道。右侧色块与两行代码用于核对结果，两个输入框旁都可以分别复制当前文本，清空按钮会同时重置输入和预览。

十进制通道怎样变成 HEX

RGB 转 HEX 时，将 R、G、B 各自从十进制转换为十六进制，并把不足两位的结果在左侧补 0，再按红、绿、蓝顺序拼接。十六进制使用数字 0～9 与字母 A～F，其中 A～F 对应十进制 10～15。

反向转换时，把 #RRGGBB 拆成 RR、GG、BB 三组，再分别按十六进制读取。例如 80 等于十进制 128，因此 #808080 会得到 rgb(128, 128, 128)。

规范中的对应关系

从任一输入框开始转换

1. 准备颜色代码

   已有三个通道时，整理成 30, 144, 255 或 rgb(30, 144, 255)；已有 HEX 时，优先使用带井号的 #1E90FF。

2. 填写对应输入框

   把 RGB 文本放入“RGB”框，页面会改写 HEX 结果；或把 HEX 文本放入“HEX”框，页面会改写 RGB 结果。有效内容形成后不需要再提交。

3. 核对色块与成对代码

   确认色块符合预期，并同时查看两种表示。若刚刚修改的文本不完整，不要只依据另一框原先留下的数值。

4. 复制需要的格式

   使用相应输入框右侧的复制按钮获取 RGB 或 HEX。继续测试下一组颜色时，可直接覆盖输入，也可先点“清空”恢复空白状态。

两组可以复算的例子

RGB 转 HEX：在 RGB 框输入 30, 144, 255。30 ÷ 16 的商为 1、余数为 14（E），得到 1E；144 对应 90；255 对应 FF。三个通道拼接后，HEX 框显示 #1E90FF。

HEX 转 RGB：在 HEX 框输入 #0C2238。0C、22、38 分别等于十进制 12、34、56，所以 RGB 框显示 rgb(12, 34, 56)。输入三位缩写 #ABC 时，各位会重复展开为 #AABBCC 的通道含义，对应 rgb(170, 187, 204)。

输入格式与结果使用问答

输入边界与显示限制

这个转换器面向三个颜色通道与不透明的六位 HEX。透明度不在输出中：即使某些带 Alpha 的写法能被识别，生成的 RGB 或六位 HEX 也不会保留透明度信息，因此不要用它完成 RGBA 与八位 HEX 的透明度换算。

• 优先输入范围内的整数：请使用 0～255 的 R、G、B。小数或超出范围的数值可能被舍入或限制到边界，往返转换后未必保留原文本。
• 无效输入不会给出新结果：缺少通道、包含非法十六进制字符或尚未输入完整时，另一输入框可能仍保留上一组有效颜色。复制前应确认当前文本、另一种代码和色块彼此对应；不确定时先清空再重输。
• HEX 建议带井号：输入框可以识别常见的三位或六位十六进制文本，写成 #RGB 或 #RRGGBB 更符合 CSS 颜色代码的常见形式，也能减少与普通字符串混淆。
• 色块只用于快速核对：显示器色域、校准、亮度和浏览环境都会影响目视效果。代码转换不能代替品牌色彩管理、印刷打样或文字与背景的可访问性对比度检查。

若结果要进入生产样式、设计规范或印刷流程，请以目标系统要求的色彩空间、透明度格式和原始颜色标注为准。