Feature: True HSL Colorpicker

[peterkogo]

Really happy I found this library and I am ready to switch from react-color, however I am missing a feature.

My use case might be non-typical: I need a color picker for a RGBW-LED drawing application. An HSL colourspace is quite useful because it translates quite well to LED parameters:

Hue = RGB color mix Saturation = white LED amount Lightness = LED brightness

It would be nice to be able to control these parameters through individual sliders. With the current implementation the selection field for saturation and lightness is combined and thus imprecise on user input.

Proposed Change

Create a ColorPicker that is made up of two individual sliders for saturation and lightness.

Alternatively: Make individuals sliders inside /common accessible for outside use. This way you'd be able to build custom color pickers.

I'd be happy to make a pull request for this with a little guidance on naming. Easy task considering how tidy and pristine :sparkles: the code in this library is. Great job!

[omgovich]

Hi @PeterKey! react-colorful is a microlibrary. Unlike react-color it doesn't aim to support different UIs: just the most popular one.

In case you need a custom picker based on sliders, I would suggest you take any slider library (for example, @radix-ui/react-slider) and customize its look for your needs.

[omgovich]

const YourPicker = () => {
  const [hue, setHue] = useState(0)
  const [saturation, setSaturation] = useState(0)
  const [lightness, setLightness] = useState(0)

  console.log({ h: hue, s: saturation,  l: lightness })

  // Just need some CSS here
  return (
    <div>
      <CustomSlider value={hue} min={0} max={360} onValueChange={setHue} />
      <CustomSlider value={saturation} min={0} max={100} onValueChange={setSaturation} />
      <CustomSlider value={lightness} min={0} max={100} onValueChange={setLightness} />
    </div>
  )
}

[peterkogo]

Alright, that sounds reasonable. The solution you proposed is actually how it's implemented right now - also using radix-sliders for the task :)