rgb()函数不支持直接写十六进制值，必须转换为十进制数字如rgb(255, 107, 53)；Chrome DevTools可实时转码，CSS变量推荐直接var(--primary)引用，避免强行嵌入rgb()。
rgb() 函数里直接写十六进制不生效
CSS 的 rgb() 函数只接受数字或百分比，不能塞进 #ff6b35 这类值——浏览器会直接忽略整条声明。想用十六进制，得先转成十进制数值，再喂给 rgb()，否则样式根本不会应用。
- 错误写法：
color: rgb(#ff6b35);→ 无效，控制台可能报Invalid property value - 正确路径：十六进制 → R/G/B 十进制 →
rgb(255, 107, 53) - 在线工具只是帮你算数，不是魔法；真正在 CSS 里用的还是数字形式
手写转换太慢？用 Chrome DevTools 实时预览
不用切页面、不用查表，Chrome（及 Edge、Firefox）的样式面板支持直接编辑颜色值并实时转码。把光标停在 rgb(255, 107, 53) 上，长按左键拖选整个函数，松开后直接输入 #ff6b35，它会自动校验并转成对应 rgb() 或保留为 hex —— 前提是当前属性支持该格式（如 color、background-color）。
- 仅限支持的颜色属性，
border简写里混写#ff6b35 solid 1px会被解析失败 - DevTools 不改源码，刷新就回退；要持久化还得手动复制粘贴
- 对
hsl()、oklch()同样适用，但转换逻辑不同，别默认等价
CSS 变量方案：一次定义，多处复用，但注意作用域
用 :root 定义十六进制变量，再在 rgb() 中通过 color-mix() 或 calc() 配合自定义属性间接使用，听起来很美——但目前（2024）rgb() 本身不支持变量插值。真正可行的是：变量存十六进制，属性直接引用变量。
- 推荐写法：
--primary: #ff6b35; color: var(--primary); - 强行套
rgb()：需借助color-mix(in srgb, var(--primary) 100%, transparent 0%)（仅现代浏览器支持） - 兼容性陷阱：IE 完全不支持 CSS 变量；Safari 15.4+ 才稳定支持
color-mix() - 变量名别用
rgb-red这种误导性命名，后期换色会让人困惑
自动化脚本处理大量颜色？优先选 PostCSS 插件而非正则替换
项目里有几十个 rgb(255, 107, 53) 要统一转 #ff6b35？别用 VS Code 全局替换加正则——rgb(255, 0, 0) 和 rgba(255, 0, 0, 0.5) 容易误伤，注释里的数字也可能被卷进去。
立即学习“前端免费学习笔记（深入）”；
- 更稳的选择：
postcss-color-mod-function或postcss-css-variables，它们理解 CSS 语法树 - 简单脚本可用
tinygradient或color-convertnpm 包，传入{r: 255, g: 107, b: 53}得到#ff6b35 - 注意 alpha 通道：十六进制不支持透明度，
rgba()转#ff6b3580（八位）需确认目标浏览器是否支持（Chrome 119+，Firefox 119+）
rgb() 在最终渲染上没区别，但转换过程里最容易被忽略的，是 alpha 处理方式和 CSS 变量的作用域链——尤其当组件库和主题色混用时，一个 var(--bg) 在深色模式下可能指向完全不同的 RGB 值，此时硬编码十六进制反而更可控。 
