Color Schemes

Color schemes provide a set of named color palettes for both discrete and continuous color encodings. Vega provides a collection of perceptually-motivated color schemes, many of which were originally created by Cynthia Brewer and the ColorBrewer project, or by Maureen Stone of Tableau Software. To view and set default color schemes, see the Config documentation.

Discrete color schemes may be used directly with scales that have discrete (or discretizing) domains, such as ordinal, quantize, and quantile scales. Continuous color schemes can be used directly with continuous scales (such as linear, log, and sqrt scales), and – by specifying a scheme count property – can also be used to generate discrete color schemes.

Scheme Properties

Properties supported by color scheme definitions. These objects can be assigned to a scale’s range property. If a scale definition includes the property "reverse": true, the color scheme order will be flipped.

Property Type Description
scheme String | Color[ ] Required. The name of the color scheme to use or an array of color values. See the scheme reference below for named schemes. For Vega 5.0 and higher, if a color array is provided, the colors will be interpolated to form a new scheme; use the scale interpolate property to set the interpolation type (defaults to linear RGB interpolation).
count Number The number of colors to use in the scheme. This property can be useful for scale types such as quantile and quantize, which use the length of the scale range to determine the number of discrete bins for the scale domain.
extent Number[ ] For continuous schemes only, determines the extent of the color range to use. For example [0.2, 1] will rescale the color scheme such that color values in the range [0, 0.2) are excluded from the scheme. Starting the extent array with the higher number will reverse the scheme order. For example, [1, 0] is the reverse of [0, 1].

Registering Additional Schemes

Vega can be extended with additional color schemes using the vega.scheme method. New schemes must be a valid color array or interpolator. For example:

// Register a discrete color scheme named "basic" that can then be used in Vega specs
vega.scheme('basic', ['#f00', '#0f0', '#00f', '#ff0', '#f0f', '#0ff']);

// Register a custom continuous interpolation scheme

// Define an interpolator function that maps from [0,1] to colors
function grey(f) {
  var g = Math.max(0, Math.min(255, Math.round(255 * f))) + '';
  return 'rgb(' + g + ', ' + g + ', ' + g + ')';
}

// Register the interpolator. Now the scheme "mygrey" can be used in Vega specs
vega.scheme("mygrey", grey);

Scheme Reference

Categorical Schemes

Categorical color schemes can be used to encode discrete data values, each representing a distinct category.

# accent
# category10
# category20
# category20b
# category20c
#observable10
# dark2
# paired
# pastel1
# pastel2
# set1
# set2
# set3
# tableau10
# tableau20

Sequential Single-Hue Schemes

Sequential color schemes can be used to encode quantitative values. These color ramps are designed to encode increasing numeric values. Hover over a scheme and click the “View Discrete” link to toggle display of discretized palettes suitable for quantile, quantize, threshold, or ordinal scales.

# blues View Discrete
# tealblues ≥ 5.0 View Discrete
# teals ≥ 5.0 View Discrete
# greens View Discrete
# browns ≥ 5.0 View Discrete
# oranges View Discrete
# reds View Discrete
# purples View Discrete
# warmgreys ≥ 5.0 View Discrete
# greys View Discrete

Sequential Multi-Hue Schemes

Sequential color schemes can be used to encode quantitative values. These color ramps are designed to encode increasing numeric values, but use additional hues for more color discrimination, which may be useful for visualizations such as heatmaps. However, beware that using multiple hues may cause viewers to inaccurately see the data range as grouped into color-coded clusters. Hover over a scheme and click the “View Discrete” link to toggle display of discretized palettes suitable for quantile, quantize, threshold, or ordinal scales.

# viridis View Discrete
# magma View Discrete
# inferno View Discrete
# plasma View Discrete
# cividis ≥ 5.15 View Discrete
# turbo ≥ 5.15 View Discrete
# bluegreen View Discrete
# bluepurple View Discrete
# goldgreen ≥ 5.0 View Discrete
# goldorange ≥ 5.0 View Discrete
# goldred ≥ 5.0 View Discrete
# greenblue View Discrete
# orangered View Discrete
# purplebluegreen View Discrete
# purpleblue View Discrete
# purplered View Discrete
# redpurple View Discrete
# yellowgreenblue View Discrete
# yellowgreen View Discrete
# yelloworangebrown View Discrete
# yelloworangered View Discrete

For Dark Backgrounds

# darkblue ≥ 5.0 View Discrete
# darkgold ≥ 5.0 View Discrete
# darkgreen ≥ 5.0 View Discrete
# darkmulti ≥ 5.0 View Discrete
# darkred ≥ 5.0 View Discrete

For Light Backgrounds

# lightgreyred ≥ 5.0 View Discrete
# lightgreyteal ≥ 5.0 View Discrete
# lightmulti ≥ 5.0 View Discrete
# lightorange ≥ 5.0 View Discrete
# lighttealblue ≥ 5.0 View Discrete

Diverging Schemes

Diverging color schemes can be used to encode quantitative values with a meaningful mid-point, such as zero or the average value. Color ramps with different hues diverge with increasing saturation to highlight the values below and above the mid-point. Hover over a scheme and click the “View Discrete” link to toggle display of discretized palettes suitable for quantile, quantize, threshold, or ordinal scales.

# blueorange View Discrete
# brownbluegreen View Discrete
# purplegreen View Discrete
# pinkyellowgreen View Discrete
# purpleorange View Discrete
# redblue View Discrete
# redgrey View Discrete
# redyellowblue View Discrete
# redyellowgreen View Discrete
# spectral View Discrete

Cyclical Schemes

Cyclical color schemes may be used to highlight periodic patterns in continuous data. However, these schemes are not well suited to accurately convey value differences.

# rainbow ≥ 4.0
# sinebow ≥ 4.0