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

文章插图

色调区间的数学式

接下来，我们设一个“x”值，它将用作中间（第二大）组件值：

文章插图

临时“x”值的数学式
我们再设一个“m”值，用于调整各个亮度值：

文章插图

亮度匹配的数学式
根据色调区间值，r，g 和 b 值将映射到 C，X 和 0：

文章插图

【如何更有逼格的用JS控制CSS颜色？】RGB 值的数学式，不考虑亮度
最后，我们需要映射每个值以调整亮度：

文章插图

用 RGB 来解释亮度的数学式
将上面这些都写到 JavaScript 函数中：
const hslToRgb = (h,s,l) => { const C = (1 - Math.abs(2 * l - 1)) * s; const hPrime = h / 60; const X = C * (1 - Math.abs(hPrime % 2 - 1)); const m = l - C/2; const withLight = (r,g,b) => [r+m, g+m, b+m];if (hPrime <= 1) { return withLight(C,X,0); } else if (hPrime <= 2) { return withLight(X,C,0); } else if (hPrime <= 3) { return withLight(0,C,X); } else if (hPrime <= 4) { return withLight(0,X,C); } else if (hPrime <= 5) { return withLight(X,0,C); } else if (hPrime <= 6) { return withLight(C,0,X); }}9、创建颜色对象
为了便于在操作属性时访问，我们将创建一个 JavaScript 对象。把前面提到的这些函数打包起来就能创建这个对象：
const rgbToObject = (red,green,blue) => { const [hue, saturation, lightness] = rgbToHsl(red, green, blue); return {red, green, blue, hue, saturation, lightness};}const hslToObject = (hue, saturation, lightness) => { const [red, green, blue] = hslToRgb(hue, saturation, lightness); return {red, green, blue, hue, saturation, lightness};}10、示例
我强烈建议你花些时间看看这个示例：
https://codepen.io/AdamGiese/full/86b353c35a8bfe0868a8b48683faf668
从中了解调节各个属性时其它属性如何发生变化，这样能帮助你更深入地了解两种颜色模型是如何对应的。
颜色控制现在我们已经知道怎样在颜色模型之间进行转换了，那么就来看看该如何控制这些颜色！
1、更新属性
我们提到的所有颜色属性都可以单独控制，返回一个新的颜色对象。例如，我们可以编写一个旋转色调角度的函数：
const rotateHue = rotation => ({hue, ...rest}) => { const modulo = (x, n) => (x % n + n) % n; const newHue = modulo(hue + rotation, 360);return { ...rest, hue: newHue };}rotateHue 函数会接受一个旋转参数并返回一个新函数，该函数接受并返回一个颜色对象。这样就可以轻松创建新的“旋转”函数：
const rotate30 = rotateHue(30);const getComplementary = rotateHue(180);const getTriadic = color => { const first = rotateHue(120); const second = rotateHue(-120); return [first(color), second(color)];}用这种方式，你也可以编写加深或提亮颜色的函数——或者反过来，减淡或变暗也行。
const saturate = x => ({saturation, ...rest}) => ({ ...rest, saturation: Math.min(1, saturation + x),});const desaturate = x => ({saturation, ...rest}) => ({ ...rest, saturation: Math.max(0, saturation - x),});const lighten = x => ({lightness, ...rest}) => ({ ...rest, lightness: Math.min(1, lightness + x)});const darken = x => ({lightness, ...rest}) => ({ ...rest, lightness: Math.max(0, lightness - x)});2、颜色谓词
除了颜色控制以外，你还可以编写“谓词”——亦即返回布尔值的函数。
const isGrayscale = ({saturation}) => saturation === 0;const isDark = ({lightness}) => lightness < .5;3、处理颜色数组
过滤器
JavaScript [] .filter 方法会接受一个谓词并返回一个新数组，其中包含所有“传递”的元素。我们在上一节中编写的谓词可以用在这里：
const colors = [/* ... an array of color objects ... */];const isLight = ({lightness}) => lightness > .5;const lightColors = colors.filter(isLight);排序
要对颜色数组进行排序，首先需要编写一个“比较器”函数。此函数接受一个数组的两个元素并返回一个数字来表示“赢家” 。正数表示第一个元素应该先排序，而负数表示第二个元素应该先排序。零值表示平局。
例如，这是一个比较两种颜色亮度的函数：
const compareLightness = (a,b) => a.lightness - b.lightness;