Kumu
Ask or search…
K

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
YlGn
YlGnBu
YlGnBu
GnBu
GnBu
BuGn
BuGn
PuBuGn
PuBuGn
PuBu
PuBu
BuPu
BuPu
RdPu
RdPu
PuRd
PuRd
OrRd
OrRd
YlOrRd
YlOrRd
YlOrBr
YlOrBr
Purples
Purples
Blues
Blues
Greens
Greens
Oranges
Oranges
Reds
Reds
Greys
Greys
PuOr
PuOr
BrBG
BrBG
PRGn
PRGn
PiYG
PiYG
RdBu
RdBu
RdGy
RdGy
RdYlBu
RdYlBu
Spectral
Spectral
RdYlGn
RdYlGn
nautical
nautical
deepsea
deepsea
heat
heat
flamingo
flamingo
coffee
coffee
stoplight
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
bujumbra
neon
neon
neon2
neon2
olympic
olympic
Accent
Accent
Dark2
Dark2
Paired
Paired
Pastel1
Pastel1
Pastel2
Pastel2
Set1
Set1
Set2
Set2
Set3
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;
}