Colorscales & palettes

Every colorscale and palette name that Holochart knows, drawn from its stops. The lists on this page are generated from the library's color registries. How colors, colorscales and colorbars work is in Colors, colorscales & colorbars.

Holochart has 94 named colorscales (65 sequential, 22 diverging, 7 cyclical) and 21 qualitative palettes.

Using a name

A colorscale name goes in a colorscale attribute, and a palette name in layout.colorway:

import { createChart } from '@mk7s/holochart';

createChart(el, {
  data: [
    {
      type: 'scatter',
      mode: 'markers',
      x: [1, 2, 3, 4],
      y: [3, 1, 4, 2],
      marker: { color: [12.5, 17.1, 21.8, 26.4], colorscale: 'Viridis', showscale: true },
    },
  ],
  layout: { colorway: 'Bold' },
});

Names are not case-sensitive: 'viridis' is 'Viridis'.
Add _r to a colorscale name to reverse it: 'Viridis_r'. Setting reversescale: true next to the colorscale does the same. Palettes have no reversed names.
A colorscale also takes its own stops, [position, color] pairs that start at 0 and end at 1: [[0, 'navy'], [0.8, 'gold'], [1, 'white']].
A colorscale name that doesn't resolve is not reported as an invalid value. With marker.colorscale, the trace is drawn with the automatic colorscale, as if colorscale were not set. A palette name that doesn't resolve is reported as an invalid layout.colorway, and the default colorway is used.

These attributes take a colorscale:

Attribute	In
`fillgradient.colorscale`	`scatter`
`marker.colorscale`	`scatter`, `bar`, `histogram`, `splom`, `scatterpolar`, `barpolar`, `funnel`, `sunburst`, `treemap`, `icicle`, `scatter3d`, `bar3d`
`marker.line.colorscale`	`scatter`, `bar`, `histogram`, `splom`, `scatterpolar`, `barpolar`, `funnel`, `scatter3d`
`colorscale`	`histogram2d`, `histogram2dcontour`, `heatmap`, `contour`, `surface`, `mesh3d`, `cone`, `streamtube`, `isosurface`, `volume`
`line.colorscale`	`parcoords`, `parcats`, `scatter3d`
`link.colorscales[].colorscale`	`sankey`
`layout.colorscale.sequential`	The layout
`layout.colorscale.sequentialminus`	The layout
`layout.colorscale.diverging`	The layout
`layout.coloraxis.colorscale`	The layout

A palette name works in these layout attributes: layout.colorway, layout.piecolorway, layout.funnelareacolorway, layout.sunburstcolorway, layout.treemapcolorway, layout.iciclecolorway.

The palettes are also exported as arrays, so you can slice or reorder them: colorway: QUALITATIVE.Bold is the same as colorway: 'Bold'.

Your own names

colors.register adds a colorscale and colorways.register adds a palette. Register a name before you plot a figure that uses it.

import { colors, colorways } from '@mk7s/holochart';

// A list of colors is spread evenly from 0 to 1.
colors.register('Brand', ['#0b1f3a', '#1d6fa5', '#9ad0ec']);
// Or give the stops.
const unregister = colors.register('Traffic', [
  [0, 'seagreen'],
  [0.6, 'gold'],
  [1, 'crimson'],
]);
colorways.register('Team', ['#ea2a37', '#5e74d5', '#118e36']);

createChart(el, {
  data: [
    {
      type: 'scatter',
      mode: 'markers',
      y: [1, 3, 2],
      marker: { color: [1, 3, 2], colorscale: 'Brand_r' },
    },
  ],
  layout: { colorway: 'Team' },
});

unregister(); // 'Traffic' no longer resolves

Both functions return a function that removes the name again. Registering a name that exists replaces it, whatever its case. A registered scale gets its _r name for free, unless you register a scale under that exact name.

colors.get(name) returns the stops of a scale and colorways.get(name) the colors of a palette, or undefined. colors.has(name) tells whether a name resolves, colors.names() and colorways.names() list the names, and colors.reverse(stops) mirrors a scale.

Partial bundles

The full @mk7s/holochart bundle registers every name on this page when it loads. A partial bundle starts with these:

19 colorscales: Greys, YlGnBu, Greens, YlOrRd, Bluered, RdBu, Reds, Blues, Picnic, Rainbow, Portland, Jet, Hot, Blackbody, Earth, Electric, Viridis, Cividis, Plasma
1 palette: Safe

import { CMOCEAN_SEQUENTIAL, colors, registerBuiltinColors } from '@mk7s/holochart-core';

registerBuiltinColors(); // every colorscale and palette on this page

// Or one set, here cmocean's sequential scales:
colors.registerAll(CMOCEAN_SEQUENTIAL, { overwrite: false });

With overwrite: false, a name that already resolves keeps its meaning. That is how registerBuiltinColors adds the sets, and why some names don't resolve to the list of the same name.

The sets that add colorscale names are SEQUENTIAL, COLORBREWER_SEQUENTIAL, COLORBREWER_DIVERGING, CMOCEAN_SEQUENTIAL, CMOCEAN_DIVERGING, CMOCEAN_CYCLICAL, CARTO_SEQUENTIAL, CARTO_DIVERGING, CYCLICAL, and the palettes are in QUALITATIVE. All of them are exported by @mk7s/holochart too.

Reading the tables

Source is the set a colorscale comes from: plotly.js for plotly.js' own names and Plasma (the ones every bundle has), plotly for plotly.py's own scales, and ColorBrewer, cmocean and CARTO for the sets plotly.py takes from those projects. Each swatch is drawn from the scale's stops, with colors between stops blended in sRGB, as charts draw them unless layout.colorscaleInterpolation says otherwise. Hover a color of a palette to read its value.

Sequential colorscales

Name	Source	Scale
`Greys`	plotly.js
`YlGnBu`	plotly.js
`Greens`	plotly.js
`YlOrRd`	plotly.js
`Bluered`	plotly.js
`Reds`	plotly.js
`Blues`	plotly.js
`Rainbow`	plotly.js
`Jet`	plotly.js
`Hot`	plotly.js
`Blackbody`	plotly.js
`Electric`	plotly.js
`Viridis`	plotly.js
`Cividis`	plotly.js
`Plasma`	plotly.js
`Plotly3`	plotly
`Inferno`	plotly
`Magma`	plotly
`Turbo`	plotly
`BuGn`	ColorBrewer
`BuPu`	ColorBrewer
`GnBu`	ColorBrewer
`OrRd`	ColorBrewer
`Oranges`	ColorBrewer
`PuBu`	ColorBrewer
`PuBuGn`	ColorBrewer
`PuRd`	ColorBrewer
`Purples`	ColorBrewer
`RdPu`	ColorBrewer
`YlGn`	ColorBrewer
`YlOrBr`	ColorBrewer
`turbid`	cmocean
`thermal`	cmocean
`haline`	cmocean
`solar`	cmocean
`ice`	cmocean
`gray`	cmocean
`deep`	cmocean
`dense`	cmocean
`algae`	cmocean
`matter`	cmocean
`speed`	cmocean
`amp`	cmocean
`tempo`	cmocean
`Burg`	CARTO
`Burgyl`	CARTO
`Redor`	CARTO
`Oryel`	CARTO
`Peach`	CARTO
`Pinkyl`	CARTO
`Mint`	CARTO
`Blugrn`	CARTO
`Darkmint`	CARTO
`Emrld`	CARTO
`Aggrnyl`	CARTO
`Bluyl`	CARTO
`Teal`	CARTO
`Tealgrn`	CARTO
`Purp`	CARTO
`Purpor`	CARTO
`Sunset`	CARTO
`Magenta`	CARTO
`Sunsetdark`	CARTO
`Agsunset`	CARTO
`Brwnyl`	CARTO

Diverging colorscales

Name	Source	Scale
`RdBu`	plotly.js
`Picnic`	plotly.js
`Portland`	plotly.js
`Earth`	plotly.js
`BrBG`	ColorBrewer
`PRGn`	ColorBrewer
`PiYG`	ColorBrewer
`PuOr`	ColorBrewer
`RdGy`	ColorBrewer
`RdYlBu`	ColorBrewer
`RdYlGn`	ColorBrewer
`Spectral`	ColorBrewer
`balance`	cmocean
`delta`	cmocean
`curl`	cmocean
`oxy`	cmocean
`Armyrose`	CARTO
`Fall`	CARTO
`Geyser`	CARTO
`Tealrose`	CARTO
`Temps`	CARTO
`Tropic`	CARTO

Cyclical colorscales

Name	Source	Scale
`phase`	cmocean
`Twilight`	plotly
`IceFire`	plotly
`Edge`	plotly
`HSV`	plotly
`mrybm`	plotly
`mygbm`	plotly

Names with two definitions

20 lists of the built-in sets share a name (ignoring case) with a scale that comes earlier in the registry. The name keeps the earlier meaning; the other list is exported as a value.

Name	Resolves to	Other list
`Viridis`	plotly.js	`SEQUENTIAL.Viridis`
`Cividis`	plotly.js	`SEQUENTIAL.Cividis`
`Plasma`	plotly.js	`SEQUENTIAL.Plasma`
`Rainbow`	plotly.js	`SEQUENTIAL.Rainbow`
`Blackbody`	plotly.js	`SEQUENTIAL.Blackbody`
`Bluered`	plotly.js	`SEQUENTIAL.Bluered`
`Electric`	plotly.js	`SEQUENTIAL.Electric`
`Hot`	plotly.js	`SEQUENTIAL.Hot`
`Jet`	plotly.js	`SEQUENTIAL.Jet`
`Picnic`	plotly.js	`DIVERGING_PLOTLY.Picnic`
`Portland`	plotly.js	`DIVERGING_PLOTLY.Portland`
`Blues`	plotly.js	`COLORBREWER_SEQUENTIAL.Blues`
`Greens`	plotly.js	`COLORBREWER_SEQUENTIAL.Greens`
`Greys`	plotly.js	`COLORBREWER_SEQUENTIAL.Greys`
`Reds`	plotly.js	`COLORBREWER_SEQUENTIAL.Reds`
`YlGnBu`	plotly.js	`COLORBREWER_SEQUENTIAL.YlGnBu`
`YlOrRd`	plotly.js	`COLORBREWER_SEQUENTIAL.YlOrRd`
`RdBu`	plotly.js	`COLORBREWER_DIVERGING.RdBu`
`Earth`	plotly.js	`CARTO_DIVERGING.Earth`
`phase`	cmocean	`CYCLICAL.Phase`

Qualitative palettes

Name	Colors	Palette
`Plotly`	10
`D3`	10
`G10`	10
`T10`	10
`Alphabet`	26
`Dark24`	24
`Light24`	24
`Set1`	9
`Pastel1`	9
`Dark2`	8
`Set2`	8
`Pastel2`	8
`Set3`	12
`Antique`	11
`Bold`	11
`Pastel`	11
`Prism`	11
`Safe`	11
`Vivid`	11
`Accent`	8
`Paired`	12

Defaults

A figure that sets neither layout.template nor these attributes gets them from the holochart template:

Attribute	Default
`layout.colorway`
`layout.colorscale.sequential`
`layout.colorscale.sequentialminus`
`layout.colorscale.diverging`

Other templates set their own colorway and automatic colorscales: see Themes & templates.

Colorscales & palettes ​

Using a name ​

Your own names ​

Partial bundles ​

Reading the tables ​

Sequential colorscales ​

Diverging colorscales ​

Cyclical colorscales ​

Names with two definitions ​

Qualitative palettes ​

Defaults ​