Color Model and API Questions

[meodai]

Hey @zeke & @dy

For my color companion site I was experimenting with coming up with a color description for a color, based on its attributes in HSL for example.

I have a few questions:

Description API: https://github.com/words/color-description/blob/main/index.js#L13

• This is a const right now and not configurable from the class itself. Is this something you see people extending easily? (If they do, I kinda want to know about it, and hope they would do a pull request). Is this wishful thinking or do you also see that as a "feature" ? :D

Color Model: HSL

• HSL is not the best for an uniform hue perception, what space would you use to describe a colors hue range? HSLuv?
• I am a bit confused about how to handle that. On one and it is not an exact science anyway, its almost like a horoscope where the adjectives sometimes cover a wide range of colors, sometimes though the definition is quite narrow.

I would love to read about your thoughts.

[wooorm]

You might be interested in https://github.com/vasilisvg/human-colours

[meodai]

@wooorm thanks I did not know about it.

It is a bit rudimentary for my purpose though. For example a color is still considered "red" if the hue is around 0deg, but has almost no light or saturation. I also try to capture a wider array of features.

[zeke]

About seven years ago I created a project called https://github.com/colorjs/color-namer -- It vendors in a bunch of different datasets with names for colors. In hindsight, bringing all that data into the module feels like a mistake. I think it would have been better to have a uniform format for that and publish each set of names and color values as a standalone npm package.

what space would you use to describe a colors hue range?

I think the Lab or HCL color spaces may be what you're looking for: http://en.wikipedia.org/wiki/Lab_color_space

Lab and HCL color spaces are special in that the perceived difference between two colors is proportional to their Euclidean distance in color space. This special property, called perceptual uniformity, makes them ideal for accurate visual encoding of data. In contrast, the more familiar RGB and HSL color spaces distort data when used for visualization.

[dy]

Regarding extensibility I can see i18n purpose for now.
As for hue perceptual uniformity - yes HCL is there for it, it's like Lab-based HSV (OSAUCS is more advanced uniform, but there's no formula to convert back from it). HSLuv has a bit different purpose and floating limits iirc. But HSV is very convenient, everyone understands it, also that doesn't require transform. I guess if you're looking for uniform areas it's possibly an option to precalculate ranges in HCL and convert them to HSV for your existing description, leaving HCL ranges in comments.

@zeke color-namer/pantone seems a nice convention, no? I wonder why it's not so popular. Multiple separate packages require extended maintenance efforts, version sync etc - similar code is "too far". With audiojs I start thinking it was a mistake to create multiple packages. Lerna-based projects tend to get too disorganized too.

[meodai]

@zeke ah I knew about your color-namer project. I run a similar project: https://github.com/meodai/color-names. I'm happy you bring it up, because I think it is complementary. Those are more about a nice name for the color (noun), what I aim to do with this project, is describing the attributes of the color using adjectives: It made me change the readme a bit to: "Describes color attributes using words instead of coordinates in a model."

About HCL: this is the model I had initially chosen, but it was hard to use because of cases like that:

It would make it hard to describe that range in a simple array like I did. But this made me think of HSLuv or HuSL! I will try something! Thanks for the insight.

@dy I think i18n would be a great fit! I will definitely integrate that!

@zeke & @dy I'd be a bit cautious when using the pantone color names in an open-source project. They are quite protective about it. A few github projects that were using the Pantone colors were taken down.

[dy]

Btw HSL has smoother chroma than HSLuv:

vs

That sharp blue saturation stands out in HSLuv:

And HPLuv seems to be just a subrange of LCH.

[meodai]

@dy then HSL might not be such a bad choice after all. It doesn't matter if it's not a 100% accurate, because the adjectives are kinda vague anyway. (They are fitting for a range of color). I think its not tooo bad:

Screen.Recording.2021-05-12.at.14.00.32.mov

I need to find a good way to test that.

[meodai]

@dy https://cdpn.io/meodai/debug/a7ab525f986069405732afd3d4f0e8a2

[dy]

Pretty cool!

I wonder will that match canonical 2-component descriptors (color name + modifier), like dark blue/gray/*. That seems to be a pattern for naming fwiw: cosmic *, copper *, chinese *, cadmium *, burnt *, bright *, black *, golden * etc. So modifiers possibly indicate not only absolute range but also a relative shift from some canonical color name. Can be even vectorized and used to generate colors: copper(red), chinese(yellow), cosmic(green) etc.

Also, in my head warm/hot, red/reddish and mellow are all different categories.

Possibly having simple descriptors could also explain difficult color names, eg. catawba = purplish brown.
That also gives another idea for description - as a mixture of 2-3 canonical colors + modifier.

[meodai]

@dy yeah that would be pretty cool and easy to pull off with that class and data structure.

I have removed hot anyway. but warm and cold colors a based on that:

I have also defined that they are not warm anymore if the light value is very low.. (they are still cold thought)

[dy]

Possibly color temperature also may give an insight, tbh I imagined it more in this way

[meodai]

@dy I tried that first, but it made no sense for colors that are not blue yellow white orange or red :( // its styll in the code under temperature adjectives

[meodai]

the hue names should probably use LAB using this data:
https://uwdata.github.io/color-naming-in-different-languages/vis/full_color_maps.html and
https://uwdata.github.io/color-naming-in-different-languages/vis/stacked-spectrum.html

Not sure how I could translate that to "simple" Lab ranges thought? Any thoughts?
https://github.com/uwdata/color-naming-in-different-languages/

[meodai]

https://raw.githubusercontent.com/uwdata/color-naming-in-different-languages/master/model/colorSOM.json

@dy any idea what is meant by "color nodes" in the JSON data?

[dy]

It seems to be some data for the translator https://uwdata.github.io/color-naming-in-different-languages/vis/color_translator.html#term=pink&start_lang=en&dest_lang=en
As you see some colors have 9 nodes others 4

Btw, I'm not sure their work is a reliable ground for color-description - I'd propose better to get inspiration from what they refer to:

7 color regions
corresponding to Berlin & Kay’s basic color terms [BK69]: red,
orange, yellow, green, blue, purple, and pink (weakly), are salient
across languages.

[meodai]

@dy had the chance to continue to work on this a bit: https://words.github.io/color-description/

[zeke]

That's a lot of fun to play with!

[dy]

@meodai that is so nice and fun

As an idea: showing neighbor colors

[meodai]

@dy neighbors as in h+20, h-20 ?

[dy]

Yes, hue and maybe saturation.
I mean names are so fun but dense, picking is not precise, same time there are many almost-symonymic colors nearby with very different names- would be fun to know "color area", not just direct color. Sort of similar to what we discussed before:

[meodai]

@dy I like that idea! the "color area" thing would be hard to pull off. Feel free if you have an idea. But it would have to be visualized in 3d I think, since the "color area" is 3 dimensional.

[dy]

I'm thinking something simple:

Basic directions: -h, +h, -s, +s, -l, +l, -h-s, -h+s, +h-s, +h+s etc.

[meodai]

@dy cool idea! https://words.github.io/color-description/ I added it to the bottom thought, since this project is not really about the color names, but rather about the adjectives and descriptions ;)

[zeke]

☝🏼 That's really cool. I love clicking my way through the names and gradually changing from one hue to another.