vue生产随机颜色 深色

根据提供的引用内容，可以看出vue生产随机颜色的过程主要分为三步：获取随机的HSL数组、将HSL颜色值转换为RGB颜色值、将筛选后的RGB色值拼成数组。如果想要生成深色的随机颜色，可以在第一步获取随机HSL时，将L的范围调整为0.2-0.5之间，即可生成深色的随机颜色。具体实现可以参考以下代码：

// 获取随机的HSL数组
getHslArray() {
var HSL = [];
var hslLength = 34; // 获取数量
for (var i = 0; i < hslLength; i++) {
// 获取随机HSL
var H = Math.random();
var S = Math.random();
var L = Math.random() * 0.3 + 0.2; // 调整L的范围为0.2-0.5之间
var ret = [H, S, L];
// 颜色相邻颜色差异须大于 0.5
if (i > 0 && Math.abs(ret - HSL[i - 1]) < 0.28) {
i--;
continue; // 重新获取随机色
}
ret = 0.7 + ret * 0.2; // [0.7 - 0.9] 排除过灰颜色
ret = 0.4 + ret * 0.4; // [0.4 - 0.8] 排除过亮过暗色
// 数据转化到小数点后两位
ret = ret.map(function(item) {
return parseFloat(item.toFixed(2));
});
HSL.push(ret);
}
this.hslArray = HSL;
},
// 将筛选后的rgb色值拼成数组
getRgbArray() {
var self = this;
if (!self.hslArray.length) return [];
self.rgbArray = self.hslArray.map(function(item) {
let hslItem = self.hslToRgb.apply(this, item);
return "rgb(" + hslItem.toString() + ")";
});
},