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 are drawn from the d3-scale, d3-scale-chromatic, and ColorBrewer projects. To view and set default color schemes, see the Config documentation.

Discrete color schemes may be used with scales that have discrete (or discretizing) domains, such as ordinal, quantize and quantile scales. Continuous color schemes are intended for use with sequential scales.

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 Required. The name of the color scheme to use. See the scheme reference below.
count Number The number of colors to use in the scheme. This can be useful for scale types such as quantize, which use the length of the scale range to determine the number of discrete bins for the scale domain.
extent Number[ ] For sequential and diverging 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.

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 color scheme named "basic" that can then be used in Vega specs
vega.scheme('basic', ['#f00', '#0f0', '#00f', '#ff0', '#f0f', '#0ff']);

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
# 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 numerical values. These schemes include both continuous color palettes, and a limited set of discrete palettes with a suffix that indicates the desired number of colors.

# blues
blues-3
blues-4
blues-5
blues-6
blues-7
blues-8
blues-9
# greens
greens-3
greens-4
greens-5
greens-6
greens-7
greens-8
greens-9
# greys
greys-3
greys-4
greys-5
greys-6
greys-7
greys-8
greys-9
# purples
purples-3
purples-4
purples-5
purples-6
purples-7
purples-8
purples-9
# reds
reds-3
reds-4
reds-5
reds-6
reds-7
reds-8
reds-9
# oranges
oranges-3
oranges-4
oranges-5
oranges-6
oranges-7
oranges-8
oranges-9

Sequential Multi-Hue Schemes

Sequential color schemes can be used to encode quantitative values. These color ramps are designed to encode increasing numerical 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. These schemes include both continuous color palettes, and a limited set of discrete palettes with a suffix that indicates the desired number of colors.

# viridis
# inferno
# magma
# plasma
# bluegreen
bluegreen-3
bluegreen-4
bluegreen-5
bluegreen-6
bluegreen-7
bluegreen-8
bluegreen-9
# bluepurple
bluepurple-3
bluepurple-4
bluepurple-5
bluepurple-6
bluepurple-7
bluepurple-8
bluepurple-9
# greenblue
greenblue-3
greenblue-4
greenblue-5
greenblue-6
greenblue-7
greenblue-8
greenblue-9
# orangered
orangered-3
orangered-4
orangered-5
orangered-6
orangered-7
orangered-8
orangered-9
# purplebluegreen
purplebluegreen-3
purplebluegreen-4
purplebluegreen-5
purplebluegreen-6
purplebluegreen-7
purplebluegreen-8
purplebluegreen-9
# purpleblue
purpleblue-3
purpleblue-4
purpleblue-5
purpleblue-6
purpleblue-7
purpleblue-8
purpleblue-9
# purplered
purplered-3
purplered-4
purplered-5
purplered-6
purplered-7
purplered-8
purplered-9
# redpurple
redpurple-3
redpurple-4
redpurple-5
redpurple-6
redpurple-7
redpurple-8
redpurple-9
# yellowgreenblue
yellowgreenblue-3
yellowgreenblue-4
yellowgreenblue-5
yellowgreenblue-6
yellowgreenblue-7
yellowgreenblue-8
yellowgreenblue-9
# yellowgreen
yellowgreen-3
yellowgreen-4
yellowgreen-5
yellowgreen-6
yellowgreen-7
yellowgreen-8
yellowgreen-9
# yelloworangebrown
yelloworangebrown-3
yelloworangebrown-4
yelloworangebrown-5
yelloworangebrown-6
yelloworangebrown-7
yelloworangebrown-8
yelloworangebrown-9
# yelloworangered
yelloworangered-3
yelloworangered-4
yelloworangered-5
yelloworangered-6
yelloworangered-7
yelloworangered-8
yelloworangered-9

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. These schemes include both continuous color palettes, and a limited set of discrete palettes with a suffix that indicates the desired number of colors.

# blueorange
blueorange-3
blueorange-4
blueorange-5
blueorange-6
blueorange-7
blueorange-8
blueorange-9
blueorange-10
blueorange-11
# brownbluegreen
brownbluegreen-3
brownbluegreen-4
brownbluegreen-5
brownbluegreen-6
brownbluegreen-7
brownbluegreen-8
brownbluegreen-9
brownbluegreen-10
brownbluegreen-11
# purplegreen
purplegreen-3
purplegreen-4
purplegreen-5
purplegreen-6
purplegreen-7
purplegreen-8
purplegreen-9
purplegreen-10
purplegreen-11
# pinkyellowgreen
pinkyellowgreen-3
pinkyellowgreen-4
pinkyellowgreen-5
pinkyellowgreen-6
pinkyellowgreen-7
pinkyellowgreen-8
pinkyellowgreen-9
pinkyellowgreen-10
pinkyellowgreen-11
# purpleorange
purpleorange-3
purpleorange-4
purpleorange-5
purpleorange-6
purpleorange-7
purpleorange-8
purpleorange-9
purpleorange-10
purpleorange-11
# redblue
redblue-3
redblue-4
redblue-5
redblue-6
redblue-7
redblue-8
redblue-9
redblue-10
redblue-11
# redgrey
redgrey-3
redgrey-4
redgrey-5
redgrey-6
redgrey-7
redgrey-8
redgrey-9
redgrey-10
redgrey-11
# redyellowblue
redyellowblue-3
redyellowblue-4
redyellowblue-5
redyellowblue-6
redyellowblue-7
redyellowblue-8
redyellowblue-9
redyellowblue-10
redyellowblue-11
# redyellowgreen
redyellowgreen-3
redyellowgreen-4
redyellowgreen-5
redyellowgreen-6
redyellowgreen-7
redyellowgreen-8
redyellowgreen-9
redyellowgreen-10
redyellowgreen-11
# spectral
spectral-3
spectral-4
spectral-5
spectral-6
spectral-7
spectral-8
spectral-9
spectral-10
spectral-11