按钮文字颜色随着背景色自动变化实例页面

CSS代码：

:root {
  /* 定义RGB变量 */
  --red: 44;
  --green: 135;
  --blue: 255;
  /* 文字颜色变色的临界值，建议0.5~0.6 */
  --threshold: 0.5;
  /* 深色边框出现的临界值，范围0~1，推荐0.8+*/
  --border-threshold: 0.8;
}

.btn {
  font-size: 150%;
  padding: .5em 2em;
}
.btn {
  /* 按钮背景色就是基本背景色 */
  background: rgb(var(--red), var(--green), var(--blue));

  /** 
   * 使用sRGB Luma方法计算灰度（可以看成亮度）
   * 算法为：
   * lightness = (red * 0.2126 + green * 0.7152 + blue * 0.0722) / 255
  */
  --r: calc(var(--red) * 0.2126);
  --g: calc(var(--green) * 0.7152);
  --b: calc(var(--blue) * 0.0722);
  --sum: calc(var(--r) + var(--g) + var(--b));
  
  --lightness: calc(var(--sum) / 255);
  
  /**
   * --lightness近似看成亮度，范围0~1，此时，和临界值--threshold做比较：
   * 大于，则正数，和-999999%相乘，会得到一个巨大负数，浏览器会按照合法边界0%渲染，也就是亮度为0，于是颜色是黑色；
   * 小于，则和-999999%相乘，会得到一个巨大的正数，以最大合法值100%渲染，于是颜色是白色；
  */
  color: hsl(0, 0%, calc((var(--lightness) - var(--threshold)) * -999999%));
  
  /**
   * 确定边框透明度。
   * 如果亮度比--border-threshold值大，在说明按钮背景色比较淡，我们出现一个深色边框；
   * 如果亮度比较小，说明按钮背景色较深，没有必要出现边框。
     此时，--border-alpha计算后为负值，透明度小于0的时候，浏览器会按照0渲染，因此，边框透明。
  */
  --border-alpha: calc((var(--lightness) - var(--border-threshold)) * 100);
  /* 设置边框相关样式 */
  border: .2em solid;
  border-color: rgba(calc(var(--red) - 50), calc(var(--green) - 50), calc(var(--blue) - 50), var(--border-alpha));
}
                

HTML代码：

<button class="btn">我是按钮</button>

<p>拖动滑块，改变RGB变量：</p>
<p>R：<input type="range" min="0" max="255" value="44" name="red"></p>
<p>G：<input type="range" min="0" max="255" value="135" name="green"></p>
<p>B：<input type="range" min="0" max="255" value="255" name="blue"></p>

JS代码：

var eleRanges = document.querySelectorAll('input[type="range"]');
Array.from(eleRanges).forEach(function (range) {
    range.addEventListener('input', function () {
        document.documentElement.style.setProperty('--' + this.name, this.value);    
    });
});