色轮是hsl颜色模型的可视化映射，hsl()函数严格对应其结构：h（0°–360°）表色相，s（0%–100%）表饱和度，l（0%–100%）表明度；调整h如旋转指针，s控制纯度，l决定明暗；hsl支持现代浏览器，但旧版safari对hsla()透明度解析有偏差。
色轮在 CSS 中没有直接对应语法，但 HSL 是它的数学映射
CSS 本身不提供交互式色轮控件，hsl() 函数才是浏览器真正理解的、与色轮结构严格对应的颜色表示法。色轮的圆周对应 h（色相），0°–360°；半径方向对应 s（饱和度），0%–100%；中心到顶部/底部对应 l（明度），0%–100%。这意味着：选中色轮上某点，就等于确定一组 hsl(h, s%, l%) 值。
用 hsl() 模拟色轮旋转和调色时的关键参数行为
改变 h 值就像绕色轮转动指针，红（0°）、绿（120°）、蓝（240°）是等距锚点；s 越高，颜色越“纯”，越靠近色轮边缘；l 决定明暗——50% 是最饱满的基准亮度，低于它变暗沉，高于它变灰白。
-
hsl(0, 100%, 50%)是正红，hsl(0, 50%, 50%)是灰红（饱和度减半） -
hsl(120, 100%, 30%)是深绿，hsl(120, 100%, 70%)是浅绿（明度变化） -
hsl(60, 0%, 50%)是纯灰（饱和度为 0，无论色相多少都退化为灰阶）
别把色轮当成独立工具，它只是 hsl() 的可视化辅助
很多设计师用在线色轮挑色后，直接复制十六进制值，这反而切断了与 HSL 的关联。更高效的做法是：在支持实时预览的编辑器（如 VS Code + Color Highlight 插件，或浏览器 DevTools 的颜色拾取器）中，把色轮选中的值手动转成 hsl() 格式写入 CSS。这样后续调整才可控：
