rgb()函数可直接用于CSS,参数为0–255整数,如color: rgb(51, 102, 204);透明度用rgba(),需注意设计稿若误标归一化小数(如0.2)应×255取整还原。

直接用 rgb() 函数写就行,不需要换算成十六进制。
rgb颜色可以直接照抄进CSS
设计稿标注的 rgb(51, 102, 204) 这类值,CSS原生支持,直接复制粘贴到样式里即可生效:
- 例如:
color: rgb(51, 102, 204); -
浏览器会自动解析,效果和
#3366cc完全一致 - 透明度需要时,改用
rgba(51, 102, 204, 0.8)
注意取值范围和格式细节
rgb函数三个参数必须是 0–255 的整数(不能带单位、不能超限、不能是小数):
- ✅ 正确:
rgb(255, 204, 0)、rgb(0, 128, 255) - ❌ 错误:
rgb(255px, 204, 0)(带单位)、rgb(100%, 50%, 0%)(百分比是另一个语法) - ⚠️ 注意:设计稿偶尔会标错(比如写成
rgb(0.2, 0.4, 0.8)),那是归一化小数,需 ×255 取整还原
和hex、hsl混用不冲突,按需选择
rgb只是其中一种颜色表示法,和 #rrggbb、hsl() 等完全等价:
立即学习“前端免费学习笔记(深入)”;
- 想快速改透明度?优先用
rgba() - 团队统一规范用 hex?那就转一下(在线工具或浏览器开发者工具里点颜色块可实时切换)
- 动画或变量控制多?推荐用
hsl()或 CSS 自定义属性 +rgb()
不复杂但容易忽略:只要设计稿给的是标准 rgb(a) 数值,就放心直用,不用额外处理。










