如何仅用CSS计算CSS颜色反色并混合生成悬停色？

要实现将--pop与--bg的反色混合得到悬停色，可通过CSS颜色通道计算直接生成背景色的反色，再用color-mix完成混合。

方法一：拆分变量分步实现 #

先单独计算出--bg的反色变量，再用于混合：

:root {
  --pop: #123456;
  --bg: black;
  /* 计算背景色的完全反色 */
  --bg-inverse: rgb(
    calc(255 - red(var(--bg))),
    calc(255 - green(var(--bg))),
    calc(255 - blue(var(--bg)))
  );
  /* 混合--pop（30%占比）与反色 */
  --hover: color-mix(in srgb, var(--pop) 30%, var(--bg-inverse));
}

方法二：直接在混合中计算反色 #

如果不需要复用反色变量，可直接把反色计算写在color-mix里：

:root {
  --pop: #123456;
  --bg: black;
  --hover: color-mix(
    in srgb,
    var(--pop) 30%,
    rgb(
      calc(255 - red(var(--bg))),
      calc(255 - green(var(--bg))),
      calc(255 - blue(var(--bg)))
    )
  );
}

适配带透明度的背景色 #

如果--bg包含透明度，可同步计算alpha通道保持一致：

:root {
  --pop: #123456;
  --bg: rgba(0,0,0,0.8);
  --hover: color-mix(
    in srgb,
    var(--pop) 30%,
    rgba(
      calc(255 - red(var(--bg))),
      calc(255 - green(var(--bg))),
      calc(255 - blue(var(--bg))),
      alpha(var(--bg))
    )
  );
}

原理说明：CSS的red()/green()/blue()函数会自动解析任意合法颜色值，返回0-255的通道数值，通过calc(255 - 通道值)即可得到对应通道的反色值，组合后就是背景色的完全反色。这种方式适配所有合法的CSS颜色格式，包括十六进制、颜色关键字、rgb/rgba、hsl/hsla等。

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