[css-color-5] color-ramp functions

[tabatkins]

Designing a good color ramp, where data is displayed in various colors along a spectrum to indicate their value, is very difficult. There's a lot of color theory, accessibility, and practical considerations that have be balanced with each other to get it right, and the vast majority of people do not get it right. Maps and diagrams are often a travesty of misleading or difficult-to-distinguish colors.

It might be worthwhile to include some pre-built ramps that are designed well. I've seen a few suggestions in the past, but most recently have come across the "viridis" ramp, which looks promising, even giving good results when translated to b/w printing. However, my knowledge in this space is very limited, and I've got no particular attachment to anything in particular.

The primary use-case is being able to extract a spot color corresponding to some value; this probably means a function that takes a % between 0% and 100% and resolves to an appropriate color from the ramp: viridis(50%) or color-ramp(viridis 50%) for easier extensibility.

However, displaying the color scale itself is also important for legends, so offering this as some kind of built-in gradient would also probably be good. I think linear-gradient(..., viridis) would work, with the keyword subbing in for the entire color-stop list? Possibly something more complex that lets us stretch a specified fragment of the ramp between two specified positions in the gradient, so you don't have to do funky hacks just to get a fragment of the ramp to display.

[tabatkins]

Some more reading on the subject, for later:

• https://matplotlib.org/stable/tutorials/colors/colormaps.html
• https://www.kennethmoreland.com/color-advice/

[smfr]

There's a related color challenge for data vis which is "choose a good set of colors for N unrelated categories". d3 has some color libraries that provide palettes of such category colors.

[tabatkins]

Ah yeah, so a related function that takes (max, N) as arguments would fit nicely with this too; it wouldn't need the gradient support.

Since that's more restricted in what it needs to do, we might be able to play with it a little more, like having a preferred lightness level. (For example, clicking on algorithm variables in a Bikeshed document works thru a selection of several manually-chosen pastel colors that all have the same Lab lightness, and were specifically chosen to be mutually distant from each other in Lab space).

[Myndex]

Hi @tabatkins

The FAA has done a lot of research in the area and set guidelines thereof:
http://www.tc.faa.gov/its/worldpac/standards/faa-hf-std-010.pdf

And also Maurene Stone wrote a book/guideline for NIST:
https://tsapps.nist.gov/publication/get_pdf.cfm?pub_id=900104

[svgeesus]

Moving new feature requests to CSS Color 6, to stabilize CSS Color 5 which is about ready to move to CR.