# Changing imageStim saturation with slider in PsychoJS
**URL:** https://discourse.psychopy.org/t/changing-imagestim-saturation-with-slider-in-psychojs/25888
**Category:** Online experiments
**Created:** [November 10, 2021, 4:03am UTC](https://discourse.psychopy.org/t/changing-imagestim-saturation-with-slider-in-psychojs/25888 "2021-11-10T04:03:23Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@Aniko\_Kusztor](https://discourse.psychopy.org/u/Aniko_Kusztor)
#### Post date: [November 10, 2021, 4:03am UTC](https://discourse.psychopy.org/t/changing-imagestim-saturation-with-slider-in-psychojs/25888/1 "2021-11-10T04:03:23Z")
[URL of experiment](https://gitlab.pavlovia.org/tlab/dpdr_reprod_ak_v1):
Description of the problem:
Hi,
I would like to do an experiment, in which the participants can change a presented image saturation with a slider. The issue is that I would like to use the original image as 100% saturation level and allow the participants to change the saturation level within the range of 20% to 180%.
My current idea is to hard code in everything in JS but I was wondering if that’s the best solution and thought I would ask if there is an existing solution for this problem and I just could not find it.
Thank you for your input in advance!
Best wishes,
Aniko
---
### Author:  [@Becca](https://discourse.psychopy.org/u/Becca)
#### Post date: [November 10, 2021, 12:10pm UTC](https://discourse.psychopy.org/t/changing-imagestim-saturation-with-slider-in-psychojs/25888/2 "2021-11-10T12:10:19Z")
Something like this might be what you’re looking for? I use builder with code components over hard coding!
[https://run.pavlovia.org/lpxrh6/heart\_opacity\_slider\_demo/](https://run.pavlovia.org/lpxrh6/heart_opacity_slider_demo/)
> **[Rebecca Hirst / heart\_opacity\_slider\_demo](https://gitlab.pavlovia.org/lpxrh6/heart_opacity_slider_demo/)**
>
> Sign In/Register
---
### Author:  [@Aniko\_Kusztor](https://discourse.psychopy.org/u/Aniko_Kusztor)
#### Post date: [November 11, 2021, 12:02am UTC](https://discourse.psychopy.org/t/changing-imagestim-saturation-with-slider-in-psychojs/25888/3 "2021-11-11T00:02:33Z")
Hi @Becca,
Thank you so much for the quick response. Unfortunately the opacity is not quite right for our project. We would definitely need to change the saturation of naturalistic images and we would need it to work in both directions (under/over-saturation). Previously we used the Pillow library in python,specifically the ImageEnhance.Color functions. I know that CSS filters can also achieve this… But I’m not sure how to implement within PSychoJS…
Best wishes,
Aniko
---
### Author:  [@Becca](https://discourse.psychopy.org/u/Becca)
#### Post date: [November 11, 2021, 8:33am UTC](https://discourse.psychopy.org/t/changing-imagestim-saturation-with-slider-in-psychojs/25888/4 "2021-11-11T08:33:49Z")
Hi Aniko,
Opacity is just an example - you can use the same method to manipulate any parameter of the object e.g. RGB values - might that work for what you need to manipulae?
Hope this helps,
Becca
---
### Author:  [@Aniko\_Kusztor](https://discourse.psychopy.org/u/Aniko_Kusztor)
#### Post date: [November 12, 2021, 12:11am UTC](https://discourse.psychopy.org/t/changing-imagestim-saturation-with-slider-in-psychojs/25888/5 "2021-11-12T00:11:56Z")
Hi @Becca
Yes so I have tried using the Foreground Color parameter and it seems to still only change the color of the image on the grey scale which make sense since using the RGB values for the object [1,1,1] makes the image appear with it’s original colors and setting the RGB values to lower numbers makes the image uniformly more grey. As an example:
This is the original image:
This is more grey version of it that is the result of using the Foreground Color parameter:
And this is how a lower and higher saturated version would look like and what I would like to achieve:
---
### Author:  [@Aniko\_Kusztor](https://discourse.psychopy.org/u/Aniko_Kusztor)
#### Post date: [November 12, 2021, 5:26am UTC](https://discourse.psychopy.org/t/changing-imagestim-saturation-with-slider-in-psychojs/25888/6 "2021-11-12T05:26:54Z")
Btw I took a look at the [visual/ImageStim.js](https://psychopy.github.io/psychojs/visual_ImageStim.js.html) source code and realised that there is a color filter implementation in it based on [PIXI](https://pixijs.download/dev/docs/PIXI.html).[filters](https://pixijs.download/dev/docs/PIXI.filters.html).ColorMatrixFilter but it is commented out (line 301 - 308).
---
### Author:  [@Becca](https://discourse.psychopy.org/u/Becca)
#### Post date: [November 15, 2021, 11:23am UTC](https://discourse.psychopy.org/t/changing-imagestim-saturation-with-slider-in-psychojs/25888/7 "2021-11-15T11:23:07Z")
Hi There,
OK - have you tried using the same approach but with HSV color space? so the second value corresponds to image saturation?
Thanks,
Becca
---
### Author:  [@verdi](https://discourse.psychopy.org/u/verdi)
#### Post date: [May 2, 2022, 12:32pm UTC](https://discourse.psychopy.org/t/changing-imagestim-saturation-with-slider-in-psychojs/25888/8 "2022-05-02T12:32:59Z")
Hi Becca,
Thank you for your slider - it is really helpful. I would like to use it to change hue values using the HSV. However, although the opacity works, when I try HSV, nothing is changing when I apply it to my image. Do you know why this might be?
Thank you!
---
### Author:  [@Becca](https://discourse.psychopy.org/u/Becca)
#### Post date: [May 7, 2022, 9:58am UTC](https://discourse.psychopy.org/t/changing-imagestim-saturation-with-slider-in-psychojs/25888/9 "2022-05-07T09:58:26Z")
Hi there,
HSV color space doesn’t yet work out of box online - but here is a link to a workaround that I hope might help. [Hsv color slider - #4 by Becca](https://discourse.psychopy.org/t/hsv-color-slider/26988/4)
Becca
---
### Author:  [@verdi](https://discourse.psychopy.org/u/verdi)
#### Post date: [May 9, 2022, 12:55pm UTC](https://discourse.psychopy.org/t/changing-imagestim-saturation-with-slider-in-psychojs/25888/10 "2022-05-09T12:55:02Z")
Thanks so much! This is really helpful 🙂 I was just wondering - I’ve had a look at your function and compared it to the [color-convert/conversions.js at master · Qix-/color-convert · GitHub](https://github.com/Qix-/color-convert/blob/master/conversions.js) function it was adapted from. I was wondering why you converted from v = hsv[2] / 100 in the original function to v = hsv[2] in your function? Just trying to understand each step in order to double check it 🙂 Thanks a lot for your help.
Secondly, I was wondering if it is possible to use this code to then re-use the function in Python before converting back to JS? Basically, I want to use these functions in Python in an auto-\>JS code component. I’ve seen that [I should define the function at the beginning of the experiment](https://discourse.psychopy.org/t/custom-function-not-defined-when-called-from-a-different-routine/13519), however I still get the ‘can’t find variable’ error.