如何更有逼格的用JS控制CSS颜色？ _CSS颜色

文章插图

作者 | Adam Giese
译者 | 王强

css 中有两种颜色模型 RGB 和 HSL，如何用 JAVAScript 控制它们？

背景知识：颜色模型点开这篇文章的你，肯定是想要学习怎样控制颜色的——我们后面就会讲具体操作。但首先，我们需要对 CSS 如何标记颜色有一个基本的认识。CSS 使用的是两种颜色模型：RGB 和 HSL，我们先简单了解一下。
1、RGB
RGB 就是“红色，绿色，蓝色”的简称。这个模型由三个数字组成，每个数字表示其所代表的颜色在最终生成的颜色中有多高的亮度。在 CSS 中，每个数值的范围都是 0-255，三个数值间用逗号分隔，作为 CSS rgb 函数的参数，例如：rgb（50,100,0）。
RGB 是一种“增量”颜色系统。这意味着每个数字越高，最终生成的颜色就越亮。如果所有值都相等就生成灰度颜色；如果所有值都为零，结果为黑色；如果所有值都是 255，则结果为白色。
此外你也可以使用十六进制表示法来标记 RGB 颜色，其中每种颜色的数值从 10 进制转换为 16 进制。例如，rgb（50,100,0）用 16 进制就写成＃326400 。
虽然我个人比较习惯使用 RGB 模型（特别是十六进制），但我也经常发现它不易阅读，也不容易操作。下面来看 HSL 模型。
2、HSL
HSL（https://codepen.io/AdamGiese/full/989988044f3b8cf6403e3c60f56dd612）是“色调，饱和度，光线”的简称，HSL 也包含三个值。色调值对应于色轮上的点，由 CSS 角度值表示，最常用的是度数单位。
饱和度以百分比表示，是指颜色的强度。当饱和度为 100％时颜色最深，饱和度越低，颜色越浅，直到灰度为 0％。
亮度也以百分比表示，指的是颜色有多亮。“常规”的亮度是 50％。无论色调和饱和度值如何，100％的亮度都是纯白色，0％的亮度就是纯黑色。
我觉得 HSL 模型更直观一些，颜色之间的关系更加明显，控制颜色时只要简单地调整几个数字就可以了。
3、颜色模型之间的转换
RGB 和 HSL 颜色模型都将颜色分解为各种属性。要在不同模型之间进行转换，我们首先需要计算这些属性。
除了色调，上面提到的所有数值都可以表示为百分比。就连 RGB 值也是用字节表示的百分比。在下面提到的公式和函数中，这些百分比将由 0 到 1 之间的小数来表示。
这里提一下，我并不会深入探讨这些数学知识；相比之下，我将简要介绍一遍原始数学公式，然后将其转换为 JavaScript 格式。
4、从 RGB 模型中计算亮度
亮度是三个 HSL 值中最容易计算的一个。其数学式如下，其中 M 是 RGB 值的最大值，m 是最小值：

文章插图

亮度的数学式
用 JavaScript 函数写成下面的形式：
const rgbToLightness =（r，g，b）=> 1/2 *（Math.max（r，g，b）+ Math.min（r，g，b））;5、从 RGB 模型中计算饱和度
饱和度仅比亮度稍微复杂一些。如果亮度为 0 或 1，则饱和度值为 0；否则，它基于下面的数学公式计算得出，其中 L 表示亮度：

文章插图

饱和度的数学式
写成 JavaScript：
const rgbToSaturation = (r,g,b) => { const L = rgbToLightness(r,g,b); const max = Math.max(r,g,b); const min = Math.min(r,g,b); return (L === 0 || L === 1) ? 0 : (max - min)/(1 - Math.abs(2 * L - 1));};6、从 RGB 模型中计算色调
从 RGB 坐标中计算色调角度的公式有点复杂：

文章插图

色调的数学式
写成 JavaScript：
const rgbToHue = (r,g,b) => Math.round( Math.atan2( Math.sqrt(3) * (g - b), 2 * r - g - b, ) * 180 / Math.PI);最后 180 / Math.PI 的算法是将结果从弧度转换为度。
7、计算 HSL
上面这些函数都可以包含在同一个功能函数里：
const rgbToHsl = (r,g,b) => { const lightness = rgbToLightness(r,g,b); const saturation = rgbToSaturation(r,g,b); const hue = rgbToHue(r,g,b); return [hue, saturation, lightness];}8、从 HSL 模型中计算 RGB 值
开始计算 RGB 之前，我们需要一些前提值。
首先是“色度”值：