RGB是CSS中通过红、绿、蓝三通道数值(0–255或0%–100%)精确控制颜色的基础方式,语法为rgb(R,G,B),不支持透明度;需透明时须用rgba(R,G,B,A),A为0–1小数;十六进制颜色可等价换算,但视觉感知与线性RGB存在差异。

RGB 是 CSS 中定义颜色最基础、最直接的方式之一,它通过红(Red)、绿(Green)、蓝(Blue)三个通道的数值组合来精确控制颜色。只要记住格式和取值范围,就能稳定使用,不需要依赖调色板或工具。
rgb() 函数的语法与合法取值
CSS 中使用 rgb() 函数表示颜色,括号内必须是三个参数,顺序固定为红、绿、蓝。每个参数可接受以下任一形式:
- 0–255 的整数(如
rgb(255, 99, 71)) - 0%–100% 的百分比(如
rgb(100%, 39%, 28%))
注意:不能混用,比如 rgb(255, 50%, 100) 是无效的,浏览器会忽略整个声明。另外,参数之间必须用英文逗号分隔,空格可选但建议保留一个空格提高可读性。
透明度支持:rgba() 而不是 rgb()
rgb() 本身不支持透明度;要加 alpha 通道,必须改用 rgba(),并在第四个参数传入 0–1 的小数(如 rgba(255, 99, 71, 0.5))。这个 0.5 表示半透,不是 50%——百分比在这里不被接受。
立即学习“前端免费学习笔记(深入)”;
常见错误是误写成 rgb(255, 99, 71, 0.5) 或 rgba(255, 99, 71, 50%),两者都会失效。
与十六进制颜色的等价关系
每个两位十六进制数(如 #ff6347)可直接换算为 rgb():每两位转成十进制,对应 R、G、B。例如:
ff → 255, 63 → 99, 47 → 71 ⇒ rgb(255, 99, 71)
这种换算在调试时很有用——当你看到浏览器开发者工具里把 #ff6347 显示成 rgb(255, 99, 71),不是它“转换了”,而是 CSS 引擎内部统一用 RGB 模型渲染,十六进制只是书写别名。
真正容易被忽略的是:CSS 颜色计算始终基于线性 RGB 值,但人眼感知是非线性的;所以两个 rgb() 数值差相同,视觉明暗变化未必均匀——这在做渐变或配色系统时会影响最终效果。










