Colors as first class citizens

[davidmanzanares]

Minimum support:

• [x] RGB
• [x] RGBA
• [x] Hex: '#FFF'
• [x] HSL
• [x] HSLA
• [x] HSV
• [x] HSVA
• [x] Named colors: red, green, blue, (...)

cc: @makella

[makella]

@dv343

There are a couple of things here, but to answer your first question, I would add HSL and HSLA as well as HSVA.

Also, it will be good that HSL will be "easier" for people with its notation.

Question:

• CIELab is good as an interpolation space, but do you think it is good for common styling?

Issues with HSL and HSV for color interpolation

We have seen that we can do cool things with expressions and color by manipulating HSV components. But as we've discussed, HSV and HSL aren't good choices for perceptually uniform colors which is especially important to us for thematic cartography.

Given that we support color interpolation and that anywhere you read about color for data visualization discusses why you should use a perceptually uniform color space, I think we should spend some time on this.

In a nutshell, both HSV and HSL work well for one color, but when doing more advanced operations, we can't rely on the output colors.

If we take some styling from the Barcelona example, are we actually making a category scheme using proper cartographic principles given HSV's inherent hue-dependent brightness?

width: 3
color: hsv($category, 0.7, 1.)

To demonstrate:

• here I'm using the HSV sliders to vary hue while keeping S and V constant green is perceived as much brighter than blue: http://davidjohnstone.net/pages/lch-lab-colour-gradient-picker#5100ff,c8ff00

I thought this blog did a good job of showing the issues with HSL (also inherent in HSV) http://www.boronine.com/2012/03/26/Color-Spaces-for-Human-Beings/

Ideas

CARTOColors will get us through a lot of the basics but if people want to do things like choose category colors based on an attribute or interpolate between a start and end color, what should we do?

CIELab is obviously uniform, but I feel like difficult to reason and add expressions to that to do advanced visualizations, it could get even more tricky.

• In this regard, I like what d3 does where input colors are converted behind the scenes to a given color space, interpolated, and returned. For example, https://github.com/d3/d3-interpolate#interpolateLab

HSLuv a "human-friendly" alternative to HSL

• also, it looks like Seaborn (a Python visualization library based on matplotlib) implements this as an option for interpolation http://seaborn.pydata.org/tutorial/color_palettes.html#using-circular-color-systems

And there are others out there! Before going too much deeper, let's talk through!

[davidmanzanares]

CIELab is good as an interpolation space, but do you think it is good for common styling?

Difficult to say, I think I made something interesting with it once, and it has its advantages, but it's clearly a difficult one. I would leave for now, and if we haven't found a proper use case near the release we could deprecate it before the release.

We could make a PoC with cielab color interpolation instead of the current RGBA one, eg (making this perceptually uniform): blend(red, blue, $vote_pct)

We could make another PoC with HSLuv.

I'm gonna add all of this to the original TODO list.

[makella]

Another one we could consider is Lch/HCL... which seems easier to manipulate than CIELab... for example: http://www.hclwizard.org/r-colorspace/

[rochoa]

@makella, if you had to decide what are the top 5 to support for an initial version, which ones would you pick?

[makella]

without taking color interpolation into account, for basic, basic, I'd do:

• rgb
• rgba
• HSL (easier notation than HSV)
• HSLa
• HSV (since we have examples that utilize)
• HSVa
• named colors

[davidmanzanares]

Just to be sure, you mean HSL, not HSLuv, right?

If that's the case, those shouldn't be a problem at all.

[makella]

ahhhh!! right

is it complicated? i do prefer HSLuv... for the reasons we talked about (thanks for the reminder)

[davidmanzanares]

I found a GLSL implementation: https://github.com/williammalo/hsluv-glsl/blob/master/hsluv-glsl.fsh and a C (similar to GLSL) implementation: https://github.com/hsluv/hsluv-c/blob/master/src/hsluv.c

If those implementations are good it shouldn't be difficult to adapt it. But I would do the rest of your list first since they are even easier.

[rochoa]

No hexadecimal (e.g. #FFF) notation?

[makella]

@rochoa OMG totally had it and then re-ordered the list and deleted it!

gooood catch!

update:

• rgb/rgba
• HSL/HSLa (easier notation than HSV)
• HSV/HSVa (since we have examples that utilize)
• HSLuv (if possible this is important for color-based expressions)
• HEX
• named colors

[makella]

just to summarize, we now have:

• rgb/rgba
• HSV/HSVa
• HEX
• named colors
• cie lab

is this right?

[Jesus89]

We have also HSL/HSLa :)