Introduction
Here we are using a dithering method to analyze the differences between three color spaces, namely HSL, Okhsl, and CIELch. The strategy being used is similar to that deployed here, but there is one major difference. Here, when we dither our colors, we are not anihilating any specific one, but rather, all of them. Borrowing the notation from that post, we have that for every color $c$:
$$P(\hat{c}=c_\theta|t) = 0.5$$ $$P(\hat{c}=c_{-\theta}|t) = 0.5$$
where $c_\theta$ is the color which makes angle $\theta$ with $c$ and the center of the circle. Essentially, every color may be displayed as the color at its same distance from the center but $\pm\theta$.
We’ll see that this ends up being a useful way to see some major differences between a “perceptually uniform space” such as Okhsl, and ones which are not designed that way. I’d highly recommend reading more about Okhsl here. In particular, we contrast Okhsl against HSL, which is a cylindricalization of the RGB space and one of the most common color spaces chosen to use for color pickers. It is similar to HSV as well. Meanwhile, CIELch is a cylindricalization of the CIELab space, the most famous color space used for describing colors precisely, often being the space used to make conversions between more complicated spaces. How intuitive are these spaces?
Shader
The following represent the color spaces of HSL, OKLab, and CIELch, respectively.
▶️Controls
- ▶️/⏸ Button: Controls time, causes noisiness to evolve over time and smoothens dither
- Slider: Controls the angle at which a new hue is chosen for the dither
- Slider: Displays the color wheels at difference luminances
- Slider: Changes the size of the resolution of the colors
Discussion
The thing to note is how no latent structures in the space become more apparent when changing the slider value for the Okhsl space. Meanwhile, for HSL we see 3/6 pinwheel-like bands rotating, which is likely due to its luminance dimension not being actually reflective of an intuitive luminance dimension. High/maxed out values have especially interesting effects when looking at the CIELch space. Here I have no added analysis, I just think it is beautiful and interesting :).