HEX 代码把三个 8 位数字压缩成六位十六进制数。将 HEX 转换为 RGB 就是把这些十六进制位拆成每两位一组，并把每组读取为 0 到 255 之间的十进制数——这正是 CSS、Figma 和图像编辑器所期望的数值。
如何将 HEX 转换为 RGB
- 去掉开头的 #，如果代码只有三位则把每位重复一遍：#f53 变成 #ff5533。
- 把六位拆成三对——RR、GG 和 BB。
- 将每对按 16 进制读取并转换为 10 进制：FF 变为 255，57 变为 87，33 变为 51。
- 把三个结果写成 rgb(R, G, B)。
示例演示
HEX #FF5733=RGB rgb(255, 87, 51)
此转换是精确的。HEX 和 RGB 用不同的表示法描述相同的 sRGB 值，因此在任一方向上都不会出现舍入或丢失。
HEX 与 RGB 说明
HEX 是什么？
HEX 代码是一个六位的十六进制数，前面带有 #，用于存储颜色的红、绿、蓝通道。每对十六进制位对应一个通道，从 00（无）到 FF（满），以比 RGB 更简短的表示方式覆盖同样的 1670 万颜色。HEX 是 CSS、设计工具和品牌指南中的默认形式。
- 语法：
- #RRGGBB
- 范围：
- 每个通道 00–FF
- 适合用于：
- CSS、设计交接、品牌指南
RGB 是什么？
RGB 用三个光通道来描述颜色——红、绿、蓝——每个从 0 到 255。它反映了屏幕的实际工作方式：三个通道都为 255 为白色，全部为 0 为黑色。当你需要用数值进行计算时，RGB 是合适的选择，rgba() 则在其上增加了透明度。
- 语法：
- rgb(R, G, B)
- 范围：
- 每个通道 0–255
- 适合用于：
- 代码、canvas、使用 rgba() 的透明度
HEX 到 RGB 参考表
最常见的 CSS 颜色，已从 HEX 转换为 RGB。
| 颜色 | HEX | RGB |
|---|---|---|
| black | #000000 | rgb(0, 0, 0) |
| white | #FFFFFF | rgb(255, 255, 255) |
| red | #FF0000 | rgb(255, 0, 0) |
| lime | #00FF00 | rgb(0, 255, 0) |
| blue | #0000FF | rgb(0, 0, 255) |
| yellow | #FFFF00 | rgb(255, 255, 0) |
| orange | #FFA500 | rgb(255, 165, 0) |
| teal | #008080 | rgb(0, 128, 128) |
| purple | #800080 | rgb(128, 0, 128) |
| gray | #808080 | rgb(128, 128, 128) |