两个选定的 rgb 颜色之间的随机颜色 (JavaScript)

Question

用下面的js-sn-p...

rgb(' + Math.floor(Math.random() * 128).toString(10) + ','
      + Math.floor(Math.random() * 128).toString(10) + ','
      + Math.floor(Math.random() * 128).toString(10) + ')

...随机的“深色”颜色是可能的。

有没有办法在颜色之间随机化？一个是黑色的，另一个是蓝色的 - 以及它们“之间”的随机颜色？难还是容易？

Answer 1

RGB 在 0 0 0 处为黑色，并在 255 255 255 处继续变亮至白色。

如果你只想要几种颜色，试试这个网站：http://www.rapidtables.com/web/color/RGB_Color.htm 将鼠标悬停在托盘上，然后查看下面的 R/G/B 编号如何变化。

之后，只需编写一个算法来获得任何特定颜色的阴影。（在您选择的范围内使用 math.random）

Math.floor(Math.random() * 10) + 50 给出一个 10 到 50 之间的随机数。

以下是您获得（大致）所有颜色的方法：

R+(X * (255-R))  
G+(X * (255-G))  
B+(X * (255-B))  

R、G 和 B 在您的情况下将分别为 0、207 和 239。
X 是着色因子（使用0.25、0.5 或0.75 获得整数）。系数越大，越亮。

例如：

0+(0.25 * (255-0))  
207+(0.25 * (255-207))  
239+(0.25 * (255-239))  

会给你0,219,243，比0,207,239亮一点。冲洗并重复！



Edit2：如果您只想要 0,207,239 和黑色之间的阴影，有一种更简单的方法来实现它。

继续从所有三个值中减去一个 X（同样，一个修饰符，它越大，每次通过时它会越暗）。 对于 X=20：

0,207,239 > 0,187,219 将是较深的蓝色阴影，一旦达到 0,0,0，您将处于黑色。

祝你好运！

Answer 2

要在两种颜色之间创建一个随机数，该技术应该是在0 和1 之间创建一个随机数，并使用它来获得每个通道中相同的颜色百分比，例如，下一个代码试图获得rgb(0, 0, 0) 和 rgb(0, 207, 239) 之间的随机颜色：

var random = Math.random();
var red = 0 + Math.floor((0 - 0) * random);
var green = 0 + Math.floor((207 - 0) * random);
var blue = 0 + Math.floor((239 - 0) * random);

我使用了前段时间创建的JavaScript 实用程序的一部分来创建下一个示例，您可以使用它生成两种颜色之间的随机颜色（您可以使用以下字符串：#FFF、@ 987654328@或rgb(255, 255, 255))

function RandomColor (color1, color2) {

    var _regs = {
        "hex3"  : /^#([a-f\d])([a-f\d])([a-f\d])$/i,
        "hex6"  : /^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i,
        "rgb"   : /^rgb\s*\(\s*([\d\.]+%?)\s*\,\s*([\d\.]+%?)\s*\,\s*([\d\.]+%?)\s*\)$/
    };

    var _obj1 = getValues(color1);
    var _obj2 = getValues(color2);

    //---Get the colors
    function getValues (color) {

        var values = false;

        for (var prop in _regs) {

            if (_regs[prop].test(color)) {

                values = {};

                values.r = color.replace(_regs[prop], "$1");
                values.g = color.replace(_regs[prop], "$2");
                values.b = color.replace(_regs[prop], "$3");

                if (prop === "rgb") {
 
                    values.r = Number(values.r);
                    values.g = Number(values.g);
                    values.b = Number(values.b);

                } else {

                    values.r = parseInt(values.r, 16);
                    values.g = parseInt(values.g, 16);
                    values.b = parseInt(values.b, 16);

                }

                break;

            }

        }

        return values;

    }

    //---str_pad
    function str_pad (str, pad_length, pad_string, pad_type) {

        var len = pad_length - str.length;
        if (len < 0) { return str };
        var pad = new Array(len + 1).join(pad_string);
        if (pad_type === "STR_PAD_LEFT") { return pad + str };
        return str + pad;

    }

    //---Get a value
    function getRandom (c1, c2, pcent) {

        var color = c1 + Math.floor((c2 - c1) * pcent);

        if (color < 0) color = 0;

	    return str_pad(color.toString(16), 2, "0", "STR_PAD_LEFT");

    }

    //---Get a random color
    this.getColor = function () {

        if (_obj1 && _obj2) {

            var random = Math.random();

            var r = getRandom(_obj1.r, _obj2.r, random);
            var g = getRandom(_obj1.g, _obj2.g, random);
            var b = getRandom(_obj1.b, _obj2.b, random);

            return "#" + r + g + b;

        }

        return false;

    };

}

var doc = document;
var link = doc.querySelector("#link");
var thumb = doc.querySelector(".thumb");
var generator = new RandomColor("#000", "rgb(0, 207, 239)");

link.addEventListener("click", function (evt) {

    evt.preventDefault();

    var color = generator.getColor();

    if (color) {
        thumb.style.background = color;
        thumb.innerHTML = color;
    }
});

#link {
    display: block;
    font-family: Arial;
    text-align: center;
}

.thumb {
    border: 1px solid #000;
    color: white;
    font-family: Arial;
    height: 100px;
    line-height: 100px;
    text-align: center;
    text-transform: uppercase;
    -moz-transition: background .25s ease;
    -webkit-transition: background .25s ease;
    transition: background .25s ease;
    width: 100%;
}

<a id="link" href="#">Generate a random color between #000000 and #00CFEF</a>
<br>
<div class="thumb"></div>