动态更改渐变的颜色答案

【问题标题】：Changing the color of a gradient on the fly动态更改渐变的颜色
【发布时间】：2023-04-06 20:23:01
【问题描述】：

我正在尝试使用 jQuery 动态更改线性渐变的色调/饱和度/亮度。出于某种原因，我无法理解如何做到这一点。我在这里使用 jQuery 渐变插件：http://codecanyon.net/item/jquery-gradient-creator/full_screen_preview/2054676。对于 HSL 选择器，我在这里使用插件：http://www.virtuosoft.eu/code/bootstrap-colorpickersliders/。渐变插件接受 RGB 值，我可以更新这些值，然后在 HSL 滑块更改时刷新插件。我想我很困惑的是如何使用 hsl 动态更改每个渐变的颜色。也许有人可以告诉我如何做到这一点的一般过程。

我需要它与此类似（进入页面时单击色相/饱和度）： http://www.colorzilla.com/gradient-editor/

【问题讨论】：

您是否正在寻找一种将 HSL 转换为 RGB 的方法？这有帮助吗？ -- stackoverflow.com/questions/17242144/…
你知道你想要渐变的元素的 ID 会改变吗？您可以在 CSS 样式表中写下更改，然后在头部插入一个。这将节省刷新和脚本运行两次。只是一个想法。

标签： javascript jquery css plugins

【解决方案1】：

简而言之，您需要检索每种颜色，转换为 hsl，进行调整，然后使用新颜色设置 css 渐变中的颜色，例如

$(myelement).css('background', 'linear-gradient(to bottom, '+ newColor1 +' 0%, ' + newColor2 +' 100%);

这就是你要找的吗？

【讨论】：

我可以检索渐变中的颜色并将它们转换为 HSL，但我很难理解如何进行调整。例如，如果我有 3 个用于色相/饱和度/亮度的 HSL 滑块，它们都默认为 0，然后我移动其中一个，如何将其合并到当前在渐变中设置的颜色中？感谢您的回复。
本质上，您将获取该滑块的值并将其应用于所有颜色，例如，如果您正在调整饱和度，并且滑块值增加到 10，您将获得 hsl 值所有颜色，并将每种颜色的饱和度值加 10。这是假设您正在对渐变进行全局饱和度调整，而不仅仅是对其中的一种颜色。