同色系颜色需固定色相（h）和饱和度（s），仅调整亮度（l）；浅色宜略降饱和、深色宜略提饱和；CSS中用自定义属性配合calc()生成调色板，但需注意Safari≤15.4不支持hsl()内嵌calc()，应预设变量；HSLA透明度渐变会发灰，应改用纯HSL明度梯度。
hsl() 函数怎么调出“同色系”的颜色
关键不是随便改
里的数字，而是固定色相（
）和饱和度（
），只调亮度（
）。比如
是主色，那它的浅色变体可以是
，深色是
。这样出来的颜色才真正属于同一色系，不会发灰或跳色。
常见错误是只调
却忽略
：亮度拉高时，如果饱和度不变，浅色容易显得“粉”或“脏”；亮度压低时，饱和度太高又会发黑发闷。实际中建议浅色配略降饱和（比如
），深色配略提饱和（比如
）。
用 CSS 自定义属性批量生成 HSL 调色板
把基础色拆成三组自定义属性，方便复用和微调：
然后用
动态算出其他层级：
立即学习
“
前端免费学习笔记（深入）
”；
→ 浅色（注意不能超 100%）
→ 深色（用
防止低于可读阈值）
再配合
、
独立控制饱和度
这样写出来的类名语义清晰：
用
，
用
。
浏览器兼容性陷阱：HSL 和 calc() 的组合支持情况
现代浏览器都支持
和
，但老版本 Safari（≤15.4）不支持在
里直接嵌套
，比如
会解析失败，回退成黑色或透明。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
稳妥做法是把计算结果提前写死，或用 JS 注入（适合动态主题）；如果必须用纯 CSS，就用预设变量代替运行时计算：
避免：
改用：
（
已在 :root 里静态声明）
另外，IE 完全不支持
，如果还要兼容，得额外提供
回退值，但注意 HSL 到 RGB 转换不是线性的，手动换容易偏色——真要兼容 IE，不如直接用工具生成一组 RGB 值备用。
为什么不用 HSLA 做“同色系”渐变背景
很多人想用
到
做透明度渐变，以为能保持色相一致。但视觉上这是错的：透明叠加在白色背景上，等效于不断混入白色，实际效果接近“加白”，不是真正的明度变化，尤其在浅色区域会发灰、失饱和。
正确做法是用纯 HSL 明度梯度：
错：
对：
如果确实需要半透效果（比如卡片遮罩），先用 HSL 做好明度梯度，再整体套一层
这类轻量叠加，别动 HSL 本身的
通道。
调色板不是调数字游戏，H、S、L 三个维度里，人眼对
最敏感，对
其次，对
最不敏感——所以调的时候，亮度差要小一点（±10%～15%），色相尽量不动，饱和度宁可少调 5%，也别乱加 20%。
hsl()hslhsl(200, 70%, 60%)hsl(200, 70%, 85%)hsl(200, 70%, 30%)lshsl(200, 60%, 90%)hsl(200, 80%, 25%):root {
--h: 200;
--s: 70%;
--l-base: 60%;
}calc()--l-light: calc(var(--l-base) + 25%)--l-dark: max(15%, calc(var(--l-base) - 30%))max()--s-light: 60%--s-dark: 80%.bg-primaryhsl(var(--h), var(--s), var(--l-base)).bg-primary-lighthsl(var(--h), var(--s-light), var(--l-light))hsl()calc()hsl()calc()hsl(200, 70%, calc(60% + 10%))color: hsl(var(--h), var(--s), calc(var(--l-base) + 10%))color: hsl(var(--h), var(--s), var(--l-light))--l-lighthsl()rgb()hsla(200, 70%, 60%, 0.1)hsla(200, 70%, 60%, 0.9)background: linear-gradient(to right, hsla(200, 70%, 60%, 0.1), hsla(200, 70%, 60%, 0.9))background: linear-gradient(to right, hsl(200, 70%, 40%), hsl(200, 70%, 80%))rgba(255, 255, 255, 0.05)alhs