javascript随机产生RGB颜色和十六进制颜色值

jaeheng 2020-09-03 09:26:22 0 645

一、随机产生RGB颜色

RGB色彩模式是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是运用最广的颜色系统之一。

该函数可以生成rgb颜色值在css中的表示方式，如果想偏好某种颜色值，可以将其它颜色值的最大值设置的小一些。

/**
 * 随机颜色 RGB
 * @returns {string}
 */
function randomRgb () {
	var r = Math.floor(Math.random() * 256);
	var g = Math.floor(Math.random() * 256);
	var b = Math.floor(Math.random() * 256);
	return 'rgb(' + r + ', ' + g + ', ' + b + ')';
}

二、随机产生十六进制的颜色

css中还有一种颜色表示方式是使用十六进制数值来表示rgb三个颜色，格式是 '#FFFFFF'

以下是两种方式:

随机产生rgb三色值，并转化为十六进制，然后拼接起来
直接随机产生6个十六进制字母和数字，然后拼接起来

/**
 * 随机颜色 十六进制
 * @returns {string}
 */
function randomHex () {
	var r = Math.floor(Math.random() * 256).toString(16);
	var g = Math.floor(Math.random() * 256).toString(16);
	var b = Math.floor(Math.random() * 256).toString(16);
	r = r.length === 2 ? r : '0' + r;
	g = g.length === 2 ? g : '0' + g;
	b = b.length === 2 ? b : '0' + b;
	return '#' + r + g + b;
}

/**
 * 随机颜色 十六进制
 * @returns {string}
 */
function randomHex () {
	var arr = '0123456789abcdef'.split('');
	var len = arr.length;

	var color = '';
	for (var i = 0; i < 6; i++) {
		color += arr[Math.floor(Math.random() * len)];
	}
	return '#' + color;
}