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 ( ) { const arr = []; for (let i = 0 ; i < 3 ; i++) { arr.push(Math .floor(Math .random() * 128 + 128 )); } const [r, g, b] = arr; 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() } randomHsl(): number [] { const H = Math .random() const S = Math .random() const L = Math .random() return [H, S, L]; } getHslArray(): number [][] { let HSL: number [][] = [] const hslLength = this .length; for (let i = 0 ; i < hslLength; i++) { let ret = this .randomHsl(); if (i > 0 && Math .abs(ret[0 ] - HSL[i - 1 ][0 ]) < 0.25 ) { i--; continue ; } ret[1 ] = 0.7 + (ret[1 ] * 0.2 ); ret[2 ] = 0.4 + (ret[2 ] * 0.4 ); ret = ret.map((item ) => { return parseFloat (item.toFixed(2 )); }); console .log('ret' , ret); HSL.push(ret); } return HSL; } hslToRgb(H: number , S : number , L : number ): number [] { let R, G, B; if (+S === 0 ) { R = G = B = L; } 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 )]; } 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);