logo

JavaScript 随机颜色有很多方法,在项目中使用如下方法,方法选自网络,并结合实际更改

全部的随机色

1
"#" + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0");

明亮色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
rdmRgbColor() {
      //随机生成RGB颜色
      const arr = [];
      for (let i = 0; i < 3; i++) {
        // 暖色
        // arr.push(Math.floor(Math.random() * 128 + 64));
        // 亮色
        arr.push(Math.floor(Math.random() * 128 + 128));
      }
      const [r, g, b] = arr;
      // rgb颜色
      // var color=`rgb(${r},${g},${b})`;
      // 16进制颜色
      const color = `#${
        r.toString(16).length > 1 ? r.toString(16) : "0" + r.toString(16)
      }${g.toString(16).length > 1 ? g.toString(16) : "0" + g.toString(16)}${
        b.toString(16).length > 1 ? b.toString(16) : "0" + b.toString(16)
      }`;
      return color;
    }


随机亮色,且不和相邻重复的颜色

这个方法我给写成了class,项目是ts,所以也是使用了ts。通过实例化类,访问里面的访问器方法,获取随机生成的颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
class RandomColor {
length: number
hslArray: number[][]
constructor(length: number) {
this.length = length
this.hslArray = this.getHslArray()
}
// 获取随机HSL
randomHsl(): number[] {
const H = Math.random()
const S = Math.random()
const L = Math.random()
return [H, S, L];
}

// 获取HSL数组
getHslArray(): number[][] {
let HSL: number[][] = []
const hslLength = this.length; // 获取数量
for (let i = 0; i < hslLength; i++) {
let ret = this.randomHsl();

// 颜色相邻颜色差异须大于 0.25
if (i > 0 && Math.abs(ret[0] - HSL[i - 1][0]) < 0.25) {
i--;
continue; // 重新获取随机色
}
ret[1] = 0.7 + (ret[1] * 0.2); // [0.7 - 0.9] 排除过灰颜色
ret[2] = 0.4 + (ret[2] * 0.4); // [0.4 - 0.8] 排除过亮过暗色

// 数据转化到小数点后两位
ret = ret.map((item) => {
return parseFloat(item.toFixed(2));
});
console.log('ret', ret);


HSL.push(ret);
}
return HSL;
}

/**
* HSL颜色值转换为RGB
* H,S,L 设定在 [0, 1] 之间
* R,G,B 返回在 [0, 255] 之间
* @param H 色相
* @param S 饱和度
* @param L 亮度
* @returns Array RGB色值
*/
hslToRgb(H: number, S: number, L: number): number[] {
let R, G, B;
if (+S === 0) {
R = G = B = L; // 饱和度为0 为灰色
} else {
const hue2Rgb = (p, q, t) => {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1 / 6) return p + (q - p) * 6 * t;
if (t < 1 / 2) return q;
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
return p;
};
const Q = L < 0.5 ? L * (1 + S) : L + S - L * S;
const P = 2 * L - Q;
R = hue2Rgb(P, Q, H + 1 / 3);
G = hue2Rgb(P, Q, H);
B = hue2Rgb(P, Q, H - 1 / 3);
}
return [Math.round(R * 255), Math.round(G * 255), Math.round(B * 255)];
}
// 合成rgb
get rgbArray(): {} {
console.log('hslArray', this.hslArray);
if (!this.hslArray.length) return []
const rgbArray1 = this.hslArray.map(v => {
const [H, S, L] = v
return this.hslToRgb(H, S, L)
})
return rgbArray1.map(v => {
return {
color: `rgb(${v.toString()})`
}
})
}
}

console.log('randomColor', new RandomColor(8).rgbArray);