是否有方法通过CSS将整个网站的颜色调整为互补色？

目前有两类成熟可落地的方案，你可以根据自己项目的实际情况选择：

• 方案1：全局CSS滤镜方案（改造成本最低，适配所有类型项目）
  核心逻辑是色相环上夹角180度的颜色即为互补色，直接给页面根节点加hue-rotate滤镜就能一键完成全站色彩转换，不需要逐个修改散落在代码里的色值：

  /* 给根节点加180度色相旋转 */
  html {
    filter: hue-rotate(180deg);
  }
  

  这个方案会默认把页面里的图片、视频、canvas画布、iframe这类嵌入内容也一起转色，如果不需要媒体内容跟着变色，单独给这类元素加反向旋转抵消效果即可：

  img, video, canvas, iframe {
    filter: hue-rotate(-180deg);
  }
  

  注意：不要用invert()滤镜实现这个需求，invert()是亮度反转+色相偏移，出来的是反色效果，不是严格的互补色，视觉偏差会很大。
  这个方案的缺点是对非sRGB色域的颜色、设置了mix-blend-mode混合模式的元素，可能出现少量色值偏差，适合快速上线、对色彩精度要求不是极端严格的场景。

• 方案2：CSS变量替换方案（精度最高，适合做了色值统一管理的项目）
  如果你项目里所有用到的颜色都是通过CSS自定义属性（CSS变量）统一管控、没有散写色值的情况，那直接计算每个变量对应色值的互补色，替换变量值即可：

  :root {
    /* 原有色值示例 */
    /* --primary: #2563eb;
    --bg: #ffffff;
    --text: #1f2937; */
    /* 替换后的互补色色值 */
    --primary: #ebad25;
    --bg: #000000;
    --text: #e0d6c8;
  }
  

  这个方案完全不会影响媒体资源，也不会出现滤镜带来的混合模式异常问题，色彩精度100%可控，缺点是如果前期没做色值的变量收敛，需要逐个排查替换所有散写的色值，改造成本很高。

内容的提问来源于stack exchange，提问作者5y9uodh8