SliderPicker display issue when managing color state as hex or rgb

Hi,

Thanks for your hard work on this library. It is incredibly useful. I am using the `SliderPicker` component and have a minor issue with the 'shade buttons' that appears below the slider. The darkest shade button will never show as selected when clicked, but the 4 lighter shades displayed as selected just fine. I was a little stumped because your example page shows it working fine, until I looked at your source and realized the state for your `SliderPicker` was managed as hsl and not hex or rgb. After switching to my color state to be hsl the darkest shade shows selected as expected.

To clarify, by 'selected' I mean when the shade button is clicked it has the `scale(1.8)` applied to it so that it increases in size compared to the rest of the shades.

Start with the SliderPicker component and its example page, then reproduce the shade-button behavior while managing color state as hex, rgb, and hsl. Compare which state values are recognized when a shade is clicked; done means the darkest shade receives the selected scale(1.8) styling for hex and rgb state as well as hsl.

Written by the indexing model from the issue text.