carbonplan / colormaps

color scales for data visualization

This simple package contains a variety of colormaps for our data visualization needs at CarbonPlan. A primary use case is when rendering maps, but other uses will arise as well. Colormaps are designed to be both aesthetically pleasing and perceptually balanced, and all should work in both light and dark mode.

See them demoed at carbonplan.org/design/colormaps.

installation

Add to your package using npm

npm i @carbonplan/colormaps

usage

The primary entry point is the makeColormap function, which just requires a name.

import { makeColormap } from '@carbonplan/colormaps'

const colormap = makeColormap('warm')

This returns an array of colors. You can pass options including the count of colors, the mode (light or dark), and the format (rgb or hex). For example, the following will return 7 equispaced values from the warm colormap in hex format and light mode.

const colormap = makeColormap('warm', {count: 7, mode: 'light', format: 'hex'})

In a React context, you can also use the provided hook.

import { useColormap } from '@carbonplan/colormaps'

const colormap = useColormap('warm')

This hook has as dependencies the name as well as any options.

Finally, for use with theme-ui, we offer a hook that depends on the current theme-ui mode, so that changing the theme-ui mode will change the colormap.

import { useThemedColormap } from '@carbonplan/colormaps'

const colormap = useThemedColormap('warm')

You can also retrieve a list of available colormaps with both names and types. Useful for building menu selections and similar listings.

import { colormaps } from '@carbonplan/colormaps'

console.log(colormaps.filter((d) => d.type === 'diverging').map((d) => d.name))

note

We are currently pinning to version 2.2 of chroma-js due to a change in the bezier implementation that changed our intended colormaps in an undesirable way.