HSL颜色控制及使用示例（Hue-Saturation-Lightness）

1. HSL颜色模型简介

• H (Hue 色相): 色调，0~360度，代表颜色种类，比如0°是红色，120°是绿色，240°是蓝色。

• S (Saturation 饱和度): 饱和度，0%~100%，代表颜色纯度，0%是灰色，100%是最鲜艳的颜色。

• L (Lightness 亮度): 亮度，0%~100%，0%是黑，100%是白，50%是标准颜色亮度。

2. HSL语法格式

hsl(H, S%, L%)

 示例：

hsl(0, 100%, 50%)   /* 红色 */
hsl(120, 100%, 50%) /* 绿色 */
hsl(240, 100%, 50%) /* 蓝色 */

3. HSL颜色调控的优势

• 调整色相就能快速换颜色；

• 调整亮度和饱和度，控制明暗和纯度更直观；

• 适合动画、渐变和动态颜色生成。

4. JavaScript里动态控制HSL颜色示例

function generateColor(hue, saturation, lightness) {return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
}// 例子：动态调整色相
for (let i = 0; i <= 360; i += 60) {console.log(generateColor(i, 100, 50));
}

 5. CSS中用HSL控制颜色示例

.button {background-color: hsl(200, 70%, 50%);color: white;
}
.button:hover {background-color: hsl(200, 70%, 40%);
}

6.综合示例：结合 Vue 的动态HSL颜色控制和 $set

<template><div><divv-for="(item, index) in boxes":key="index":style="{ backgroundColor: item.color, width: '100px', height: '100px', margin: '10px' }"></div><button @click="changeColors">改变颜色</button></div>
</template><script>
export default {data() {return {boxes: [{ color: 'hsl(0, 100%, 50%)' },{ color: 'hsl(60, 100%, 50%)' },{ color: 'hsl(120, 100%, 50%)' }]};},methods: {changeColors() {this.boxes.forEach((box, index) => {// 动态修改色相，确保响应式const newHue = (index * 120 + 60) % 360;this.$set(box, 'color', `hsl(${newHue}, 100%, 50%)`);});}}
};
</script>