[Bug]: Saturation (HSV) values not reflected properly on colour-area

[saumyagaikwad99]

trafficstars

Code of conduct

• [X] I agree to follow this project's code of conduct.

Impacted component(s)

Venus

Expected behavior

No response

Actual behavior

We are facing some issue on color area with HSV format. It seems like there is some issue when we apply saturation to the color area. Please refer following test case to reproduce the issue: when we try to apply hsv(360,1,88), saturation value is wrong in the color area it is on the right edge.

Screenshots

What browsers are you seeing the problem in?

No response

How can we reproduce this issue?

1. Go to '...'
2. Click on '....'
3. Scroll to '....'
4. Check console
5. See error

Sample code that illustrates the problem

https://studio.webcomponents.dev/edit/6whdj26SRWmMX7B2uO9E/src/index.stories.js?p=stories

Logs taken while reproducing problem

No response

[Westbrook]

See #2782

[blunteshwar]

This is happening because in hsv format the values are in degree , %, % respectively and when you provide color value as hsv(360,1,88), the color library assumes 1 as 100%. Apparently for any value x∈[0,1] it converts it in percentage and assumes accordingly. We are looking into various options already available with other teams and will get back to you shortly.

[blunteshwar]

Apparently the color library which we are using(tinycolor) does not consider it as a bug rather a feature. So till the time we figure out some alternative for this, users can leverage this approach :- for hsv(360,1,88) use hsv(360,1.00001,88) Since for any value x∈[0,1] it converts it in percentage whenever the value is 1 users can write is like 1.00001 and values will be correctly reflected.