I am writing a set of UI widgets for use in web apps, using the excellent KnockoutJS library. One of the more challenging ones has been the colour picker. Rather than do what everyone else has done, I tried to ape the Apple Colour Picker. But this gives us values in HSV, which aren’t that useful for web.
- the declared variables r,g,b are not used at all.
- RGB is defined as an Array, but used as an Object.
- var_r and friends are not declared, and pollute the global namespace.
Plus, more I came across as I worked through the code.
So, I thought I’d clean it up, and make it a bit easier to follow.
Some of the bits that are ‘tricky’ are the use of
toString(16), which converts a number to a base 16 representation, and the
("0" + value).slice(-2), which zero-pads a string.
The algorithm itself is fairly easy to follow: there are seven possible cases for the data conversion. If the
saturation is 0, then RGB is
Otherwise, the value depends on the value of
Math.floor(h/60). There is a simple lookup table (
data), which stores three values based on
value, and then it’s just a matter of picking the correct two to use with the
value, and returning that.