# 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 | The name of the color scheme to use. See the scheme reference below.Required. |

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