js hsl色阶算法
时间: 2023-07-26 19:21:37 浏览: 60
在 HSL 颜色空间中,色调(Hue)的取值范围为 0 到 360 度,饱和度(Saturation)的取值范围为 0 到 1,亮度(Lightness)的取值范围也是 0 到 1。因此,可以根据需要将 HSL 颜色空间分成若干个色阶,以方便使用。
以下是一个简单的 JavaScript 函数,将 HSL 颜色空间分成 10 个色阶:
```
function getHslColorStep(hueStep = 36) {
let colors = [];
for (let i = 0; i < 360; i += hueStep) {
colors.push(`hsl(${i}, 100%, 50%)`);
}
return colors;
}
let colorSteps = getHslColorStep(36);
console.log(colorSteps); // ["hsl(0, 100%, 50%)", "hsl(36, 100%, 50%)", "hsl(72, 100%, 50%)", "hsl(108, 100%, 50%)", "hsl(144, 100%, 50%)", "hsl(180, 100%, 50%)", "hsl(216, 100%, 50%)", "hsl(252, 100%, 50%)", "hsl(288, 100%, 50%)", "hsl(324, 100%, 50%)"]
```
这个函数接受一个参数 hueStep,表示每个色阶之间的色调差值,默认为 36 度,即每个色阶之间相差一个主色调(如红、橙、黄、绿、青、蓝、紫等)。函数返回一个由色阶颜色值组成的数组,可以根据需要使用这些颜色值来设置页面元素的背景色、文字颜色等。