Wednesday, May 31, 2017

Color Theory: Is there a measurement of "colorfulness"?


I was adding some colors to a Windows application. A column was going to be colored in order to indicate groupings to the user. So in Photoshop i first selected some colors to use. Being mathematically (rather than graphically) inclined, i chose to use the hue from every 60 degrees:


enter image description here



Note: This question is going to be about color theory; and less about graphic design or usability.



Since i was going to have to have Black text (e.g. 13 of 27) over top these colors, i needed them to be fairly light. I know that the L value in Photoshop refers to the human's intrinsic sense of how "light" the color is. I chose a Luma of 90. So with more fiddling in Photoshop i adjusted the L of each color so each had a Luma of 90.


enter image description here



Note: i'm going to use L, or Luma interchangeable. i know there are precise, and separate, definitions for L, L*, Luma, Luminance, brightness, and lightness. Some definitions may be precise, some not. Lets avoid that holy war and just know that i'm using the L thing in Photoshop. And lets assume that two colors with the same L in photoshop will have the same apparent "brightness", or "lightness" to them. Again, forgive brightness and lightness. Yes, i'm inadequate.




As i change the L value, the Hue would change. So it was juggling act. Adjust the L, fudge the hue back to the value i want, adjust up the L, fudge the hue back, fudge the L, fudge the hue:


enter image description here


Eventually i get the hue i want to have the L i want.



The code i was updating also used "gray" as one of the colors that could be shown to the user. I realized that grey doesn't fit into any of my hues. Intrigued, i added to my photoshop doodle. It's simply a "saturation" of zero (which is the S knob in Photoshop):


enter image description here


So then the question dawned on me. I decided to use a Luma=90 for all my colors. This means that visually/psychologically/perceptually all the colors would be equally "bright". I've pinned down a Hue i want, and i've pinned down a Luma i want. But what Saturation do i want?


Ideally, and i don't know if this is a thing, they could all be equally "colorful". i don't want them to all be gray, i want them more colorful than that. And i want them to all the the same "colorfullness" - if that's a word.


So i did what anyone would do, i googled wikipedia colorfullness, and there's an entry:




In colorimetry and color theory, colorfulness, chroma, and saturation are related but distinct concepts referring to the perceived intensity of a specific color.



  • Colorfulness is the degree of difference between a color and gray.

  • Chroma is the colorfulness relative to the brightness of another color that appears white under similar viewing conditions.

  • Saturation is the colorfulness of a color relative to its own brightness.


Though this general concept is intuitive, terms such as chroma, saturation, purity, and intensity are often used without great precision, and even when well-defined depend greatly on the specific color model in use.



And then the article devolves into CIE, Lab, Luv. And i don't know what i want.



I went back to Photoshop, and started to just increase the "saturation" knob of each color. For a given hue, and the fixed luma, i increased the saturation in 5% increments (having to do fiddling along the way):


enter image description here


But at some point, the colors cannot "saturate" anymore without losing Luma:


enter image description here


And some colors can reach all the way to the end with S=100 and L=100:


enter image description here



In the same way the Luma defines the perceived "lightness" of a color:



is there a metric for the perceived "colourfulness" of a color?




Is there such a metric? Is the Saturation in Photoshop's HSB color model a perceptual one?


i noticed one snippet in the wikipedia article that's easy enough for me to understand: use the hypotenuse of a and b:


enter image description here


i could do that, and figure out which of my color chips have the same "Chroma".



In the end, in the real application, i used a color wheel centered around blue 210, and avoided green (in case the user things green means good), and use complimentary colors as much as possible.


enter image description here


But i still want to know about the color theory of "colorfullness".




Assuming the magnitude of an ab vector in Lab color model, i.e.:



  • colorfulness = Sqrt(a2 + b2)


i calculated the chroma lengths of various colors:


enter image description here


Colors of different hues with approximately the same "chroma lengths" look to me like they have the same "colorfulness". If nothing else comes up, i might go back and recalculate all my existing constants using this formula.


Otherwise it will nag at me.



Answer



After doing a lot of reading, turns out there is a useful metric of "colorfulness".



The hint came from the wikipedia page i cited, which mentions the L*C*h* color space. The L*C*h* is a variation of the L*a*b* color space.


Take the Lab color space you are used to from Photoshop:


enter image description here


Where a and b are cartesian coordinates:


But you can also represent colors on that plane using polar coordinates.


Rather than a pair of cartesian coordinates:



enter image description here


coordinates, it can be a pair of polar coordinates




enter image description here


So that C* is a measure of Chroma and h is a hue angle.


The formula to convert a, b into a C* length is high school pytheogrean theory:


enter image description here


The defined hue angle doesn't quite match the HSL/HSB hue angle. But it works out well enough to base a color model off it:


enter image description here



But the jist of what i learned is that the distance from the center (a=0, b=0) makes the color more colorful.


I also learned that some colors in the Lab color picker are outside the human ability to perceive as color; and so are not actually colors. There is a GiMP LCh color picker, and it points out the colors that are out of human gamut:


enter image description here



No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...