动态更改渐变色的颜色

Question

我正在尝试使用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/。

- Josh Woelfel

---

你正在寻找将HSL转换为RGB的方法吗？这个链接有帮助吗？-- https://dev59.com/L2Qm5IYBdhLWcg3w6Cer - Luke

你知道要改变渐变的元素的ID吗？你可以在CSS样式表中编写更改，然后在头部插入一个<link>。这样可以避免刷新和脚本运行两次。只是一个想法。 - Timmah

Answer 1

简而言之，您需要检索每种颜色，将其转换为HSL，进行调整，然后使用新颜色在CSS渐变中设置颜色，例如：

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

这是您在寻找的吗？

- Ted

---

我可以获取渐变中的颜色并将它们转换为HSL，但我不太明白如何进行调整。例如，如果我有3个HSL滑块用于色相/饱和度/亮度，它们都默认为0，然后我移动其中一个，那么我该如何将其合并到当前设置在渐变中的颜色中呢？感谢您的回复。 - Josh Woelfel

基本上，您需要获取滑块的值，并将其应用于所有颜色。例如，如果您正在调整饱和度，并且滑块值增加到10，则会获取所有颜色的HSL值，并将每个颜色的饱和度值增加10。这是假设您正在对渐变进行全局饱和度调整，而不仅仅是其中的单个颜色。 - Ted