使用hsl颜色表示法实现用户自定义主题

孙泽辉

编程

发布于：2021年6月7日

字数：682字

时长：3分钟

次浏览

设备要解放个性，而不是压抑个性。 ——Google

偶尔看到谷歌的Material Design 更新一览，大概说是安卓12上，尊重用户个性化需求，用户能够随时轻松更改色彩。

正好最近新接触了一个概念，hsl颜色表示法，这个表示法更符合人类的直觉。

• h即hue，色相
• s即saturation，饱和度
• l即light,亮度

色相环是一圈颜色，所有颜色都在这个圈里，大体上选某个颜色之后，可以调整亮度和饱和度调节颜色，这种方式很容易调整明暗深浅，对比rgb表示法可以说rgb毫无规律可言，对于我这种贼笨的人来说根本背不下来三种颜色混合之后是什么颜色，hsl表示法背下来色相环就可以熟练的见数识色了，我还得再练练哈哈哈

今天写的这个自定义主题用了对比度和亮度来调整主题色，不同的明暗深浅比如按钮有正常状态、hover、active状态，对应的颜色应该是由浅到深，这时候只需要调整s和l就好了，主题色已经给了。

快速预览：hsl自定义主题 demo源码预览下载- JSRUN

代码实现

大概挑点重点摘录下来

html部分：

<div class="color-picker">
    <span>Pick your color!</span>
    <div class="red" data-color="red"></div>
    <div class="green" data-color="green"></div>
    <div class="orange" data-color="orange"></div>
    <div class="blue" data-color="blue"></div>
    <div class="pink" data-color="pink"></div>
</div>
<div class="container">
    <button>抛砖引玉</button>
</div>

css部分：

.container button {
    
    background-color: hsl(var(--hue), var(--saturation), var(--light));
    border-color: hsl(var(--hue), calc(var(--saturation) - 1%), calc(var(--light) - 2%));
    
}

.container button:hover {
    --light: 44%;
    --saturation: 90%;
}

.container button:focus {
    --light: 44%;
    --saturation: 90%;
    box-shadow: 0 0 0 2rem hsl(var(--hue) 98% 59% / 50%);
}

.container button:active {
    --light: 42%;
    --saturation: 91%;
}

js部分：

const colors = {
    red: 0,
    green: 120,
    orange: 30,
    blue: 240,
    pink: 330
}
const btn = document.querySelector('.container button')
document.querySelector('.color-picker').addEventListener('click', evt => {
    if (!evt.target.dataset.color) return
    const c = evt.target.dataset.color

    btn.style.setProperty("--hue", colors[c]);
})

jsrun在线预览：

hsl自定义主题 demo源码预览下载- JSRUN

详细了解hsl：

UI 小课堂：更符合人类直觉的 HSL 色值模式 新像素_哔哩哔哩_bilibili

material design更新一览：

Material Design 更新一览_哔哩哔哩_bilibili

记录一下js操作css变量的api：

// 获取一个 Dom 节点上的 CSS 变量
element.style.getPropertyValue("--my-var");

// 获取任意 Dom 节点上的 CSS 变量
getComputedStyle(element).getPropertyValue("--my-var");

// 修改一个 Dom 节点上的 CSS 变量
element.style.setProperty("--my-var", jsVar + 4);