# 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 | Color[ ] | 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 Required.`interpolate` property to set the interpolation type (default 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 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. 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 gray(f) {
var g = Math.max(0, Math.min(255, Math.round(255 * f))) + '';
return 'rgb(' + g + ', ' + g + ', ' + g + ')';
}
// Register the interpolator. Now the scheme "mygray" can be used in Vega specs
vega.scheme("mygray", gray);
```

## Scheme Reference

### Categorical Schemes

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

### 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.

### 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**

**bluepurple**

**bluepurple-3**

**bluepurple-4**

**bluepurple-5**

**bluepurple-6**

**bluepurple-7**

**bluepurple-8**

**bluepurple-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**

**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**

### Cyclical Schemes ≥ 4.0

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**

**sinebow**