Color Reference

Below are details on the different color palettes and scales that Kumu supports. Use these with the categorize() function or within any color scale color: scale().

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            
 
babygirl            
 
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. For example:

heat            
 
heat-inverted            

Defining your own color palette

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

@settings {
  element-color: categorize("community", #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 within categorize().

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

results matching ""

    powered by

    No results matching ""