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

相关推荐
红尘散仙13 小时前
使用 Tauri Plugin-Store 实现 Zustand 持久化与多窗口数据同步
前端·rust·electron
沙白猿13 小时前
npm启动项目报错“无法加载文件……”
前端·npm·node.js
tyro曹仓舒13 小时前
彻底讲透as const + keyof typeof
前端·typescript
蛋黄液13 小时前
【黑马程序员】后端Web基础--Maven基础和基础知识
前端·log4j·maven
睡不着的可乐13 小时前
uniapp 支付宝小程序 扩展组件 component 节点的class不生效
前端·微信小程序·支付宝
前端小书生13 小时前
React Router
前端·react.js
_大学牲13 小时前
Flutter Liquid Glass 🪟魔法指南:让你的界面闪耀光彩
前端·开源
Miss Stone13 小时前
css练习
前端·javascript·css
Nicholas6814 小时前
flutter视频播放器video_player_avfoundation之FVPVideoPlayer(二)
前端
文心快码BaiduComate14 小时前
一人即团队,SubAgent引爆开发者新范式
前端·后端·程序员