d3-color

Even though your browser understands a lot about colors, it doesn’t offer much help in manipulating colors through JavaScript. The d3-color module therefore provides representations for various color spaces, allowing specification, conversion and manipulation. (Also see d3-interpolate for color interpolation.)

For example, take the color named “steelblue”:

var c = d3.color("steelblue"); // {r: 70, g: 130, b: 180, opacity: 1}

Let’s try converting it to HSL:

var c = d3.hsl("steelblue"); // {h: 207.27…, s: 0.44, l: 0.4902…, opacity: 1}

Now rotate the hue by 90°, bump up the saturation, and format as a string for CSS:

c.h += 90;
c.s += 0.2;
c + ""; // rgb(198, 45, 205)

To fade the color slightly:

c.opacity = 0.8;
c + ""; // rgba(198, 45, 205, 0.8)

In addition to the ubiquitous and machine-friendly RGB and HSL color space, d3-color supports two color spaces that are designed for humans:

• Dave Green’s Cubehelix
• Lab (CIELAB) and HCL (CIELCH)

Cubehelix features monotonic lightness, while Lab and HCL are perceptually uniform. Note that HCL is the cylindrical form of Lab, similar to how HSL is the cylindrical form of RGB.

For additional color spaces, see:

• d3-cam16
• d3-cam02
• d3-hsv
• d3-hcg

Installing

If you use NPM, npm install d3-color. Otherwise, download the latest release. You can also load directly from d3js.org, either as a standalone library or as part of D3 4.0. 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>

var steelblue = d3.rgb("steelblue");

</script>

Try d3-color in your browser.

API Reference

d3.color(specifier) Source

Parses the specified CSS Color Module Level 3 specifier string, returning an RGB or HSL color. If the specifier was not valid, null is returned. Some examples:

• rgb(255, 255, 255)
• rgb(10%, 20%, 30%)
• rgba(255, 255, 255, 0.4)
• rgba(10%, 20%, 30%, 0.4)
• hsl(120, 50%, 20%)
• hsla(120, 50%, 20%, 0.4)
• #ffeeaa
• #fea
• steelblue

The list of supported named colors is specified by CSS.

Note: this function may also be used with instanceof to test if an object is a color instance. The same is true of color subclasses, allowing you to test whether a color is in a particular color space.

color.opacity

This color’s opacity, typically in the range [0, 1].

color.rgb() Source

Returns the RGB equivalent of this color. For RGB colors, that’s this.

color.brighter([k]) Source

Returns a brighter copy of this color. If k is specified, it controls how much brighter the returned color should be. If k is not specified, it defaults to 1. The behavior of this method is dependent on the implementing color space.

color.darker([k]) Source

Returns a darker copy of this color. If k is specified, it controls how much darker the returned color should be. If k is not specified, it defaults to 1. The behavior of this method is dependent on the implementing color space.

color.displayable() Source

Returns true if and only if the color is displayable on standard hardware. For example, this returns false for an RGB color if any channel value is less than zero or greater than 255, or if the opacity is not in the range [0, 1].

color.hex() Source

Returns a hexadecimal string representing this color in RGB space, such as #f7eaba. If this color is not displayable, a suitable displayable color is returned instead. For example, RGB channel values greater than 255 are clamped to 255.

color.toString() Source

Returns a string representing this color according to the CSS Object Model specification, such as rgb(247, 234, 186) or rgba(247, 234, 186, 0.2). If this color is not displayable, a suitable displayable color is returned instead. For example, RGB channel values greater than 255 are clamped to 255.

d3.rgb(r, g, b[, opacity]) Source
d3.rgb(specifier)
d3.rgb(color)

Constructs a new RGB color. The channel values are exposed as r, g and b properties on the returned instance. Use the RGB color picker to explore this color space.

If r, g and b 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 RGB color space. See color for examples. If a color instance is specified, it is converted to the RGB color space using color.rgb. Note that unlike color.rgb this method always returns a new instance, even if color is already an RGB color.

d3.hsl(h, s, l[, opacity]) Source
d3.hsl(specifier)
d3.hsl(color)

Constructs a new HSL color. The channel values are exposed as h, s and l properties on the returned instance. Use the HSL color picker to explore this color space.

If h, s and l 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 HSL color space. See color for examples. If a color instance is specified, it is converted to the RGB color space using color.rgb and then converted to HSL. (Colors already in the HSL color space skip the conversion to RGB.)

d3.lab(l, a, b[, opacity]) Source
d3.lab(specifier)
d3.lab(color)

Constructs a new Lab color. The channel values are exposed as l, a and b properties on the returned instance. Use the Lab color picker to explore this color space. The value of l is typically in the range [0, 100], while a and b are typically in [-160, +160].

If l, a and b 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 Lab color space. See color for examples. If a color instance is specified, it is converted to the RGB color space using color.rgb and then converted to Lab. (Colors already in the Lab color space skip the conversion to RGB, and colors in the HCL color space are converted directly to Lab.)

d3.gray(l[, opacity]) Source

Constructs a new Lab color with the specified l value and a = b = 0.

d3.hcl(h, c, l[, opacity]) Source
d3.hcl(specifier)
d3.hcl(color)

Constructs a new HCL color. The channel values are exposed as h, c and l properties on the returned instance. Use the HCL color picker to explore this color space. The value of l is typically in the range [0, 100], c is typically in [0, 230], and h is typically in [0, 360).

If h, c and l 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 HCL color space. See color for examples. If a color instance is specified, it is converted to the RGB color space using color.rgb and then converted to HCL. (Colors already in the HCL color space skip the conversion to RGB, and colors in the Lab color space are converted directly to HCL.)

d3.lch(l, c, h[, opacity]) Source
d3.lch(specifier)
d3.lch(color)

Equivalent to d3.hcl, but with reversed argument order.

d3.cubehelix(h, s, l[, opacity]) Source
d3.cubehelix(specifier)
d3.cubehelix(color)

Constructs a new Cubehelix color. The channel values are exposed as h, s and l properties on the returned instance. Use the Cubehelix color picker to explore this color space.

If h, s and l 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 Cubehelix color space. See color for examples. If a color instance is specified, it is converted to the RGB color space using color.rgb and then converted to Cubehelix. (Colors already in the Cubehelix color space skip the conversion to RGB.)