RGB 与 HEX 颜色值的区别：写法、场景与互换方法
RGB 和 HEX 并不是两种「颜色」，而是同一套 sRGB 三通道数值的两种写法：rgb(66, 135, 245) 与 #4287F5 描述的是完全相同的颜色。既然可以互换，为什么 CSS 里两种写法长期并存？因为它们服务的动作不同——一个面向计算，一个面向阅读。
| 对比维度 | RGB 颜色 | HEX 颜色 |
|---|---|---|
| 书写形式 | 函数式：rgb(66, 135, 245)，通道值一目了然，现代语法允许空格与百分比 | 十六进制串：#4287F5，六位两位一组对应 R/G/B，紧凑统一 |
| 本质与互换 | 十进制 0–255；换算成十六进制即为 HEX，如 66→42、135→87、245→F5 | 每两位十六进制折算回十进制即得 RGB，两者转换永远无损 |
| 透明度表达 | rgba(66,135,245,0.5)，第四参数 0–1 小数直观易调 | #4287F5AA 八位写法，AA 是不透明度的十六进制（约 67%），更短但需要心算换算 |
| 可读性侧重 | 看数值知配比：红色多不多、蓝色强不强直接可判，适合讲解与调参 | 整体像一枚代号，便于在设计稿、变量名和文档间复制传播，但看不出成分 |
| 简写能力 | 无简写形式；重复值必须完整写出 | 支持三位简写：#FFF 等价于 #FFFFFF，白黑灰类颜色书写最省 |
| 程序化计算 | JS 动态混色、亮度调整、渐变插值时直接拿整数运算，无需解析字符串 | 需先 parseInt 分段解析成通道数值才能运算，多一步且易错 |
| 生态习惯 | Canvas API、图表库配色接口、设计系统主题计算普遍以 RGB 数组为输入 | Photoshop、Figma 复制色值默认给 HEX，CSS 变量与品牌规范手册也惯用它 |
何时选 RGB 颜色？
需要在代码里对颜色做运算——透明度动画、按主题生成色阶、混合两个品牌色——就用 rgba()。数值形态让每一步计算都可直接调试，也方便和设计系统里的 token 保持一致。
何时选 HEX 颜色？
静态样式表里记录固定色值优先 HEX：短、可搜索、跨工具粘贴不走样。从设计稿取色、定义 CSS 变量或撰写品牌规范时，HEX 是团队沟通的最大公约数。
相关在线工具
在线文本与十六进制互转工具
在线文本与十六进制互转工具，基于 UTF-8 编码将任意文本（含中文、emoji）转为十六进制字节序列，字节值两位补零、空格分隔，支持双向转换与容错解析，全部本地处理。
图片取色器 - 在线吸取HEX颜色值
图片取色器，点击图片任意位置即时读取该点 HEX 与 RGB 色值并显示坐标，一键复制色号，适用于设计配色参考、前端还原设计与摄影后期对色，全部本地处理不上传。
颜色拾取转换器
HEX、RGB、HSL 三种颜色格式任意互转，配合取色板点选即可拾取颜色并同步显示三种表示，还能查看明暗变体辅助配色决策。前端调样式、设计师对色值、PPT 配色都高频使用，取色与转换全在本地浏览器完成，颜色数据不上传。
常见问题
#RRGGBBAA 里的 AA 怎么换算成百分比？
把 AA 当作十六进制数转成十进制再除以 255。例如 80 → 128/255 ≈ 50%，FF = 100% 不透明，00 全透明。
三种写法（HEX、RGB、HSL）性能有差别吗？
浏览器解析后内部都会转为同一种表示，渲染性能没有实际差异。选哪种应基于可读性和工作流，而不是微不足道的解析开销。
为什么同一个颜色在不同屏幕上看起来不一样？
因为 RGB/HEX 只定义了「数值」，最终观感取决于屏幕面板类型、色域覆盖（sRGB/P3）与校准状态。要精确还原需要色彩管理而非更换写法。
延伸说明
有个小众但好用的进阶技巧：把 HEX 的六位拆成三组分别转十进制，就能在脑内完成大部分互转；而判断两个色值是否相同，先统一格式再比较是最稳妥的习惯。前端工程里还常见 HSL 这第三种写法，它按色相、饱和度、明度描述颜色，调色比 RGB 更直觉。站内提供 RGB 与 HEX 双向转换的颜色工具，本地即可完成批量色值换算，适合整理设计规范的场景。