HSB与HSL不可直接互换，CSS仅支持HSL；二者H相同，但S、B/V与L定义不同：HSB中B=100%时趋近白色，HSL中L=50%最饱满；需按B值分段转换L和S以视觉还原。
HSB（也叫HSV）和HSL是两种不同的颜色模型，虽然都基于色相（H），但饱和度（S）和明度/亮度（B/V vs L）定义不同，不能直接替换。CSS只支持HSL（和RGB、HEX等），不支持HSB，所以需要将设计稿给的HSB值**转换为近似的HSL值**，才能在CSS中使用。
理解HSB和HSL的关键差异
两者共享色相（H，0–360°），但：
- HSB中的S（Saturation）：指“纯色占混合色的比例”，B（Brightness）是“颜色最亮成分的强度”，B=100%时无论S多少都接近白色；
- HSL中的S（Saturation）：指“颜色鲜艳程度相对于该明度下最大可能饱和度的比例”，L（Lightness）是“颜色明暗程度”，L=50%时最饱满，L=0%为黑，L=100%为白。
这意味着同一组HSB值（如 H=200, S=80%, B=90%）直接套用到hsl(200, 80%, 90%)会明显偏浅、发灰——因为HSL在L很高时天然压制S的表现力。
实用转换策略：分段调整L和S
没有绝对精确的数学映射，但按明度区间经验调整，能获得视觉上更接近的设计还原效果：
立即学习“前端免费学习笔记（深入）”；
- 当B ≤ 20%：对应HSL的L ≈ B/2，S可略提高（+5%~10%）来补偿暗部饱和感损失；
- 当20% ：L ≈ B，S保持原S或微调（±5%）；这是最匹配的区间；
- 当B ≥ 80%：L ≈ 70%~85%（不要直接用90%），S需显著降低（-15%~30%），否则会过粉/过亮；例如 HSB(120, 70%, 95%) → HSL(120, 40%, 80%) 更稳。
快速参考对照（常用场景）
以下是一组典型HSB值及其推荐的CSS可用HSL近似值（已实测对比主流设计工具预览）：
- HSB(0, 100%, 100%)（正红）→
hsl(0, 100%, 50%)（不是hsl(0,100%,100%)！后者是浅粉） - HSB(180, 90%, 70%)（青蓝）→
hsl(180, 85%, 65%) - HSB(30, 100%, 90%)（亮橙）→
hsl(30, 80%, 75%) - HSB(240, 30%, 20%)（深蓝灰）→
hsl(240, 40%, 12%)
辅助工具建议（非必须，但提效）
手动换算易出错，推荐两个轻量方式：
- 用浏览器控制台临时运行简短转换脚本（搜“HSB to HSL js converter”取可靠片段）；
- 在Figma/Sketch中选中该色块 → 右键“Copy as CSS” → 粘贴后看它自动转出的
hsl()值，通常已做视觉优化，可直接参考； - 在线工具如 colorizer.org 或 convertingcolors.com，输入HSB，切换输出为HSL，再微调L/S直到眼见一致。
不复杂但容易忽略：最终以你在目标设备（尤其Mac和Windows屏幕）上看到的实际效果为准，而不是数值是否“理论正确”。
