The new color picker fails to select colors properly

[Piotr_Joniec]

Short description of issue

New color picker in the theme editor fails to interpolate colors properly

Reproduction steps

1. Select color from the top middle area of the color picker square.
2. Observe incorrect hex color.

Additional info

See screenshots for explanation.

What type of topic is this

Bug report

Upload screenshot(s) of issue

[Piotr_Joniec]

More issues:

1. When entering #FF8080 directly into the color input field, the color picker is unable to select that color:

2. #884444 should be located around the center of the color picker, but it ends up towards the left side, which suggests that there’s something wrong with this implementation. You can also notice that the color under the circle on the color picker is different from the color swatch below.

Correct implementation:

Please look into this as certain colors are literally impossible to select with this new color picker (#FF8080 being one example). For a given hue, the color square does not cover the full expected range of saturation/value combinations.

[Piotr_Joniec]

I found another critical bug which freezes the whole theme editor, making it unable to save changes leading to lost work:

This happens when removing the hex color from the input and then trying to immediately afterwards change the hue of the color. It doesn’t happen every time, but when it does it’s really bad because you are unable to save your changes as the whole theme editor gets frozen.

I’ve replicated this bug both on Chrome and Firefox on Mac OS.

[Antoine-Shopify]

Thanks for the detailed report @Piotr_Joniec . We’re taking a look right away!

[Cvitko]

Also it is very difficult to pick a white color #FFFFFF (or black) you have to be pixel perfect to hit corner. The cursor is not following movement outside of color picker like it did in react color picker.

[Antoine-Shopify]

Hi @Cvitko, are you running into this on the mobile app or on desktop?