.png%3Falt%3Dmedia%26token%3Dbbbe5f82-239a-4459-9ec5-3b5961b4b466)
.png%3Falt%3Dmedia%26token%3Dbbbe5f82-239a-4459-9ec5-3b5961b4b466)
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.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 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);
}
Any color scale can be inverted by adding
-inverted to the name.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)
}
@settings {
element-flag: "Tags" with #5BC1AE, #009CDB, #F6882B, #8E278F;
}
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")
}
@settings {
element-flag: "Tags" with #5BC1AE "Person", #009CDB "Organization", #F6882B "Region;
}
Last modified 2mo ago