HEX 转 RGB
输入十六进制颜色值，实时解析为 RGB 数值，并生成可直接使用的 CSS 代码。
查看页面颜色知识
什么是 HEX 颜色
HEX 是前端和设计协作里非常高频的颜色写法。看懂它的组成规则后，很多颜色转换问题都会变得直接。
发布时间：2026-04-30 · 最近更新：2026-04-30 · 阅读时长：4 分钟
先看结论
如果你只想先抓重点，可以先看这几条。
- HEX 是用十六进制来表示 RGB 三个颜色通道。
- 6 位 HEX 最常见，3 位 HEX 是简写，8 位 HEXA 还会附带透明度。
- HEX 适合前端样式、设计标注和品牌色统一管理。
适合搭配使用的工具
读完概念后，直接回到这些工具页做实际转换和校对会更高效。
HEX 的基本组成
HEX 颜色通常写成 `#RRGGBB`。其中 `RR`、`GG`、`BB` 分别表示红、绿、蓝三个通道的十六进制值，例如 `#FF6347`。
十六进制里，`00` 表示该通道最弱，`FF` 表示该通道最强。所以 `#000000` 是黑色，`#FFFFFF` 是白色。
- `#FF0000` 是红色。
- `#00FF00` 是绿色。
- `#0000FF` 是蓝色。
3 位、6 位和 8 位 HEX 有什么区别
`#RGB` 是 3 位简写形式，本质会被展开成 6 位。例如 `#F63` 等价于 `#FF6633`。这种写法在颜色值比较规整时可以节省长度。
`#RRGGBBAA` 是 8 位 HEXA，多出来的 `AA` 表示透明度。它和 RGBA 的用途类似，适合写半透明背景、覆盖层和状态色。
- 3 位：适合简单简写。
- 6 位：最常见、兼容性和可读性最好。
- 8 位：颜色和透明度一起管理。
为什么前端项目里经常优先用 HEX
很多设计稿、品牌规范和组件变量系统都会直接标注 HEX，因为它写法稳定、长度固定，而且复制到 CSS 里基本不用二次处理。
当团队需要整理品牌主色、边框色、背景色和状态色时，HEX 也更适合沉淀到 token、Tailwind 配置、CSS 变量或设计系统文档中。
相关工具
这些工具可以把上面的规则直接落到颜色转换、配色和检查流程里。
常见问题
把最常被问到的疑问集中补齐，方便用户和搜索引擎快速定位答案。
HEX 和 RGB 哪个更适合前端？
两者都适合前端，主要看团队规范。多数情况下 HEX 更短、更统一，RGB 在做透明度或直观观察通道值时更方便。
8 位 HEXA 和 RGBA 该怎么选？
如果团队已经大量使用 HEX 变量，8 位 HEXA 会更统一；如果需要频繁调透明度或和浏览器 DevTools 对照，RGBA 往往更直观。
为什么同一个颜色有时候会写成 3 位，有时候是 6 位？
因为 3 位是 6 位的简写形式，只在每个通道的两位值相同的时候才可以缩写。比如 `#FFFFFF` 可以写成 `#FFF`。
继续阅读
如果你在搭完整颜色栏目，可以继续沿着概念、配色和可读性方向往下看。