I'm writing a colourpicker in Javascript and having some degree of progress. However, I've noticed that the algorithm I am using to generate the colour space could be improved in order to fill the space more efficiently.
I'm using HSL to generate the current map and below is an example.
I'm increasing lightness along the Y-axis and increasing saturation along the X-axis but I've noticed that other colour pickers seem to use a more efficient model, such as the one below.
(source: webresourcesdepot.com)
My colourspace has a bias to white colours and could be used more efficiently to show red colours.
On the second space, saturation seems to increase across the X-axis and lightness increases along the Y-axis, however the top right corner is fully saturated without being fully light.
How is the second space generated?
Use HSB instead of HSL if you want your color picker to behave like the one you showed.