互补色在hsl中是h值加180后对360取模，否则超出范围导致css解析错误；css不支持hsl内calc计算，需预处理器或js动态生成；s/l通常不变，但可调l提升对比度；hsl互补色与rgb取反结果不同，设计工具多用hsl逻辑。
互补色在HSL中就是h值加180度，但必须模360
直接把当前色的h值加180，再对360取余（% 360），就能得到其互补色的色相角。HSL的h是0–360的循环值，不模360会导致超出范围（比如270 + 180 = 450），CSS解析时会静默归零或报错，结果完全不对。
常见错误：写成hsl(270, 100%, 50%) → hsl(450, 100%, 50%)，浏览器会把它当无效值或强制截断，实际渲染成灰色或默认黑/白。
-
hsl(0, 100%, 50%)（红）→hsl(180, 100%, 50%)（青）✓ -
hsl(240, 100%, 50%)（蓝）→hsl(60, 100%, 50%)（黄）✓（因为240 + 180 = 420，420 % 360 = 60） - 手算时别漏掉
% 360，尤其接近360的色相（如350° → 170°，不是530°）
CSS里没法自动算，得手动换算或用预处理器
CSS原生不支持表达式，hsl(calc(h + 180), s, l)这种写法非法，calc()不能作用于hsl()的单个参数。想动态生成互补色，只有两个现实路径：
- 用Sass/Less等预处理器：定义函数
@function complement($h) { @return ($h + 180) % 360; }，然后hsl(complement(240), 100%, 50%) - 纯CSS就只能手动算好再写死，比如知道主色是
hsl(120, 80%, 60%)，就提前算出互补色是hsl(300, 80%, 60%)，直接写进样式 - 运行时用JS生成：读取元素
getComputedStyle的color，用正则提取h值，加180再模360，最后设回style.setProperty('--comp-h', newH)
饱和度和亮度要不要调？一般不动，但要注意视觉陷阱
严格来说，互补色只定义在色相环上，s和l保持不变是最准确的数学定义。但人眼对不同色相的明暗感知不同——比如hsl(60, 100%, 50%)（黄）看着比hsl(240, 100%, 50%)（蓝）亮得多。所以实际配色时：
- 若追求高对比可读性（如文字+背景），常把互补色的
l反向调整（50% → 30% 或 70%），避免黄底白字这种低对比组合 -
s通常保留，除非原色饱和度极低（如hsl(120, 10%, 50%)），此时互补色也灰，可适当提s增强区分度 - 别依赖HSL互补色做无障碍对比检测，WCAG要求的是相对亮度比，不是色相差
别把HSL互补色和RGB取反混为一谈
rgb(255, 0, 0)取反是rgb(0, 255, 255)（青），这恰好和hsl(0, ...)的互补色一致；但rgb(255, 128, 0)（橙）取反是rgb(0, 127, 255)（蓝紫），而它的HSL互补色是hsl(210, ...)（偏青的蓝），两者指向不同位置。原因在于RGB是设备相关模型，HSL是感知近似模型，色相环本身是基于人眼响应构建的。
真正容易被忽略的是：很多设计工具（Figma/Sketch）标“互补色”时用的是HSL逻辑，但开发者复制颜色后直接用RGB取反，结果UI和设计稿对不上——务必确认工具底层用的是哪种模型。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
