随机颜色生成器

IT技术 javascript random colors
2021-01-23 04:13:27

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

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

我该怎么做?

6个回答

使用getRandomColor()代替"#0000FF"

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}



function setRandomColor() {
  $("#colorpad").css("background-color", getRandomColor());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="colorpad" style="width:300px;height:300px;background-color:#000">

</div>
<button onclick="setRandomColor()">Random Color</button>

你也可以使用一个发电机功能这样的
2021-03-12 04:13:27
您可以删除 .split('') 调用。字符串已经有数组索引器。
2021-03-26 04:13:27
@WebWanderer 是的,有 16777216 种可能的 RGB 颜色变化。执行 toString(16) 将为您提供一个十六进制值。这是更快并且更准确的产生颜色变化的方式。请注意 16777215 和 16777216 的区别。那是因为我们从 0 开始计数。所以你有 16777216 种不同的颜色。但最大值是 16777215
2021-03-27 04:13:27
使用时击中0或15的几率Math.round(Math.random()*15)只有1:30,而其他数字的几率是1:15。
2021-03-30 04:13:27
请注意,由于 RGB 包裹色彩空间的方式,这会偏向于非常暗和不饱和的颜色。Martin Ankerl 有一篇关于从其他空间(如 HSV)生成颜色的好文章:martin.ankerl.com/2009/12/09/...
2021-04-01 04:13:27

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

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

挑战!

@Mohsen,仅供参考,您的代码时不时会产生无效的 5 位数字
2021-03-13 04:13:27
结果未填充为 6 位数字
2021-03-13 04:13:27
('00000'+(Math.random()*(1<<24)|0).toString(16)).slice(-6)将始终返回 6 的长度。尽管此方法仍会(很少)返回小数字,这些数字会给出类似000cf40000a7我认为有点笨拙的结果在这些情况下,红色分量对随机颜色没有贡献。
2021-03-13 04:13:27
你忘了用零填充。
2021-03-17 04:13:27
'#'+(Math.random()*0xFFFFFF<<0).toString(16);
2021-04-09 04:13:27

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

我的目标是创造充满活力和独特的色彩。为了确保颜色不同,我避免使用随机生成器并从彩虹中选择“均匀间隔”的颜色。

这非常适合在 Google 地图中创建具有最佳“唯一性”(即,没有两个标记具有相似颜色)的弹出标记。

/**
 * @param numOfSteps: Total number steps to get color, means total colors
 * @param step: The step number, means the order of the color
 */
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);
}

如果您想查看实际效果,请参阅用于 Google 地图标记的简单 JavaScript 彩虹颜色生成器

我也创建了类似的东西,但它非常随机且非常独特。伪代码在这里它使用 hsv 而不是 rgb,因为 hsv 具有更可预测的行为。如果您想查看 Python 实现,我在此处此处使用了它您必须在代码中搜索“颜色”。
2021-03-30 04:13:27
我已经对与类似问题的答案相同的想法进行了简化实现stackoverflow.com/a/14187677/421010
2021-03-31 04:13:27
@RobertMolina:对不起,我把我的东西移到了 Gitlab。伪代码现在在这里,项目在这里这里
2021-04-02 04:13:27
那么参数的值是多少?
2021-04-05 04:13:27

谁能打败它?

'#' + Math.random().toString(16).substr(-6);

保证一直有效http : //jsbin.com/OjELIfo/2/edit

根据eterps 的评论,如果随机颜色的十六进制表示非常短(0.730224609375=> 0.baf,上面的代码仍然可以生成更短的字符串

此代码应适用于所有情况:

function makeRandomColor(){
  var c = '';
  while (c.length < 7) {
    c += (Math.random()).toString(16).substr(-6).substr(-1)
  }
  return '#' + c;
}
或者更基本的:0is 的有效返回值Math.randomand '#' + (0).toString(16).substr(-6)is "#0"如果你不介意我会罢工 - 尽管它保证一直有效以避免混淆其他人?
2021-03-12 04:13:27
简短版本:当 Math.random 返回0.125结果是"#0.2"(无效)
2021-03-14 04:13:27
当 Math.random() 返回 0.022092682472568126 时,此代码生成无效的 '#5a7dd' 字符串。疯狂的!
2021-03-25 04:13:27
喜欢这个,因为#ffffff 不经常出现。
2021-03-29 04:13:27
在很多情况下这不起作用。检查 Math.random() 的以下输出... 0.730224609375, 0.43603515625, 0.957763671875,列表还在继续...
2021-04-08 04:13:27

您还可以在每个好的浏览器上使用 HSL ( http://caniuse.com/#feat=css3-colors )

function randomHsl() {
    return 'hsla(' + (Math.random() * 360) + ', 100%, 50%, 1)';
}

这只会给你明亮的颜色,你可以调整亮度、饱和度和 alpha。

// es6
const randomHsl = () => `hsla(${Math.random() * 360}, 100%, 50%, 1)`
谢谢!我设法为背景获得了完美的颜色:'hsla(' + (Math.floor(Math.random()*360) + ', 100%, 70%, 1)'
2021-03-10 04:13:27
stackoverflow.com/a/23861752/1693593,不需要hsla它alpha=1,只需使用hsl
2021-03-14 04:13:27
没问题,我很惊讶没有人使用 hsl 的功能:)
2021-03-15 04:13:27
+1 这使得更容易使用亮度和饱和度来设置随机背景颜色,同时确保文本始终可读
2021-03-23 04:13:27
您不能以这种方式生成 16M kolor(例如,您永远不会获得黑白灰度)-但是是的-如果我们对每个组件使用随机,那么我们将获得所有 hsl corol
2021-04-09 04:13:27