CSS中使用 HSL（Hue, Saturation, Lightness） 动态生成色值

前言

HSL（Hue, Saturation, Lightness）是一种直观的颜色表示方法，比传统的RGB模式更符合人类对颜色的感知方式。下面我将详细介绍HSL颜色模式，并提供实际应用案例。

1、HSL颜色模式详解

1.1、 HSL的三个分量

1.1.1、色相（Hue）：表示颜色的基本属性，取值范围0-360度

0°：红色
120°：绿色
240°：蓝色
360°：回到红色

1.1.2、饱和度（Saturation）：表示颜色的纯度，取值范围0%-100%

0%：完全灰色（无色彩）
100%：完全饱和（颜色最鲜艳）

1.1.3、亮度（Lightness）：表示颜色的明暗程度，取值范围0%-100%

0%：黑色
50%：纯色
100%：白色

2. HSL与RGB的比较

3、案例

由 红色 到绿色 分为100份，根据数据的大小进行色值改变
例如：
红色为：hsla(355, 65%, 46%, 1)
绿色为：hsla(148, 100%, 38%, 1)

<template #stationNum-slot="{row}">
    <div class="my-cell-span" :style="{backgroundColor: `hsl(${(120 - row.stationNum * 1.2)}, ${(100 - (100 - 65) / 99) * row.stationNum}%, ${46 - ((46 - 38 ) / 99 ) * row.stationNum}%)`}">
        {{ row.stationNum }}
    </div>
</template>

// 色相（Hue）：(120 - row.stationNum * 1.2)，因为红色 0°：红色，120°：绿色; 或者 ${148 + ((355 - 148) / 99) * row.stationNum }
// 饱和度（Saturation）: ${(100 - (100 - 65) / 99) * row.stationNum}%， 根据基础色的饱和度进行等份换算
// 亮度（Lightness）: ${46 - ((46 - 38 ) / 99 ) * row.stationNum}%
...


const handleReload = () => {
let data = []
for(let i=1;i<101;i++){
    data.push({
        regionName: i,
        stationNum: Math.round((Math.random() * 100) + 1) 
    })
}
tabledata.value = data.sort((a, b) => b.stationNum - a.stationNum)
}

效果图片：这种色值过渡效果明显要比使用RGBA 展示的效果让人看着更舒服

4、HSL的优势和使用场景

4.1、优势

直观性：HSL比RGB更符合人类对颜色的感知方式
易于调整：只需调整一个分量即可改变颜色特性
创建和谐配色：通过固定色相，调整饱和度和亮度可以轻松创建和谐的颜色方案

4.2、使用场景

主题颜色系统：使用HSL可以轻松创建主色、辅助色和强调色
颜色渐变：通过调整色相创建平滑的颜色过渡
响应式颜色：根据主题或状态调整颜色亮度和饱和度
可访问性：通过调整亮度对比度确保内容可读性

总结

HSL颜色模式提供了一种直观的方式来处理颜色，特别适合需要动态生成颜色或创建和谐配色方案的场景。通过固定色相并调整饱和度和亮度，可以轻松创建出一系列协调的颜色，非常适合设计系统和主题开发。