如何将 HEX 颜色代码转换为 RGB
HEX 和 RGB 是表达完全相同颜色的两种方式。设计师和开发者在它们之间来回切换 · HEX 用于 CSS 样式表，RGB 用于 JavaScript 动画，HSL 用于设计工具。理解它们的关系能让颜色工作简单得多。
HEX 的工作原理
像 #FF5733 这样的 HEX 颜色代码是一个 6 位十六进制数字，分别表示红、绿、蓝三个通道：
| 部分 | Hex | 十进制 | 通道 |
|---|---|---|---|
| FF | FF | 255 | 红 |
| 57 | 57 | 87 | 绿 |
| 33 | 33 | 51 | 蓝 |
每个通道的值从 00（0，无色）到 FF（255，最大强度）。所以 #FF5733 表示最大红色、中等绿色、少许蓝色 · 产生温暖的橙红色。
如何将 HEX 转换为 RGB
- 输入您的 HEX 代码· 键入或粘贴如 #FF5733 的代码，或使用取色器。
- 查看 RGB 值· 查看等值的红、绿、蓝（各 0–255）。
- 复制为任意格式· 以
rgb(255, 87, 51)、单通道或其他格式（如 HSL）获取数值。
常见颜色代码
| 颜色 | HEX | RGB |
|---|---|---|
| 白色 | #FFFFFF | rgb(255, 255, 255) |
| 黑色 | #000000 | rgb(0, 0, 0) |
| 红色 | #FF0000 | rgb(255, 0, 0) |
| 绿色 | #00FF00 | rgb(0, 255, 0) |
| 蓝色 | #0000FF | rgb(0, 0, 255) |
| 黄色 | #FFFF00 | rgb(255, 255, 0) |
小贴士
- 在 CSS 中使用 HEX· 在样式表中
color: #FF5733比color: rgb(255, 87, 51)更简洁常用。 - 透明度使用 RGB· 需要半透明颜色时使用
rgba(255, 87, 51, 0.5)。标准 HEX 没有加 alpha 的方法（尽管 8 位 HEX 存在，但浏览器支持参差不齐）。 - 3 位简写·
#F00等同于#FF0000。当每对数字相同时，用它省空间。 - 取色器更快· 若在寻找正确颜色，使用可视化取色器而不是猜 HEX 值。满意后再复制代码。
常见问题
如何手动将 HEX 转换为 RGB？
将 hex 代码分成三对（如 #FF8800 变为 FF、88、00）。把每对从 16 进制转为 10 进制。FF = 255，88 = 136，00 = 0。结果是 rgb(255, 136, 0)。
3 位 HEX 代码怎么处理？
3 位 HEX 是一种简写，每位数字都被重复。#F80 等同于 #FF8800。大多数转换器会自动处理两种格式。
什么时候用 HEX，什么时候用 RGB？
HEX 更紧凑，在 CSS 中更常见。需要在代码中分别操作通道或使用 rgba() 处理透明度时，RGB 更合适。两者表示的颜色相同。
HEX 代码中的 # 是什么意思？
井号（#）是一个前缀，表示该值是一个十六进制颜色代码。它不是值本身的一部分。一些工具接受带或不带井号的代码。