色轮是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。这样后续调整才可控：
- 想让一组按钮同色系但有层次？固定
h，只调s和l - 主题切换要变暖/冷？微调
h±10°～20°，比换hex更自然 - 响应式暗色模式下，别硬套同一套
hex，改用hsl(h, s%, calc(100% - l%))动态反推
兼容性没问题，但注意旧版 Safari 对 hsla() 透明度的解析偏差
所有现代浏览器都支持 hsl() 和 hsla()，包括 IE9+。但 Safari ≤13.1 在解析 hsla(180, 50%, 50%, 0.5) 时，曾将 alpha 当作百分比处理（即误读为 50% 透明而非 0.5）。稳妥写法是统一用小数形式的 alpha：hsla(180, 50%, 50%, 0.5)，避免写 hsla(180, 50%, 50%, 50%)。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：色轮上看似均匀的视觉距离，在 HSL 空间里并不等价于人眼感知的色彩差异——比如从黄（60°）到橙（30°）的 30° 变化，比从青（180°）到蓝（240°）的同样角度变化显得更“慢”。需要精细控制时，得靠眼校，不能只信角度数值。
