CSS中使用 HSL(Hue, Saturation, Lightness) 动态生成色值

前言

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

1、HSL颜色模式详解

1.1、 HSL的三个分量

1.1.1、色相(Hue):表示颜色的基本属性,取值范围0-360度

:红色
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)

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

相关推荐
南北是北北8 小时前
为什么“以音频为主时钟”最稳,怎么做 A/V 同步
前端·面试
LHX sir8 小时前
巨头撤退,玩家内卷!2025,IoT平台的生死劫与重生路
开发语言·前端·物联网·低代码·ui·前端框架·交互
龙在天8 小时前
Tailwind 类名 记个规律大概,然后去文档查
前端
东北南西8 小时前
实现 TypeScript 内置工具类型(源码解析与实现)
前端·typescript
learning_tom8 小时前
HTML5 标题标签、段落、换行和水平线
前端·html·html5
IT_陈寒8 小时前
Python性能优化:这5个隐藏技巧让我的代码提速300%!
前端·人工智能·后端
Dolphin_海豚8 小时前
【译】Reading vuejs/core-vapor - 中卷
前端·掘金翻译计划·vapor
只与明月听8 小时前
前端缓存知多少
前端·面试·html
Dolphin_海豚8 小时前
【译】Vue.js 下一代实现指南 - 下卷
前端·掘金翻译计划·vapor