html无相对颜色语法，css中通过currentcolor继承父元素color值、hsl()手动调lightness、css变量配合calc()实现近似相对控制。
HTML 本身没有“相对颜色语法”——所有颜色值都是绝对定义的，所谓“相对”，实际是指在 CSS 中通过 currentColor、hsl() 的参数调整、或 CSS 自定义属性（--color）间接实现的动态推导。
currentColor 是唯一原生相对颜色关键字
currentColor 不是计算出来的值，而是直接继承父元素的 color 计算值，并可用于任何接受颜色的 CSS 属性（如 border-color、fill、outline）。
- 它不继承
background-color或其他非文本色属性 - 嵌套多层时仍只取最近的、已计算出的
color值（不是声明值） - 在 SVG 内使用时特别有用：
<circle fill="currentColor"></circle>会自动匹配外层文字颜色 - 不能用于
background-color的渐变色 stops 里（部分浏览器不支持，如 Safari 15.6 之前）
用 hsl() 模拟“比父色深 20%”这类需求
真正想做“相对明度/饱和度调整”，得靠 hsl() 手动改第三个参数（lightness），因为浏览器不提供 lighten(20%) 这类函数（Sass/Less 有，但纯 CSS 没有）。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
hsl(200, 80%, 60%)→ 想变暗一点？改成hsl(200, 80%, 45%) - 注意：直接改
lightness不等于视觉上“等量变暗”，但在同一色相下最可控 - IE9 及更早版本完全不支持
hsl()，必须回退到#rrggbb - 别写
hsl(0, 0%, 0%)表示黑——某些安卓 WebView 对 0% 饱和度解析异常，用#000更稳
用 CSS 变量 + calc() 实现数值级相对控制
如果你需要“按钮背景比主色亮 10%，边框比主色暗 15%”，就得组合 hsl() 和自定义属性：
body {
--primary-h: 210;
--primary-s: 90%;
--primary-l: 50%;
}
.btn {
background-color: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 10%));
border-color: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 15%));
}
-
calc()在hsl()内部只支持对lightness做加减（单位必须是%），不能动hue或saturation的数值 - Chrome 115+、Firefox 110+、Safari 16.4+ 支持；旧版 Safari 需要 JS 补丁或放弃 calc
- 这种写法本质仍是“绝对值拼装”，不是真·相对颜色系统，但已是当前标准下最接近的方案
真正卡住人的从来不是怎么写 #333，而是当你把 currentColor 用在 SVG mask 里，或在深色模式下靠 hsl() 调一个“看起来差不多”的中性灰——这时候，浏览器解析顺序、继承链断裂、以及 WCAG 对比度检测工具的采样方式，全都会突然跳出来咬你一口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
