Kumu
  • Getting started
    • Welcome
    • Kumu 101
    • First steps
    • Quick tips
    • Webinars
  • Overview
    • Kumu's architecture
    • Accounts and workspaces
    • Kumu.io and Kumu Enterprise
    • Billing
    • User interfaces
      • Dashboard
      • Settings
      • Map editor
      • View editors
      • Quick Actions
    • Collaborating and sharing
    • Actions and permissions
    • Security
    • Advanced Editor hub
      • @settings reference
      • @controls reference
      • Color reference
      • Property reference
      • Selector reference
  • DISCIPLINES
    • SNA / Network Mapping
    • Systems mapping
    • Systems Practice workbook
  • Guides
    • Activity feed
    • Add-ons
      • Disqus
    • Bridge
    • Cluster
    • Controls
      • Cluster control
      • Color-legend control
      • Filter control
      • Focus control
      • Image control
      • Label control
      • Showcase control
      • SNA-dashboard control
      • Tagged-timeline control
      • Text Control
      • Title Control
      • View toggle control
    • Decorations
      • Direct decorations
      • Data-driven decorations
      • Flags
      • Icons
      • Images
      • Label templates
      • Popovers
    • Default view settings
    • Export
    • Fields
      • Computed fields
    • Filter
    • Focus
    • Forking
    • Grids & Guides
    • Import
      • Structure your data for Kumu
      • Excel / CSV
      • Google Sheets
      • JSON / Blueprints
    • Imported views
    • Layouts
      • Fixed
      • Force-directed
      • Remove overlap
      • Scatter
      • Snap-to
    • Legends
    • Licensing
    • Lightbox
    • Loops
    • Metrics
    • Two-factor authentication
    • Pro workspaces
      • Archiving projects
      • Discussions
    • Partial views
    • Presentations
    • Profiles
      • Markdown
    • Project admin
    • Selectors
    • Shapes
    • Share and embed maps
    • Shortcuts
    • Showcase
    • Slugs
    • Table
    • Templates
      • Geo template
    • URLs
    • Views
    • Widgets
  • About Kumu
    • What is Kumu?
    • How does it work?
    • Where can I get help?
  • Enterprise
    • About enterprise
    • Getting started with VMWare
    • Upgrading
    • Configuration
    • Creating user accounts
    • SSH Access
    • Single sign-on
    • Backing up enterprise data
    • Restoring enterprise data
    • Command line utilities
    • Changelog
  • Frequently Asked Questions
    • Does Kumu have a public API?
    • Does Kumu make use of AI?
    • How do I add annotations?
    • How do I add anchors to my map description?
    • How do I add arrows to my connections?
    • How do I add documents to profiles?
    • How do I add more than one element with the same label?
    • How do I add text dropdowns to my map overview?
    • How do I adjust arrow size?
    • How do I avoid duplicating data?
    • How do I change connection curvature?
    • How do I change font color?
    • How do I change font size?
    • How do I change the default for currency fields?
    • How do I change the length or strength of connections?
    • How do I change the order of control options?
    • How do I change the position of my element labels?
    • How do I cite Kumu?
    • How do I collapse duplicate connections?
    • How do I copy a map to another project?
    • How do I control label size while scaling element size?
    • How do I control text wrapping?
    • How do I convert a project from private to public?
    • How do I convert a project from public to private?
    • How do I create dynamic on/off toggles for my map?
    • How do I customize link text in popovers?
    • How do I customize the order of my legend?
    • How do I delete a project, map, or view?
    • How do I delete data from my project?
    • How do I downgrade my subscription?
    • How do I edit virtual elements?
    • How do I get rid of duplicates?
    • How do I hide elements without connections?
    • How do I hide images from the map but keep them in the profile?
    • How do I hide labels on my map?
    • How do I hide the settings button?
    • How do I keep elements from moving?
    • How do I list an element's connections in its profile?
    • How do I make elements transparent?
    • How do I make sense of my receipt?
    • How do I open a sub-system when clicking on an element?
    • How do I remove the Opposite entry from my legend?
    • How do I remove unneeded controls?
    • How do I remove unwanted legend entries?
    • How do I rename my map/view?
    • How do I restructure my adjacency matrix?
    • How do I save my changes in Kumu?
    • How do I select options by default in my control?
    • How do I set a minimum or maximum zoom level for my map?
    • How do I show the Settings button?
    • How do I size elements based on number of connections?
    • How do I transfer a project?
    • How do I update my credit card information?
    • How much data can my Kumu project handle?
    • How do my readers switch between maps and views?
    • My data won't import. What can I do?
    • My Kumu embed is not working. What can I do?
    • My map disappeared. How do I bring it back?
    • My PDF won't export. What can I do?
    • What pricing plans does Kumu have?
    • Where can I find my invoices?
    • Where can I find example Kumu projects?
Powered by GitBook
On this page
  • Named color scales
  • Sequential and diverging
  • Qualitative
  • Inverting a color scale
  • Defining your own color palette
  • Setting explicit stops for color values in categorize()

Was this helpful?

Edit on GitHub
  1. Overview
  2. Advanced Editor hub

Color reference

Previous@controls referenceNextProperty reference

Last updated 10 months ago

Was this helpful?

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

Named color scales

Kumu has built-in support for a number of named color scales, including all 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);
}
@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");
}
@settings {
  element-flag: "Tags" with #5BC1AE "Person", #009CDB "Organization", #F6882B "Region;
}

For , the code is slightly different:

For , the code is slightly different:

flags
flags
ColorBrewer
Color by
Advanced Editor
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
bujumbra
neon
neon2
olympic
Accent
Dark2
Paired
Pastel1
Pastel2
Set1
Set2
Set3