JS中生成随机颜色
介绍
在前端开发时，有时需要生成随机颜色，方便调试。
生成随机颜色
- 生成随机
RGB颜色
使用Math.random()生成随机数，取值范围[0, 1)，乘以256，取整后得到[0, 255]的随机数。
/**
* 生成随机RGB颜色
* @returns string
*/
const randomRGBColor = () => {
const r = Math.floor(Math.random() * 256)
const g = Math.floor(Math.random() * 256)
const b = Math.floor(Math.random() * 256)
return `rgb(${r}, ${g}, ${b})`
}提示 使用floor取整约束输出为整数。
- 生成带
alpha的随机RBG颜色
在生成随机RBG颜色的基础上，添加一个alpha参数，取值范围[0, 1]。
/**
* 生成随机RGB颜色，指定或随机alpha
* @param a number
*/
const randomRGBAColor = (a?: number) => {
const r = Math.floor(Math.random() * 256)
const g = Math.floor(Math.random() * 256)
const b = Math.floor(Math.random() * 256)
const prefix = `rgb(${r}, ${g}, ${b},`
if (a === undefined) {
return prefix + `${Math.random().toFixed(2)})`
}
if (a < 0) {
return prefix + `0)`
} else if (a > 1) {
return prefix + `1)`
} else {
return prefix + `${a})`
}
}注意 alpha有效值的检测。
- 生成十六进制颜色随机
/**
* 生成随机十六进制颜色
* @returns string
*/
const randomHexColor = () => {
// hexStr可以提取为公共函数
const hexStr = (code: number) => {
const str = code.toString(16)
if (code >= 16) {
return str
}
return `0${str}`
}
const r = Math.floor(Math.random() * 256)
const g = Math.floor(Math.random() * 256)
const b = Math.floor(Math.random() * 256)
const color = `#${hexStr(r)}${hexStr(g)}${hexStr(b)}`
return color
}注意 这里需要注意.toString(16)转换为十六进制字符串时，有可能没有两位，要进行补0。
总结
随机颜色主要是使用random方法生成随机数，然后组装成正确的格式赋值给样式。 也可以添加一些参数做约束或更高级的随机数，比如生成两个对比度很强烈的颜色。