css无法从#ff6b6b中提取绿色通道值，因hex是静态字符串而非可计算对象；唯一可靠方式是用js解析：parseint(clean.substring(2, 4), 16)得107。
直接用 color-mix() 或 color-contrast() 无法提取通道值
HEX 是静态字符串，不是可计算的颜色对象。CSS 本身没有内置函数能从 #FF6B6B 这类值里“拆出绿色通道”。你看到的 green 值（比如 6B）是十六进制编码的一部分，不是 CSS 可访问的变量或属性。试图在纯 CSS 中做 substr(#FF6B6B, 2, 2) 这类操作——不存在，也不合法。
hsl() 和 lch() 语法不等于“解包 HEX”
现代相对颜色语法（hsl(), lch(), oklch()）是用来基于已有颜色做**相对调整**的，比如变亮 10%、饱和度降 20%，不是用来逆向解析原始 HEX 的结构。即使你把 #FF6B6B 写成 hsl(0, 100%, 70%)，你也丢失了原始绿色通道的精确十进制值（107），因为 HSL 是非线性映射，且存在多对一转换。
真要拿到绿色通道数值，必须靠 JS 解析 HEX 字符串
这是唯一可靠路径。HEX 是确定性编码，JS 可以精准切分并转为数字：
function getGreenFromHex(hex) {
const clean = hex.replace(/^#/, '');
if (clean.length === 3) {
return parseInt(clean[1] + clean[1], 16); // 简写如 #F6B → 66
}
if (clean.length === 6) {
return parseInt(clean.substring(2, 4), 16); // #FF6B6B → 0x6B → 107
}
return null;
}
getGreenFromHex('#FF6B6B'); // → 107
- 注意处理简写格式（
#F6B）和带 alpha 的#RRGGBBAA（需额外判断长度） - 别用
parseInt('6B', 10)—— 十进制解析会错，必须用16 - 如果后续要动态注入 CSS 变量，记得用
document.documentElement.style.setProperty('--g-value', '107')
为什么不能依赖 computedStyle.color 反查？
就算元素样式写了 color: #FF6B6B，getComputedStyle(el).color 返回的通常是 rgb(255, 107, 107) 或 rgba(...)，不是原始 HEX。而且：
- 它只返回最终生效值，可能已被继承、filter、opacity 或 color-adjust 修改
- 如果原始声明是
color: var(--primary)，而--primary是#FF6B6B，那 computed 值仍是 rgb 形式，HEX 信息已不可逆丢失 - 无法区分
#FF6B6B和rgb(255,107,107)—— 它们渲染结果一致，但字符串来源不同
真正容易被忽略的是：HEX 只是一种序列化格式，不是颜色本体。想从中“提取”什么，得先把它当文本处理，而不是当成 CSS 颜色值去调用颜色函数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
