相关疑难解决方法(0)

我想展示一些像这个例子的图像

填充颜​​色由数据库中的字段决定,颜色为十六进制(例如:ClassX - >颜色:#66FFFF).现在,我想用所选颜色显示填充上方的数据(如上图所示),但我需要知道颜色是暗还是浅,所以我知道这些单词应该是白色还是黑色.有办法吗？TKS

有没有人知道,用于计算十六进制值的互补色的Javascript解决方案？

网上有很多颜色挑选套件和调色板生成器,但我还没有看到任何使用JS计算颜色的颜色.

非常感谢详细的提示或片段.

我正在建立一个新的网站，需要我的文字根据不断变化的背景颜色来更改颜色，以保持对比度。我在网上搜寻了不涉及Sass的答案，但没有一个起作用...

我尝试了一些JavaScript，但是只有当背景是您手动更改的固定颜色时，它们才起作用。

我当前的文件：https : //codepen.io/jonathanlee/pen/wZXvRY

var color = function getRandomColor() {
  var letters = '0123456789ABCDEF'.split('');
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
setInterval(function() {
  document.getElementById("test").style.backgroundColor = color(); //() to execute the function!
}, 3000);

var ww = function isDarkColor(rgb) {
  return Math.round((
    parseInt(rgb[0], 10) * 299 +
    parseInt(rgb[1], 10) * 587 +
    parseInt(rgb[2], 10) * 114) / 1000) <= 140
}

if (ww …

我的图像资源中有一些徽标。这些标志将被导入到本网站中。每个标志都有随机颜色（可以是白色、黑色、灰色、红色、蓝色、绿色等）并具有透明背景。例如：

以下代码将用于在网站页面上显示徽标：

.magic-box {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    position: relative;
    border-radius: 20px;
    background-color: white; /* can be changed */
}

.magic-image {
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.images {
  display: flex;
}

<div class="images">
  <div class="magic-box">
    <img src="https://i.stack.imgur.com/b7yHv.png" class="magic-image" />
  </div>
  <div class="magic-box">
    <img src="https://i.stack.imgur.com/IhCH1.png" class="magic-image" />
  </div>
  <div class="magic-box">
    <img src="https://i.stack.imgur.com/tYjdM.png" class="magic-image" />
  </div>
</div>

问题是当我将背景颜色设置为.magic-box白色时，白色徽标不会显示。当背景颜色设置为黑色时，黑色标志不可见，等等。

.magic-box {
    width: …