4

I'm trying to change the hue/saturation/lightness of a linear gradient on the fly using jQuery. For some reason I just can't wrap my head around how this could be done. I'm using the jQuery gradient plugin here: http://codecanyon.net/item/jquery-gradient-creator/full_screen_preview/2054676. For the HSL selectors, i'm using the plugin here: http://www.virtuosoft.eu/code/bootstrap-colorpickersliders/. The gradient plugin accepts RGB values which I can update then refresh the plugin when the HSL sliders have changed. I guess what i'm confused on is how to change each of the gradient's colors on the fly with hsl. Maybe someone can enlighten me on the general process of how this could be done.

I need it to work similar to this (click hue/saturation when you get to the page): http://www.colorzilla.com/gradient-editor/

Josh Woelfel
  • 1,919
  • 4
  • 17
  • 16
  • Are you looking for a way to convert HSL to RGB? Does this help? -- http://stackoverflow.com/questions/17242144/javascript-convert-hsb-hsv-color-to-rgb-accurately – Luke Mar 04 '14 at 18:45
  • Do you know the ID's of the elements you want a gradient on that will change? You could possibly write up the changes in a CSS stylsheet, then insert a to it in the head. That would save refreshing and scripts running twice. Just a thought. – Timmah Mar 05 '14 at 03:01

1 Answers1

2

In short, you would need to retrieve each of the colors, convert to hsl, make your adjustment, then set the colors in the css gradient with the new colors, like

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

Is that what you were looking for?

Ted
  • 14,757
  • 2
  • 41
  • 58
  • I can retrieve the colors in the gradient and convert them to HSL, however what i'm struggling to understand is how to make the adjustment. For instance, if I have 3 HSL slider for hue/saturation/lightness, they're all defaulted to 0, then I move one of them, how would I merge that into the colors that are currently set in the gradient? I appreciate your response. – Josh Woelfel Mar 09 '14 at 07:26
  • Essentially, you would take the value of that slider and apply it to all the colors, say if you were adjusting the saturation, and the slider value was increased to 10, you would get the hsl values of all the colors, and add 10 to the saturation value of each color. This is assuming you're making a global saturation adjustment to the gradient, not just to a single color in it. – Ted Mar 10 '14 at 14:31