如何生成两种颜色，其中一种是另一种的阴影？

Question

基本上，我正在使用D3.js生成一个随机图形，并希望为每个节点生成随机的填充颜色和边框颜色，边框颜色必须是填充颜色的一种阴影。目前，我正在使用以下方法生成随机的填充颜色：

randomColor() {
  const r = () => Math.floor(256 * Math.random());
  return  {color: `rgb(${r()}, ${r()}, ${r()})`, border: `rgb(${r()}, ${r()}, ${r()})`};
}

但是边框也是随机的，所以它与主要颜色没有关联。

提前致谢。

- ryuzak1

---

我会先尝试生成主要颜色，获取R/G/B值，然后通过将主要颜色除以或乘以一个数字来获得另一种色调。例如，如果您的第一种颜色是100,120,130，则可以除以2得到50,60,65。请尝试一下，看看是否有意义。 - TKoL

顺便说一下，如果您限制倍数，使主要颜色中最大的数字永远不会超过256，则乘法只能起作用。除法可能是更好的选择，但我对此并不是非常自信。 - TKoL

这个回答有帮助吗：https://dev59.com/Um035IYBdhLWcg3wNdLg 或者这个回答：https://dev59.com/UlkR5IYBdhLWcg3w7xdc - Jannes Carpentier

我建议查看这个答案，并将主要颜色与白色混合以使其变浅，或与黑色混合以使其变暗。 - Ghassen Louhaichi

Answer 1

您只需随机选择的RGB值并将它们除以比例，这里是2：

function randomColor() {
  const rnd = () => Math.floor(256 * Math.random());
  let r = rnd(), g = rnd(), b = rnd(),
      r2 = parseInt(r / 2), g2 = parseInt(g / 2), b2 = parseInt(b / 2);
  return  {color: `rgb(${r}, ${g}, ${b})`, border: `rgb(${r2}, ${g2}, ${b2})`};
}

let style = randomColor();

document.getElementById('test').style.backgroundColor = style.color;
document.getElementById('test').style.borderColor = style.border;

#test {
  border: 5px solid white;
}

<div id="test">TEST</div>

- Kaddath

Answer 2

将这些值保存到数组中，并直接在返回对象的border属性中更改这些值：

const color = randomColor();

function randomColor() {
  const r = () => Math.floor(256 * Math.random());
  const rgb = [r(), r(), r()];
  return {
    color: `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`,
    border: `rgb(${rgb[0] - 50}, ${rgb[1] - 50}, ${rgb[2] - 50})`
  };
}

document.querySelector('div').style.color = color.color;
document.querySelector('div').style.border = '1px solid ' + color.border;

console.log(color);

<div>I am a div</div>

如果传入负值，rgb默认为0，因此您不必担心条件检查。

- Daniel_Knights

Answer 3

你可以使用这个：

function randomColor() {
  const r = () => Math.floor(256 * Math.random());
  let rVal = r();
  let gVal = r();
  let bVal = r();
  let diff = r() + 1;
  return {
    color: `rgb(${rVal}, ${gVal}, ${bVal})`,
    border: `rgb(${(rVal + diff) % 255}, ${(gVal + diff) % 255}, ${(bVal + diff) % 255})`
  };
}

- Pranav Rustagi

Answer 4

添加到其他答案...也许可以使用可配置的hsl？因为h是您的基础颜色，您可以相当随意地更改另外两个值 ;)

function randomColor(sat = '100%', lum1 = '50%', lum2 = '30%') {
  const h = Math.floor(360 * Math.random());
  return {
    color: `hsl(${h}, ${sat}, ${lum1}`,
    border: `hsl(${h}, ${sat}, ${lum2})`
  };
}

const color = randomColor();

document.querySelector('div').style.backgroundColor = color.color;
document.querySelector('div').style.borderColor = color.border;

console.log(color);

#test {
  border: 5px solid white;
}

<div id="test">I am a div</div>

- Argee

Answer 5

你可以考虑使用 CSS 帮助你完成这个任务，使用亮度过滤器，在每个元素中只需生成一种颜色：

一个简单的示例：

$('.box').each(function() {
  $(this).css('color', randomColor());
})

function randomColor() {
  const r = Math.floor(200 * Math.random()) + 30;
  const g = Math.floor(200 * Math.random()) + 30;
  const b = Math.floor(200 * Math.random()) + 30;
  return `rgb(${r}, ${g}, ${b})`;
}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 10px;
  position: relative;
  padding: 10px;
  background: currentColor;
}

.box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 12px solid;
  filter: brightness(0.6);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

- Temani Afif