随机生成两种颜色，阴影略有不同

Question

我试图随机使用JS生成一对RGB格式的颜色，它们彼此相似但在阴影上略有不同。

参见下面的参考图片，所有3个“案例”（将随机生成）如何包含两种颜色，两种颜色非常相似，但颜色略有不同。

我尝试了以下代码，但生成的两种颜色完全不同。

如何我可以让第二种颜色与第一种颜色略有不同，而这对颜色是用随机值生成的吗？

ran1 = Math.floor(Math.random() * 255) + 1;
ran2 = Math.floor(Math.random() * 255) + 1;
ran3 = Math.floor(Math.random() * 255) + 1;
ran4 = Math.floor(Math.random() * 255) + 1;
ran5 = Math.floor(Math.random() * 255) + 1;
ran6 = Math.floor(Math.random() * 255) + 1;

color1 = "rgb(" + ran1 + "," + ran2 + "," + ran3 + ")"; // random color
color2 = "rgb(" + ran4 + "," + ran5 + "," + ran6 + ")"; // probably dissimilar to color1

Answer 1

这将提供两种颜色略有不同的颜色，但只展示了要扩展的原则;它不是一个打包的，完美的，生产就绪的解决方案。

基本上，如果第一个颜色的值不是太高，它会增加第二个颜色的RGB值，比第一个颜色的颜色多一点。

const slightness = 20; // positive for slightly lighter color

const colors = document.querySelectorAll( "div" ),
      color1 = colors[ 0 ],
      color2 = colors[ 1 ];

function shallWe( c ) {
  return c < 236 ? slightness : 0;
}

let ran1 = Math.floor(Math.random() * 255) + 1,
    ran2 = Math.floor(Math.random() * 255) + 1,
    ran3 = Math.floor(Math.random() * 255) + 1;

color1.style.background = "rgb(" + ran1 + "," + ran2 + "," + ran3 + ")";
ran1 += shallWe( ran1 );
ran2 += shallWe( ran2 );
ran3 += shallWe( ran3 );
color2.style.background = "rgb(" + ran1 + "," + ran2 + "," + ran3 + ")";

div { padding: 2em; }

<div></div><div></div>