Color picker values not matching preview color when nearly white or black

[bbag]

Describe the bug

There seems to be a small region along the left and bottom edges (roughly 3 or 4 pixels wide) of the color picker component's grid where the preview color's hex value (seen in the browser's dev tools) does not match the color value of the component (seen in the UI at the bottom of the component).

The component's color value seems correct, but the preview color is incorrect. This applies to both the drag handle's color itself and the preview color at the bottom next to the hue slider.

I haven't been able to dig into it far enough yet to know for sure what the cause is, but it seems like it's happening in the component's getHexString() function. Perhaps this is actually an issue with how TinyColor is calculating hex value's based on HSB colors?

To Reproduce

Steps to reproduce the behavior:

1. Open a Shoelace color picker component, and select the "hex" value display at the bottom for easier comparison later.
2. Position the drag handle all the way to the left edge of the color picker grid (it can have any lightness/darkness, but must have no saturation). For example, perfectly white (#FFFFFF) in the top-left corner will work.
3. Move the drag handle 1 pixel to the right to increase its saturation.
4. The visible change in color should be almost unapparent, but notice the color preview become much darker/more saturated.
5. Open the browser dev tools, and notice that the computed hex value of the preview is different than the color value at the bottom of the component's UI.
6. Continue moving the handle's position 1 pixel to the right and notice the preview color continue to get drastically more saturated.
7. Continue moving it 1 more pixel. At this point, roughly 3-4 pixels from the edge, the color should be almost fully saturated for whatever its current brightness is.

Alternatively, using the keyboard:

1. Choose any color along the left or bottom edges of the color picker grid (any hue is fine, as long as the color is fully desaturated).
2. Using the keyboard, tab to focus the color picker handle within the color picker grid.
3. Press the right arrow key (or up arrow key, if starting from #000000 at the bottom edge) one time to move the handle roughly 3 pixels.
4. Notice the color in the preview does not match the value at the bottom of the component's UI.

Alternatively, manually entering values:

1. Manually enter #F5F4F4 in the color picker component's hex value.
2. Open the browser dev tools, and inspect the color picker preview element to see that its --preview-color custom property (i.e. its background color) is set to #f59191ff.

Demo

Any color picker component in the Shoelace docs will work for reproducing this.

Screenshots

Browser / OS

• OS: Windows 10, Windows 11, Android
• Browser: Chrome (v119) & Firefox (v119) on each OS

---

I'm excited to use Shoelace in an upcoming project but noticed this little bug. Just wanna say thanks to the Shoelace team though, this library is amazing. 😁