Question

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/

Was it helpful?

Solution

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?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top