I designed a color picker to see if I could improve on existing color pickers. The current version is more meant as a showcase; it does not have extensive features, and it is not without its flaws.
HSV is the most common color model used for color pickers. It utilizes three parameters: Hue, Saturation, and Value (or Brightness). However, HSV relies on a simplistic design that fails to account for human color perception. To improve this, a perceptually uniform color space can be used.
Oklab is a perceptually uniform color space widely used for its simplicity in converting to and from standard RGB values. Its creator, Björn Ottoson, adapted this space to improve upon HSV, resulting in the Okhsv model.
While Okhsv has advantages over standard HSV, it has a flaw: it does not vary evenly when changing parameters. Because it inherits hue directly from Oklab, lightness and chroma can change rapidly when comparing adjacent hues at constant saturation and value.
To address this, the hues in this color picker have been redistributed. While maintaining the saturation and value calculations of Okhsv, the hue spacing has been adjusted so that color varies evenly. This results in a functional and visually pleasing color wheel.
To calculate these new positions, I opted to utilize Iapbp, a color system that offers slightly more accurate color difference calculations than Oklab. The positions were optimized using a constant saturation of 70% and a constant value of 100%, ensuring good perceptual uniformity across both high and low saturation levels.
The equations for the resulting RGB values were fitted to these new hue positions (t) for faster calculation and are provided below.
Where a, b, and c depend on the channel and hue position (t):
| Channel | Condition (t) | a | b | c |
|---|---|---|---|---|
| Red | < 0.5 | 0.28805 | 0.09890 | 0.58492 |
| Red | ≥ 0.5 | 0.62215 | -0.20310 | 0.73273 |
| Green | < 0.3 | 0.00000 | -0.18915 | 0.65071 |
| Green | ≥ 0.3 | 0.62215 | 0.21030 | 0.66797 |
| Blue | < 0.5 | 0.28805 | -0.12380 | 0.57563 |
| Blue | ≥ 0.5 | 1.00000 | 0.17475 | 0.65491 |