https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl
通篇文章也没说什么。 前面from关键字可以是currentColor ，甚至是另一个rgb别的任何单位。
HSL 颜色模型
HSL 是一种颜色表示方法，代表 色相(Hue)、饱和度(Saturation)、亮度(Lightness)。它是 CSS 中表示颜色的一种方式，与 RGB（红绿蓝）相比，HSL 更加直观、易于理解和调整。
HSL 的作用和优势
直观调整颜色：
- 适合创建渐变、主题切换等效果
- 比 RGB 更接近人类思考颜色的方式
实际应用示例
:root {
--color1: hsl(20 100 50 / 0.6);
--color2: hsl(from rgb(255 0 0 / 0.8) calc(h + 60) calc(s - 20) calc(l - 10) / calc(alpha - 0.1));
--color3: hsl(from var(--color1) h h h);
}
/* 基本颜色设置 */
.box {
width: 100px;
height: 100px;
color: var(--color1);
background-color: hsl(from currentColor h s calc(l + 10) / 0.8);
}
@supports not (background-color: hsl(from red h s calc(l + 10) / 0.8)) {
.box {
background-color: blue;
}
}
为什么@supports要特殊使用red 关键字颜色???
mdn的解释，这是因为，自定义CSS 属性值在检测时可能未被赋值。
为了解决此问题，我们在每个测试中将 var(--base-color) 替换为 red 关键字。
新语法不要去使用逗号分隔和%号单位
Safari 的初始实现基于旧版本的规范，其中原始颜色通道值根据上下文解析为number或其他单位类型。这意味着在执行加法和减法时，值有时需要单位，这会造成混淆。在较新的实现中，原始颜色通道值始终解析为等效的number值，这意味着计算始终使用无单位值进行。
实现特殊效果
- 主题色变换：
- 只需改变色相值，保持饱和度和亮度不变，可轻松切换主题色
- 渐变效果：
- 使用相同色相但不同亮度/饱和度值创建平滑渐变
- 暗黑/明亮模式切换：
- 调整亮度值可以快速转换颜色的暗/亮版本
- 模拟色盲友好设计：
- 调整特定色相，帮助创建色盲友好的界面
HSL 是 CSS 中处理颜色的强大工具，能让设计师和开发者更准确地控制和调整网页的视觉效果。
