使用JavaScript调整RGB颜色的饱和度和亮度-css教程-PHP中文网

首页

web前端

css教程

使用JavaScript调整RGB颜色的饱和度和亮度

Jennifer Aniston

Apr 02, 2025 am 04:20 AM

使用JavaScript调整RGB颜色的饱和度和亮度

最近，我一直在探索颜色设计原理，从亚当·瓦森（Adam Wathan）和史蒂夫·施罗格（Steve Schroger）的作品中汲取灵感。他们的建议强调了除了一些美学上令人愉悦的十六进制代码之外，需要进行全面的调色板。构建强大的应用需要更广泛的范围，包括许多灰色和几种原色，每种颜色都具有不同的亮度和饱和度。

我的开发工作流程通常涉及十六进制代码或RGB颜色，但手动调节轻度和饱和度很麻烦。要简化此过程并防止恒定彩色选择器调整的重复应变伤害，让我们探索一些代码以有效操纵颜色。

利用HSL值

HSL（色调，饱和度，轻度）提供了定义网络颜色的优越方法，尤其是当预计手动颜色调整时。 HSL表示色调为数字（0-360），饱和度和轻度为百分比。例如：

 div {
  背景色：HSL（155，30％，80％）；
}

这会产生淡淡的薄荷绿色。要添加深色文字，保持一致性，我们可以调整轻度：

 div {
  背景色：HSL（155，30％，80％）；
  颜色：HSL（155，30％，5％）；
}

这会创建一个与背景协调的黑暗文本。对于通话行动按钮，我们可能会增加饱和度和略低的亮度：

 .call-to-action {
  背景色：HSL（155，80％，60％）；
  颜色：HSL（155，30％，5％）；
}

通过减少饱和度和增加亮度，可以进一步强调文本不太重要的文本：

 div {
  背景色：HSL（155，30％，80％）；
  颜色：HSL（155，30％，5％）；
}

。
  颜色：HSL（155，15％，40％）；
}

HSL的浏览器兼容性和声明性的性质使其比RGB更可取。但是，现有的RGB项目或传统浏览器支持问题可能需要采取其他方法。

利用颜色库

许多彩色操纵库简化了HSL-TO-RGB/十六进制转换，并提供高级配色方案。一些值得注意的例子包括：

Colvertize（Philipp Mildenberger）：具有转换和操纵功能的轻质库。
颜色（Josh Junon）：颜色声明，处理和提取的流利界面。
TinyColor（Brian Grinstead）：处理各种输入类型并提供方案生成实用程序。

CSS-Tricks还提供了有关颜色格式转换的宝贵资源。

颜色网格工具

对于更互动的方法，请考虑颜色网格工具。正如重构UI强调的那样，仅数学精度并不能保证最佳的调色板。我开发的React应用程序Color Grid会根据选定的色调生成一个调色板，提供了100种饱和度和轻度变化。用户可以直接从接口复制十六进制代码或CSS自定义属性。

RGB颜色操纵技术

以下技术着重于RGB颜色处理。

确定RGB轻度

注意：此方法无法说明色调的固有亮度（例如，黄色比紫色更高的亮度）。它测量混合黑色或白色的量。视觉评估对于准确的轻度判断仍然至关重要。

轻度是通过平均最高和最低的RGB值来计算的，然后除以255：

函数getlightnessofrgb（rgbString）{
  const rgbintArray =（rgbString.replace（ / / g，''）.slice（4，-1）.split（'，'，'）。map（e => parseint（e）））;
  const最高= math.max（... rgbintarray）;
  const最低= Math.min（... rgbintarray）;
  返回（最低） / 2/255;
}

饱和RGB而不会影响轻度或色调

饱和RGB提出挑战：灰色缺乏色调信息，而实现纯色则需要50％的轻度。此示例保持轻度：

要饱和，增加最低和最高RGB值之间的差异。保持轻度需要等于0-255限制的最高和最低值的同等增加/减小。可用的饱和范围由以下确定。

灰色（相同的轻度）和255之间的差异。
灰色（相同的轻度）和0之间的差异。

 // ...（从上方开始getlightnessofrgb函数）...

const grayval = getlightnessofrgb（'rgb（205，228，219）'） * 255; // 217
const饱和度= MATH.ROUND（MATH.MIN（255 -GRAYVAL，GRAYVAL））; // 38

// ...（饱和计算的其余）...

中间值的调整与最高和最低值的变化成正比。完整的饱和功能非常涉及并省略了简洁，但核心概念已提出。