Color Spaces: The Model at the End of the Rainbow

When I learned about colors in grade school everything started with red, yellow, and blue and getting fancier colors was easy. I mixed some blue into my yellow to get green, or into red to get purple, and so on. After painting enough terrifying “art” for my parents, this made intuitive sense. That is until my mind was blown by the revelation that this wasn’t always true! 

To make the same colors with light instead of paint I had to use red, green, and blue, not yellow. It was until much later when trying harness banks of RGB LEDs that this knowledge became useful. I was struggling to make my rogue diodes look quite the way I wanted when I stumbled into the realization that maybe there was another approach. What did the numbers representing R G and B actually mean? Why those parameters? Could there be others? [Elliot Williams] has written about the importance of gamma correction and adjustment for human perception of color, but we can ask a more fundamental question. Why do we represent color this way at all?

macOS Color Picker

Let’s say you want to light an LED in a rich royal purple. The first step might be to search the web for a color picker to help visualize the color wheel or ask your OS to present one. Clicking around on it’s surface eventually you land at a pleasing point on the disk at the top. Now suppose you want to display this on a WS2812 LED connected to an Arduino. The software library may represents color as a composition of three 8 bit integers; Red, Green, and Blue. Tabbing over in the color picker you can see the RGB value of royal purple as reference and set the LED to show something like {86, 0, 197}. Simply, the red channel is set to 86 counts (in the range 0-255), green to 0 counts, and blue to 197 counts.

To be explicit the RGB values represent three wavelengths of light which our eyes are built to absorb and our brains interpret to create images out of visible light. So the physical outcome would be that three distinct diodes in the RGB LED turn on to the specified intensities. When the emitted light hits the wall above your workbench it reflects into your eyes (or photosensor as the case may be) and you see approximately the target color. If you wanted it to be brighter you would increase the energy being emitted by turning each channel up. As long as the ratios stayed the same so should the color. Great! Your first grade teacher would be proud of your scholastic accomplishments.

When I choose a color on my Mac I see the familiar color picker above by default. Switching back and forth between the first and second tab at the top it is clear the same color is represented two ways; the RGB values on tab two and the dot-and-slider on tab one. Sticking to tab one the disk is obviously the color, and the slider on the bottom represents its “brightness”. If I slide it to the right the disk becomes progressively darker until it turns fully black. If I slide it left the colors become more vibrant until the get as vibrant as the model allows. It’s possible to think of this in another way though. If the color wheel above is taken as a disk on a plane, you can imagine the slider at the bottom as the upward facing Z axis, giving you a cylinder. It would look something like the figure to the left.

An HSB/HSV Cylinder by [gnovice]

It might be obvious now that the picker can represent colors in a variety of ways besides RGB. In fact you’d say that this cylinder represents a different color space. A color space is the mathematical model we use to represent color. Until now we have discussed RGB but clearly there are others; let’s continue with the cylinder.

This color cylinder can represent exactly the same information as a three-integer RGB value can. Every visible color is somewhere on the surface (or inside!) the cylinder. If you took a cross section at the “brightness” level from the first figure you would be left with a disk containing our royal purple again. But in a cylinder it doesn’t really make sense to say royal purple is {86, 0, 197}, because that’s not how you represent coordinates in cylindrical space. (It is how you specify them in a different solid but we’ll get there in a minute). Cylinders can be addressed in, well, cylindrical coordinates by a less familiar 3-tuple of values. To represent any point in a cylindrical volume there is a radius, Z height, and angle. Radius selects a “distance” outward from the center (a radius). Z selects the vertical height. And φ (lowercase phi) selects the angle.

The macOS Color Picker in HSB/HSV

Switching back to the second tab in the macOS color picker we can actually force it to show us the chosen color in this coordinate system! macOS refers to it as “HSB” (Hue, Saturation, Brightness) but it’s also known as the “HSV” color space, for Hue, Saturation, and Lightness. Changing the spinner the interface alters to give us three different sliders with which to traverse our color cylinder. Keeping in mind our 3D cylinder these can be looked at as spatial coordinates. Brightness moves us up and down the cylinder (Z height), saturation moves in and out from the central axis (radius), and hue rotates about the center (φ).

RGB Cube
An RGB Cube by [SharkD]

Now that we’ve worked to the logical end of the cylinder it might have become clear that there is a another way to represent RGB as well. If we take each color red/green/blue as the edge of a 3D shape we end up with a cube. Thus the RGB 3-tuple of values we use to specify color actually represents a single point in a Cartesian coordinate space. And royal purple is still buried in that cube somewhere.

The HSV Cylinder by [SharkD]

HSV makes certain operations which are complex in RGB space trivial. Want to fade through a series of colors at the same saturation and brightness? Easy! Just adjust your hue. Want to dim the same color until it fades to black? Easy! Just decrease brightness, everything else will stay the same.

You, astute reader, may have caught on that there must be yet more ways to represent colors. In printing CMYK (cyan, magenta, yellow, and key AKA black) is common, though it is not a different spatial projection of the same components. CMYK represents colors by the proportions of ink you might use when printing! Quite a neat trick to redefine the chosen units to better fit the task at hand instead of adapting something ill suited. Wikipedia has an unsurprisingly detailed list of color spaces and their uses if you’re interested in more theory than I can provide.

Knowledge of color theory isn’t something that is going to revolutionize your daily life (unless you buy lots of novelty mugs), and this can turn into a strangely deep hole if you really get into exactly what color gamut your new monitor can reproduce. But it turn out that being aware of the spatial nature of color representation makes certain blinkey-LED related tasks easier. At least it can if you know how to apply it. Want to play around with some of these concepts at home? We recommend the FastLED library.

Source link

Leave a Reply

Your email address will not be published. Required fields are marked *