color-reference.md

Color reference

Below are details on the different color palettes and scales that Kumu supports. Use these with the Color by tool in the Basic Editor, or use them in the Advanced Editor with the categorize() and scale() functions.

Named color scales

Kumu has built-in support for a number of named color scales, including all ColorBrewer scales.

Sequential and diverging

Both sequential and diverging color palettes are great when you are trying to show quantitative data or data that has a meaningful order.

YlGn
YlGnBu
GnBu
BuGn
PuBuGn
PuBu
BuPu
RdPu
PuRd
OrRd
YlOrRd
YlOrBr
Purples
Blues
Greens
Oranges
Reds
Greys
PuOr
BrBG
PRGn
PiYG
RdBu
RdGy
RdYlBu
Spectral
RdYlGn
nautical
deepsea
heat
flamingo
coffee
stoplight

Qualitative

Qualitative color palettes are best when you are trying to show data with discrete values that don't have an inherent order.

bujumbra
neon
neon2
olympic
Accent
Dark2
Paired
Pastel1
Pastel2
Set1
Set2
Set3

Here's an example of how to use a named color scale:

element {
  color: scale("net worth", bujumbra);
}

Inverting a color scale

Any color scale can be inverted by adding -inverted to the name.

Defining your own color palette

You can define your own color palette for elements by using a comma separated list of color values.

@settings {
  element-color: categorize("community", #5BC1AE, #009CDB, #F6882B, #8E278F);
}

For flags, the code is slightly different:

@settings {
  element-flag: "Tags" with #5BC1AE, #009CDB, #F6882B, #8E278F;
}

Setting explicit stops for color values in categorize()

It's also possible to specify which value should receive a certain color for elements.

@settings {
  element-color: categorize("element type", #5BC1AE "Person", #009CDB "Organization", #F6882B "Region");
}

For flags, the code is slightly different:

@settings {
  element-flag: "Tags" with #5BC1AE "Person", #009CDB "Organization", #F6882B "Region;
}