javascript - 输入的颜色如何计算背景颜色？

Question

在我的@vue/cli 4.1.1 应用程序中，用户输入颜色，我必须输出
输入颜色的颜色值，我想知道如何计算和设置背景颜色
确保输入的颜色值清晰可见。我的意思是如果用户输入白色(或接近)
背景一定是暗的？

谢谢

Answer 1

你可以给一个反转颜色 - 255-color rgb 中的每一个

function bg(r, g, b) {return [255-r, 255-g, 255-b]}

如果你得到十六进制格式，你可以把它转换成 rgb ，然后得到反转。像这样:

function invert(hex){
  hex = parseInt(hex.substring(1), 16);
  var r = hex >> 16;
  hex -= r << 16;
  var g = hex >> 8;
  hex -= g << 8;
  var b = hex;
  return `rgb(${255-r},${255-g},${255-b})`;
}
var color1 = "#eeff00";
var color2 = "#22faef";
var color3 = "#f1f1f1";
document.querySelector('#a').style = `color:${color1};background-color:${invert(color1)}`;
document.querySelector('#b').style = `color:${color2};background-color:${invert(color2)}`;
document.querySelector('#c').style = `color:${color3};background-color:${invert(color3)}`;

div {
padding: 10px;
}

<div id="a">Hello world!</div>
<div id="b">Hello world!</div>
<div id="c">Hello world!</div>