如何在 JavaScript 中生成随机颜色

Vladimir Sobolev

# 2009年12月21日

有时脚本会生成错误的字符串，只有 5 个字符。

Eliazer

评论永久链接# 2009年12月21日

这应该可以解决这个问题（它也更易读）。

‘#’+(Math.random()*0xFFFFFF<<0).toString(16);
Ken

评论永久链接# 2010年10月3日

公式不正确。这是一个更正后的版本

var x=Math.round(0xffffff * Math.random()).toString(16);
var y=(6-x.length);
var z=”000000″;
var z1 = z.substring(0,y);
var color= “#” + z1 + x;

这样，如果十六进制数字的长度太短，则会在开头添加适当数量的零，并且不会出现任何颜色非法值。
Artem Kh

评论永久链接# 2020年4月27日

‘#’ + (Math.floor(Math.random() * 2 ** 24)).toString(16).padStart(0, 6)
km

评论永久链接# 2020年9月23日

const randomColor = Math.floor(Math.random() * 2 ** 24).toString(16).padStart(6, “0”);

splitDecision

# 2021年10月9日

这是我解决它的方法；> 干杯！

const arrayOfColorFunctions = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']

let randomColorString = '#';
function newColorFind(){

for (let x = 0; x < 6; x++){

    let index = Math.floor(Math.random() * 16)
    let value = arrayOfColorFunctions[index]

    randomColorString += value
}
 console.log(randomColorString)


}

Andrew

# 2012年4月3日

大家好，抱歉我理解能力有限，但如何将其集成到 CSS 代码中，就像示例中所做的那样？

非常感谢，

Andrew。

Khayri R.R. Woulfe

评论永久链接# 2019年12月17日

只需从数组字符串“0123456789ABCDEF”中随机选择一个字符三或六次，然后将生成的字符串连接起来即可始终创建有效的十六进制颜色代码。

Dennis

# 2012年8月24日

受到启发做了一些小而有趣的东西。

var ds = [];
function addtods(nodes) {
	for (var i in nodes) {
		ds.push(nodes[i]);
	}
}
setInterval(function () {
	ds = [];
	addtods(document.getElementsByTagName('div'));
	addtods(document.getElementsByTagName('span'));
	addtods(document.getElementsByTagName('a'));
	addtods(document.getElementsByTagName('li'));
	addtods(document.getElementsByTagName('ul'));
	addtods(document.getElementsByTagName('textarea'));
	addtods(document.getElementsByTagName('input'));
	document.body.style.backgroundColor = '#' + (Math.random() * 0xFFFFFF &lt&lt 0).toString(16);
	document.body.style.color = '#' + (Math.random() * 0xFFFFFF &lt&lt 0).toString(16);
	for (var i in ds) {
		if (ds[i] && ds[i].style) {
			ds[i].style.backgroundColor = '#' + (Math.random() * 0xFFFFFF &lt&lt 0).toString(16);
			ds[i].style.color = '#' + (Math.random() * 0xFFFFFF &lt&lt 0).toString(16);
			ds[i].style.borderColor = '#' + (Math.random() * 0xFFFFFF &lt&lt 0).toString(16);
		}
	}
}, 10);

Michael

# 2014年6月25日

你的代码对我来说不起作用，所以我重写了它，很有趣

var elements = Array.prototype.slice.call(document.querySelectorAll("*"))
  , styleElements = ["h1", "a", "div", "section", "p", "ul", "li", "h2", "h3", "h4", "h5", "h6", "article", "aside", "footer", "span"]

elements = elements.filter(function(element){
  if ( styleElements.indexOf(element.nodeName.toLowerCase()) &gt; -1 ) return true
})

var colors = function() {
  elements.forEach(function(element) {
    element.style.backgroundColor = '#'+(Math.random()*0xFFFFFF&lt;&lt;0).toString(16)
    element.style.color = '#'+(Math.random()*0xFFFFFF&lt;&lt;0).toString(16)
    element.style.borderColor = '#'+(Math.random()*0xFFFFFF&lt;&lt;0).toString(16)
  })

  window.setTimeout(colors, 1000)
}

colors()

Michael

评论永久链接# 2014年6月25日

然后我意识到它不起作用，因为预览转义了小于号 :/

好吧。很棒的想法 :)

Brenden

# 2012年9月21日

你可以使用这个函数

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

这里有一个预览，只需点击按钮
http://sweb1.dmit.nait.ca/~bkoepke1/Random%20Colour%20Generator/

Malcolm

评论永久链接# 2022年6月20日

嘿，伙计，只是想感谢你留下这个供我们找到。对我来说非常有效！

royi

# 2013年1月18日

因为你使用了 floor，所以你永远不会得到 FFFFFF 的最后一个值

Math.random()*16777215

Basil

# 2013年2月9日

如何使用此函数在 CSS 文件中设置值？

我创建了一个名为 randomcolor.js 的文件
var @randomColor = Math.floor(Math.random()*16777215).toString(16);

然后在我的 variables.less 文件中我尝试了
@adjacent-color: ‘#’ + @randomColor

我也尝试了
@adjacent-color: ‘#’+(Math.random()*0xFFFFFF<<0).toString(16);

Owen

# 2013年4月16日

但是你用的是脚本。这是“CSS-tricks.com”，对吧？不是 Javascript 技巧或 PHP 技巧！

我想知道的是，如何将随机数放入 CSS 文件中？

例如

{
font-family:sans-serif;
font-size:2em;
color: white;
background-color: (此处为随机数生成器);
}

更好的方法是结合过渡/变换，这样你就可以在 CSS 中完全实现不断变化的背景颜色 - 无需脚本！

Subin

# 2014年5月16日

请使用https://css-tricks.cn/snippets/javascript/random-hex-color/#comment-192864更新代码

这在所有情况下都有效

Simon

# 2014年6月28日

有人可以帮忙将代码放入 joomla 应用程序中吗？我对 javascript 一窍不通 :-)
谢谢

Chris

# 2014年9月13日

哦！拜托！我偶然发现了这个，我需要它！

我想让菜单项自动更改颜色，以便吸引访问者的注意力。

理想情况下，我可以设置十六进制值、过渡速度和间隔。额外的好处是每个菜单项按顺序更改颜色。

例如：速度：15毫秒，fff=5000毫秒，ff0=250毫秒，fcf=250毫秒，f90=250毫秒

哇！请帮忙？

Vibhor Sharma

# 2018年5月22日

‘#’ + Math.random().toString(16).slice(2, 8).toUpperCase();

Sebastian "Kuchen" Kucharczyk

# 2018年7月28日

对于随机数，使用以下限制就足够了，
这样十六进制结果将始终为 6 个字符长：…

const min = Math.pow(2, 20);
const max = Math.pow(2, 24) – 1;

const color = Math.floor(Math.random() * ( max – min + 1 )) + min;

我代码中最后使用的 random() 例程是“Math.random.integer()”。;-)

Sebastian Kucharczyk

评论永久链接# 2018年10月20日

我错了……min = 0；和 color.padStart(6, ‘0’); ..

Wanderson

# 2019年2月6日

function generateColor () {
return #${Array.from({ length: 6 }, () => randomItem(colorValues)).join('')};
}

LeetCodes

# 2019年6月17日

谢谢这个，我用 8⁸ 简化了一点，这比一组数字更容易记住

Math.floor(Math.random()*8**8).toString(16);

Fred

# 2020年8月21日

这太棒了！

RainCode

# 2021年4月6日

是否可以编辑此代码，以便同时显示彩虹的 7 种颜色（屏幕上 7 个块），但每次运行代码时都在屏幕上生成不同的位置？

Rayan Jaberi

# 2021年7月8日

ٌ为什么在代码中使用 16777215？

jeffreyram

评论永久链接# 2021年9月3日

16777215 是颜色中最高十六进制的十进制数

rgb(255, 255, 255) 的十六进制为“FFFFFF”，转换为十进制数为 16777215。

基本上，它们是在 000000-FFFFFF 之间选择一个随机数

Mnilionic

# 2022年5月1日

生成颜色的函数

function ChanelRand(){
    return Math.floor(Math.random() * (256 + 1));
}
function rgbRand(){
    return [ChanelRand(), ChanelRand(), ChanelRand()];
}
function rgbToHex(rgb) {
    return ((1 << 24) + (rgb[0] << 16) + (rgb[1] << 8) + rgb[2]).toString(16).slice(1);
}
function colorRand(){
    return rgbToHex(rgbRand());
}

var my_hex = '#' + colorRand();
var my_rgb = 'rgb('+ ChanelRand() +','+ ChanelRand() +','+ ChanelRand() +')';

samiullah khan

# 2022年12月22日

const items = [‘A’,’B’,’C’,’D’,’E’,’F’,’1′,’2′,’3′,’4′,’5′,’a’,’b’,’c’,’d’,’e’,’f’]
let x = ”
for(var i = 0; i < 6; i++){
const random = Math.floor(Math.random() * items.length)
x += items[random]
}
console.log(#${x})

丹尼尔·尼德伯格

# 2023年1月19日

我不敢相信这篇超过10年的帖子居然还在谷歌搜索结果中排名前列，我甚至找不到一次HSL这个词。

由于HSL得到了所有浏览器的完全支持（https://caniuse.cn/?search=hsl），使用HSL生成随机颜色非常容易且可控。

完全随机的颜色应该是

const hue = Math.random() * 360;
const saturation = Math.random() * 100;
const lightness = Math.random() * 100;
const randomColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`

诚然，这比最初的一行代码更冗长，但同时也更易读和理解。

但真正酷的是你可以用它做什么。想要省略深色调？只需省略亮度0-25%即可。想要完全饱和？那就设置成这样。所以你可以得到“随机但有一些约束”的颜色。例如

const hue = Math.random() * 360;
const lightness = Math.random() * 75;
const randomColor = `hsl(${hue}, 100%, ${25+lightness}%)`

就会做到我刚才描述的。或者反过来，将饱和度设置为0%以获得灰度。选项是无限的。

我在这里编译了一些示例，包括svg：bit.ly/3kwhYNL。

评论

发表评论 取消回复

发表评论取消回复