/D3.js 4


This module implements the HSV (Hue, Saturation, Value) color space.

For example, to recreate R’s terrain.colors:

var i0 = d3.interpolateHsvLong(d3.hsv(120, 1, 0.65), d3.hsv(60, 1, 0.90)),
    i1 = d3.interpolateHsvLong(d3.hsv(60, 1, 0.90), d3.hsv(0, 0, 0.95));

function interpolateTerrain(t) {
  return t < 0.5 ? i0(t * 2) : i1((t - 0.5) * 2);


If you use NPM, npm install d3-hsv. Otherwise, download the latest release. You can also load directly from d3js.org as a standalone library. AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3 global is exported:

<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-hsv.v0.1.min.js"></script>

var yellow = d3.hsv("yellow"); // {h: 60, s: 1, v: 1, opacity: 1}


Try d3-hsv in your browser.

API Reference

d3.hsv(h, s, v[, opacity])

Constructs a new HSV color. The channel values are exposed as h, s and v properties on the returned instance.

If h, s and v are specified, these represent the channel values of the returned color; an opacity may also be specified. If a CSS Color Module Level 3 specifier string is specified, it is parsed and then converted to the HSV color space. See d3.color for examples. If a color instance is specified, it is converted to the RGB color space using color.rgb and then converted to HSV.

d3.interpolateHsv(a, b)

d3.interpolateHsvLong(a, b)

© 2010–2017 Michael Bostock
Licensed under the BSD License.