HCG, OKHCG, & "color-blind" color-spaces

[SoftMoonWebWare]

Aloha again!

Thank y'all so much for developing this project. Y'all are really paving the way forward with digitally described color. It has been my go-to source for developing my own project. My project is over 10 year old, and a complete overhaul to use the Color.js class was not is store. But your "flagship model" of the "Swiss-Army-Knife" of color-libraries certainly is impressive.

Years ago I "discovered" what I call the HCG (Hue, Chroma∝, Gray) color-space. It is mapped to the an RGB color-space, and is a simple interpolation of a "fully chromatic hue" (same as fully saturated color, with full brightness (a.k.a. value) in HSB/HSV, where one RGB channel is 100%, another is 0%, and the third varies) with a "grayscale tone" (where all RGB channels are equal). It is a super-simple, super-fast, easy-to-calculate conversion to-from RGB.

Chroma∝ here differs a bit from Chroma in LCh and similar color spaces, in that its mathematical percentage value is relative to the maximum Chroma for any given hue in the RGB color-space it is mapped to, i.e. "digital" or "mathematical" chroma, as opposed to "perceived" chroma. So HCG(120deg, 100%, 50%) (CSS: lime) is more vibrant (has more "perceived" Chroma) than HCG(240deg, 100%, 50%) (CSS: blue).

I chose this term "Chroma" based on what Wikipedia taught me about color-spaces, back in circa 2011 or 2012. Somewhere it mentioned the term, but I didn't yet know about "exotic" color-spaces like Hunter Lab or CIE L*a*b*, or the Munsell Color System. I was really still trying to understand HSL & HSV, and I wanted a term that differentiated HCG from them. From what I remember Wikipedia telling me back then, HSL & HSV are based on "real-life" observations (i.e. "value" or "brightness" is the brightness of a light (D65?) shining on a white paper with a "water-color" painted on - how watery ? - that's saturation). Chroma∝ is purely in the digital realm of computer displays. And "Gray" was chosen for the same reason.

Chroma∝ is primary, unlike saturation, value (brightness), or lightness. At 100% Chroma∝, Gray does not matter. At 0%, the Hue does not matter. I have found over the years it is this property that makes it so very useful, digitally, mathematically, AND intuitively,

I "discovered" this color-space by trying to find a mathematical algorithm to map the "websafe colors" (yea, back in the day...). I needed a color-picker for my website app, and MSIE6 was still king back then, but MSIE9 was out and supported the canvas API. After "discovering" this algorithm, I realized it to be a legit color-space. From that came the RainbowMaestro color-picker, a legitimately different, yet familiar graphical color-picker, that's not just "weird" like some other "different" color-pickers I've seen out there through time.

I realized that this color-space, HCG, was (must be!) very old, as (as memory serves) Wikipedia showed me a picture of "one of the original computerized color-pickers" with the rainbow-ring and the triangle in the middle; the triangle has one tip fully-chromatic∝, one tip is black, and one tip is white, with a gradient from each tip to the others and throughout the middle. Just no one had "published" it. I've seen that color-picker described multiple times as being an implementation of HSV, HSL, or HWB, but none are correct: those values must be converted or otherwise manipulated to map them to a triangle. HCG is that conversion mapping.

From there, my color-picker app evolved, expanded, etc. I've found HCG to be the go-to color-space for many different needs:

• I created a "websafe table interpolator" to interpolate the "Rigden colorblind websafe colors". No other color-space could do this, as I understand it, but maybe I'm wrong.
• I use it to find "closest colors" in the "Color Thesaurus" in my color-picker app. Back in the day, no other color-space was available to do this; these days I'm ready to expand it at the users-choice to use LCh (and similar) to go beyond sRGB, P3, etc.
• I use it to let end-users "sort by color" in the "named-color" tables in the color-picker app. Again, I'm ready to expand that to use LCh (and similar) as an option for end-users. (as of the time of this writing, this update has not yet been released...it will be in a few days)

But as an end-user myself, I find it to be the go-to color-space in the "Color-Space Lab" where I can manipulate a color using sliders in many different color-spaces at once.
"I want more or less color"
or
"I want it darker or lighter"
Except for fully-chromatic colors and grayscale tones, HSL and HSV require you manipulate 2 sliders, not one.

Then along came the so-called "OK" color-spaces. Much better hue-mapping in less-chromatic colors. So very useful! Only to incorporate it into my color-picker project..... But I needed that HCG mapping to map the "OK" colors to the color-picker's "triangle"..... So from OKHSV was born OKHCG.

Really, if I didn't think these color-spaces were so useful, I wouldn't bother y'all with them. But I do. If you do, maybe you should incorporate them into Color.js ???

And how about color-blind support? What is picking a color without color-blind support? A guess.
Maybe you should incorporate that conversion tool into the Swiss-army-knife y'all got.

You can find the code for HCG and OKHCG in my RGB_Calc repo.
You can find the code for the "Rigden color-blind websafe table interpolator" in its own repo. I''m not color-blind and don't knowingly know anyone who is, but it seems to me this color-blind converter works better than the Wickline one below....especially in the "yellow" hues. That's not me, that's Rigden's colorblind table, based on real-life trials, not a mathematical approximation.
I also adapted "scratchdot's" port of the Wickline colorblind conversion algorithm in its own repo, but check the originals.
And you can find all this put together in one project that demonstrates it all: the MasterColorPicker. I didn't originally set out to create a "Master" of color-pickers. It just ended up that way. Now I'm stuck trying to keep it up to date so it continues to live up to its name !!!! (I just want to move on to other pending projects, but you meddling kids ☺☻ keep forcing me to expand it ... BTW, what the hell is Jzazbz ... back to school...and more updates...)

https://github.com/SoftMoonWebWare/RGB_Calc-color-space-converter

https://github.com/SoftMoonWebWare/Rigden-color-blind-websafe-interpolator

https://github.com/SoftMoonWebWare/skratchdot.Wickline.colorblind_converter

https://github.com/skratchdot/color-blind

http://colorlab.wickline.org/colorblind/colorlab/engine.js

https://github.com/SoftMoonWebWare/MasterColorPicker

[facelessuser]

There is a lot of stuff here, so I'm not exactly sure what is being asked.

1. Color.js could be extended to support other color spaces. It is already being done to support what would be considered exotic to the CSS spec. A user could write their own color space and extend as required.

2. Color Vision Deficiency simulation could be added. That decision would need to be made for the project. I'm not sure what algorithm skratchdot uses and whether or not they apply it correctly or not, but if this were to be done, I would recommend the Brettel 1997 method (I think that link is dead, I'd have to hunt down a new, valid one) or the Viénot 1999 method. The Brettel, IIRC, is the only one that models Tritanopia in a reasonable manner. The Machado 2009 approach is good for Anomalous Trichromacy at varying levels, at least for Protans and Deutan. Machado's results are questionable for Tritans though as the study did not focus on that deficiency.

3. Learn more about Jzazbz here: https://opg.optica.org/oe/fulltext.cfm?uri=oe-25-13-15131&id=368272. In short, it is a perceptual color space. It uses some similar logic to ZCAM, albeit far more simple and easy to compute.

[facelessuser]

I think this is a valid link for Brettel: https://vision.psychol.cam.ac.uk/jdmollon/papers/Dichromat_simulation.pdf

[SoftMoonWebWare]

no questions, just ideas....
Why I haven't been able to find other color-blind simulation algorithms in the past?
This info is super-valuable to me. Thank You
I am not in the position to spend the time to fully understand how this project works internally, nor do I want to spend time learning "hooks". I have spent days already trying to figure out where the "entrance" and "exit" points are in this code base, but I don't do Node.js (for what I say is good reason, but that's another story, and I may embrace it soon anyway), and I still haven't found such, so I really don't understand this project overall enough to add to it.
I just say HCG and OKHCG are awesome color-spaces worth at least looking at, likely worth adding, in my opinion. But that's my opinion. Do what you like with them.
Thanks again, y'all. Find links in my code to yours ..... ☻

[facelessuser]

One problem that you see with some CVD (color-blind) simulation is it isn't applied in linear light. There are a couple of other algorithms out there as well, Vischeck and some others. I only noted what I thought would make sense to possibly implement. I think the Brettel is slower but has the best tritan representation, Vienot is faster, and Machado is better for percentages of color blindness (but not so much for tritans).

The HCG (seems it was renamed to HCV) doesn't seem like a difficult space to apply to sRGB. I'm not exactly sure how it is applied to the OK series as it seems it requires the RGB space, not Lab or even HSV. I haven't tracked down where you implement OKHCG yet.

I just say HCG and OKHCG are awesome color-spaces worth at least looking at, likely worth adding, in my opinion. But that's my opinion.

Yep, understood. I was speaking generally to not just you, but anyone who reads this, as I'm sure not every color space would be implemented here, so if there are some that are decided against, users should be able to implement them locally, but I get what you are saying.

[facelessuser]

I see how HCG is being applied to Okhsv now. Essentially you are taking the relation of C vs V and S to calculate C which is then used to calculate the G value. This assumes that the Okhsl and Okhsv have a similar relation to traditional HSL and HSV, I don't know if that is true or not, but for the sake of the conversion it is being assumed true.

I see you actually use HSV -> HWB -> HCG to get there in your source, but it seems like it would be simpler to go from HSV -> HCG, but what you are doing works fine as well.

I guess this is the repo for the original space for anyone interested: https://github.com/scrapjs/hcv-color.

I can't say if Color.js would find the space popular enough to want to include or not, and OKHCG may have a more difficult time getting implemented as it would likely be a bit more obscure, but the implementation would be pretty simple.

I don't know if we have explicit examples of how one would implement a user color space and include it, I may at least look into a simple example to demonstrate regardless. I'll post back if I get some time to demonstrate how it could be done here.

[SoftMoonWebWare]

Using the "YinYang NíHóng" color-picker in MasterColorPicker, which is just a fancy implementation of the traditional "square" canvas that shows HSV & HSL as well as HCG, you can switch back and forth between HSV and OKHSV, as well as between HCG and OKHCG, and see how they match. This is my "proof of concept". HSL and OKHSL do not match; with HSL the "fully chromatic" hue is centered at the top of the graphic, whereas with OKHSL, it varies in position across the top based on "perceived" lightness . Same "problem" with HSLᵤᵥ; that's why there is no HCGᵤᵥ! (but I got a little of that itchin' goin' on to figure out how to calculate the max chroma in a given (sRGB) gamut, so I could create HSVᵤᵥ and then HCGᵤᵥ. That math is a little bit beyond my education level, though, it seems, so more schooling!)

HWB and HCG are really just different ways of saying the same thing. Gray is just the mix of white+black. You specify how much white+black to mix into the "full" color, which is just the inverse of chroma∝; that is chroma∝ is how much color you mix into the white+black (gray). HSV and HSL are both saying different things to get to the same point. I just think HCG is easier to use than HWB; much more straightforward in thinking. What is HWB(78deg, 70%, 40%)? What is HCG(78deg, 0%, 64%)? Same thing, but the HWB values are actually "out of range", as W+B maxes out at 100%.
Looking at the math, based on the geometry, I can't see a "direct" conversion from HSV to HCG. You must calculate how the Saturation affects the Value, and visa-versa, and this calculation IS the White and Black values of HWB....so to speak.

I have seen that guy's multiple internet postings for years now. I even had to correct them, originally, by saying I had the concept "out there" before, I think he said, "Munsell" created it. Munsell dates back to the early 20th century, if I'm not wrong. I noted how they say it is based on HSV (or did they say HWB), but my original algorithm converting to/from from RGB does not use the HSV or HWB concept. I never de-coded what they were doing there, but I could see, using the Color-Space Lab in MasterColorPicker, the relationship between HWB and HCG. Again, I don't claim I created this color-space, just (re)discovered it. I think it is old old old, not from 2015 or whatever their posting said (I haven't looked in a while). Used to be Google brought you to my website for "HCG". One of the, if not the only, term Google would link to me for. I don't give them a hint of a penny, so Google shuns all my sites now. Dude (or dudess if it's more corect) "hijacked" the term, as far as I'm concerned. Not that I'm upset or mad or anything like that. I really don't care. But that's that. Again, haven't looked at their stuff in a bit, but when I did, I'm sure I was very curious, and I don't remember anything of value there, just clickbate and Google links. What they were doing with HCG (or HCV as they now call it), besides promoting it, is beyond me. Just lanading pages, so it seemed to me. Maybe I'm wrong, and sorry if I am!
I should look at their code base again and try to decypher the algorithm. I was determined to crack it myself, and the code you see is the code I came up with. But someone somewhere else did the same thing some time ago before me, I believe.
Again, really, Thanks y'all for all of this, and thank you, faceless user, for your time here.
Aloha!
P.S. when I started this conversation 2 days ago, MasterColorPicker had not yet incorporated the "Ottosson Krafted" (OK) colors into the Color-Space Lab. I updated it yesterday.

[facelessuser]

It's pretty easy to do convert from HSV, HWB, or HSL. Since Okhsv is already in HSV, it makes sense to do so, at least in my mind, but there is nothing wrong with approaching it from another space like HWB.

Just out of curiosity, I implemented it locally as I wanted to how OKHCG would behave:

HCG behaves pretty much how I would expect:

Since OkHSV is just an approximation of the sRGB, it is not a precise sRGB gamut, so rendering in an HCG format can be a little weird int he blue region.

But if you firmly clip it to HCG's coordinates, then it doesn't seem to be a problem.

Anyway, interesting.

[SoftMoonWebWare]

I'm an auto-mechanic (I dare to call myself an auto-tech, even), as well as a programmer (dare I refer to myself as a software engineer?).
Damn you got the tools that I only dream of!
I've been playing with that "drip" of blue this weekend, and I just adjusted RGB_Calc to clip those < 0 values. I wanted to see the response of everything, all color-spaces and a wide variety of colors, tints, tones, and shades, before doing something so drastic. The math is beyond me! I'm just trying to work with it! As far as I can track down, the problem is actually in OKLab, not OKHSV, but I may be wrong.
So before there was a "gap" in the graphic display for the blue hues, now it is filled.
I think of HCG (and now OKHCG) as a "flying saucer", as opposed to a "cylinder". Two cones, base to base, one point is white, the other black, the center-axis is grayscale tones. The outer-ring where the two conic-bases meet is the fully-chromatic∝ rainbow-ring. Like a bunch of those triangles I was talking about in earlier posts all wrapped around the center-axis.

Well, hope I haven't waisted too much of your time with all this. I'm looking forward to new color-blind filter providers in my project, so thanks again! It's the color-blind support in MasterColorPicker that makes it stand out and above. Make choosing color-blind friendly colors a primary consideration, not an afterthought, especially not after you created a whole website, etc. and then run it though some online "filter" only to find out you cant easily read half the text even with high-contrast. As a backpacker/hiker, it has changed the way I look at nature and the colors I see there. I saw a graphic once that showed how "color deficiency" actually enhanced the visibility of fruits on a tree. Not a handycap, a benefit, in that regard. I look at everything different now, after working with the RainbowMaestro color-picker and its colorblind simulations.

Aloha!