Question

使用以下js-snippet ...

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和{{1}分别 X 是着色的因素（使用239，0.25或0.5来获得整数）。因素越大，它就越亮。

例如：

0.75

会给你0+(0.25 * (255-0)) 207+(0.25 * (255-207)) 239+(0.25 * (255-239))，一个比0,219,243更亮的色调。冲洗并重复！

Edit2：如果你只想要0,207,239和黑色之间的阴影，那么实现它的方法就更简单了。

从所有三个值中继续减去一个X（再次，一个修饰符，它越大，每次传递就越暗）。对于X = 20：

0,207,239＆gt; 0,207,239将是一个更深的蓝色阴影，一旦你达到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实用程序的某些部分来创建下一个示例，您可以使用两种颜色之间的随机颜色生成（您可以使用字符串：{{1 }}，#FFF或#FFFFFF）

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%;
}

两种选定的rgb颜色之间的随机颜色（JavaScript）

2 个答案: