随机颜色生成器

JavaScript

番长猴子古一

2020-03-16

鉴于此功能,我想更换颜色与颜色随机发生器。

document.overlay = GPolyline.fromEncoded({
    color: "#0000FF",
    weight: 10,
    points: encoded_points,
    zoomFactor: 32,
    levels: encoded_levels,
    numLevels: 4
});

我该怎么做?

第1700篇《随机颜色生成器》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

16个回答
番长凯 2020.03.16

You can use colorchain.js to generate a sequence of colors with varying hues.

神乐米亚蛋蛋 2020.03.16

This method will get a random number, convert it to a hexidecimal string and then extract a part of it, giving you a random hex.

function randomColor() {
    return "#" + Math.random().toString(16).slice(2,8);
}
GilJinJin 2020.03.16

map (returns always valid rgb color)

`rgb(${[1,2,3].map(x=>Math.random()*256|0)})`

let c= `rgb(${[1,2,3].map(x=>Math.random()*256|0)})`

console.log(c);
document.body.style.background=c

Tom米亚老丝 2020.03.16
function get_random_color() {
    return "#" + (Math.round(Math.random() * 0XFFFFFF)).toString(16);
}

http://jsfiddle.net/XmqDz/1/

Me无敌 2020.03.16

Use distinct-colors.

It generates a palette of visually distinct colors.

distinct-colors is highly configurable:

  • Choose how many colors are in the palette
  • Restrict the hue to a specific range
  • Restrict the chroma (saturation) to a specific range
  • Restrict the lightness to a specific range
  • Configure general quality of the palette
梅猿 2020.03.16

You could use this simple function

function getRandomColor(){
 var color =  "#" + (Math.random() * 0xFFFFFF << 0).toString(16);
 return color;
}
Jim猿 2020.03.16

Almost all of the previous short hand methods are generating invalid hex codes (five digits). I came across a similar technique only without that issue here:

"#"+("000"+(Math.random()*(1<<24)|0).toString(16)).substr(-6)

Test

Try this in the console:

for(i = 0; i < 200; i++) {
    console.log("#" + ("000" + (Math.random()*(1<<24)|0).toString(16)).substr(-6));
}
小小神无 2020.03.16

Array.prototype.reduce makes it very clean.

["r","g","b"].reduce(function(res) {
    return res + ("0"+~~(Math.random()*256).toString(16)).slice(-2)
}, "#")

Needs a shim for old browsers.

小小阿飞 2020.03.16

Yet another random color generator:

var randomColor;
randomColor = Math.random() * 0x1000000; // 0 < randomColor < 0x1000000 (randomColor is a float)
randomColor = Math.floor(randomColor); // 0 < randomColor <= 0xFFFFFF (randomColor is an integer)
randomColor = randomColor.toString(16); // hex representation randomColor
randomColor = ("000000" + randomColor).slice(-6); // leading zeros added
randomColor = "#" + randomColor; // # added
流云 2020.03.16

For decent randomness.

Random color

`#${crypto.getRandomValues(new Uint32Array(1))[0].toString(16).padStart(8, 0).slice(-6)}`

Random alpha, random color.

`#${crypto.getRandomValues(new Uint32Array(1))[0].toString(16).padStart(8, 0)}`
猿古一梅 2020.03.16

Short answer with pad to exact size

'#'+((1<<24)*(Math.random()+1)|0).toString(16).substr(1)

蛋蛋A 2020.03.16

具有亮度控制的随机颜色生成:

function getRandColor(brightness){

    // Six levels of brightness from 0 to 5, 0 being the darkest
    var rgb = [Math.random() * 256, Math.random() * 256, Math.random() * 256];
    var mix = [brightness*51, brightness*51, brightness*51]; //51 => 255/5
    var mixedrgb = [rgb[0] + mix[0], rgb[1] + mix[1], rgb[2] + mix[2]].map(function(x){ return Math.round(x/2.0)})
    return "rgb(" + mixedrgb.join(",") + ")";
}
A老丝 2020.03.16

我喜欢这个: '#' + (Math.random().toString(16) + "000000").substring(2,8)

西门小胖小宇宙 2020.03.16

这是对此问题的另一种看法。

我的目标是创造鲜艳鲜明的色彩。为了确保颜色鲜明,我避免使用随机生成器,而是从彩虹中选择“间隔均匀”的颜色。

这是在Google地图中创建具有最佳“唯一性”(即,没有两个标记具有相似颜色)的弹出标记的理想选择。

function rainbow(numOfSteps, step) {
    // This function generates vibrant, "evenly spaced" colours (i.e. no clustering). This is ideal for creating easily distinguishable vibrant markers in Google Maps and other apps.
    // Adam Cole, 2011-Sept-14
    // HSV to RBG adapted from: http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript
    var r, g, b;
    var h = step / numOfSteps;
    var i = ~~(h * 6);
    var f = h * 6 - i;
    var q = 1 - f;
    switch(i % 6){
        case 0: r = 1; g = f; b = 0; break;
        case 1: r = q; g = 1; b = 0; break;
        case 2: r = 0; g = 1; b = f; break;
        case 3: r = 0; g = q; b = 1; break;
        case 4: r = f; g = 0; b = 1; break;
        case 5: r = 1; g = 0; b = q; break;
    }
    var c = "#" + ("00" + (~ ~(r * 255)).toString(16)).slice(-2) + ("00" + (~ ~(g * 255)).toString(16)).slice(-2) + ("00" + (~ ~(b * 255)).toString(16)).slice(-2);
    return (c);
}

If you wish to see what this looks like in action see http://blog.adamcole.ca/2011/11/simple-javascript-rainbow-color.html.

猪猪A 2020.03.16

我怀疑任何事物都会比这更快或更短:

"#"+((1<<24)*Math.random()|0).toString(16)

挑战!

宝儿A 2020.03.16

无需散列十六进制字母。JavaScript可以自己做到这一点:

function get_random_color() {
  function c() {
    var hex = Math.floor(Math.random()*256).toString(16);
    return ("0"+String(hex)).substr(-2); // pad with zero
  }
  return "#"+c()+c()+c();
}

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android