css无法从#rrggbb字符串中提取r/g/b分量，因其无内置解析函数；所有颜色函数操作的是已解析颜色值而非字符串，唯一可靠方式是js解析hex后注入css变量。
CSS 本身不支持从 #rrggbb 字符串中“提取”R/G/B分量——它没有内置的解析函数或相对颜色语法能拆解十六进制字面量。所谓“相对颜色语法”（如 color-mix()、color() 函数、lch() / oklch() 等）操作的是已解析的颜色值，不是字符串。
为什么不能直接从 #A8C2E1 里取 r/g/b 数值？
CSS 把 #A8C2E1 当作一个原子颜色值，渲染引擎内部会立刻转成 RGB 或 LAB 等色彩空间用于计算，但这个过程对开发者完全黑盒。你无法写 red(#A8C2E1) 或 var(--r) from #A8C2E1 这类语法——CSS 没有这种提取能力。
- 所有颜色函数（
color-mix()、hwb()、oklab()）都只接受已定义的颜色值（如命名色、rgb()、变量、currentColor），不接受原始 HEX 字符串 -
rgb()和hex是互斥的输入形式：浏览器只在解析时做一次转换，之后就不再保留原始格式 - 如果你需要 R/G/B 数值参与计算（比如动态调亮/调暗），必须提前用 JS 解析 HEX，再注入 CSS 变量
实际可行的替代路径：JS 解析 + CSS 变量注入
真正能拿到 R/G/B 并用于 CSS 的唯一可靠方式，是用 JavaScript 解析 HEX，然后写入自定义属性：
function hexToRgb(hex) {
const h = hex.replace('#', '');
const r = parseInt(h.length === 3 ? h[0] + h[0] : h.slice(0, 2), 16);
const g = parseInt(h.length === 3 ? h[1] + h[1] : h.slice(2, 4), 16);
const b = parseInt(h.length === 3 ? h[2] + h[2] : h.slice(4, 6), 16);
return { r, g, b };
}
const { r, g, b } = hexToRgb('#A8C2E1');
document.documentElement.style.setProperty('--r', r);
document.documentElement.style.setProperty('--g', g);
document.documentElement.style.setProperty('--b', b);
- 注意处理三字符简写（
#abc→aabbcc），否则#999会错解为r=153, g=0, b=0 - 别用
slice(1)去掉#，遇到无#的输入（如A8C2E1）会崩；统一用replace('#', '') - 写入的
--r等变量可在 CSS 中直接用于rgb(var(--r), var(--g), var(--b))或 calc() 计算
Chrome DevTools 里“看似提取”的真相
你在 Chrome Styles 面板点击颜色小块、长按切换到 rgb() 格式，那不是“提取”，而是浏览器把已渲染颜色反向映射回最简 RGB 表示——它依赖的是当前像素的最终计算值，不是原始 CSS 字符串：
- 如果原始是
background-color: rgba(168, 194, 225, 0.8)，取色器显示的rgb(168, 194, 225)已丢弃 alpha - 如果背景是
linear-gradient(#fff, #000)上叠加filter: brightness(1.2)，取色器读到的是混合+滤镜后的结果，和原始 HEX 完全无关 - 这个值不能回填进 CSS 当作“提取成功”，它只是快照，不具备可复现性
真正需要 R/G/B 数值参与样式逻辑时，绕不开 JS 解析这一步。CSS 的颜色函数强大，但它们的操作对象是“颜色”，不是“颜色字符串”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
