The first step is to get your color into chroma.js. That's what the generic constructor `chroma() does. This function attempts to guess the format of the input color for you. For instance, it will recognize any named color from the W3CX11 specification:

chroma('hotpink')

If there's no matching named color, chroma.js checks for a hexadecimal string. It ignores case, the # sign is optional, and it can recognize the shorter three letter format as well. So, any of these are valid hexadecimal representations: #ff3399, FF3399, #f39, etc.

chroma('#ff3399');
chroma('F39');

In addition to hex strings, hexadecimal numbers (in fact, just any number between 0 and 16777215) will be recognized, too.

chroma(0xff3399)

You also can pass RGB values individually. Each parameter must be within 0..255. You can pass the numbers as individual arguments or as an array.

chroma(0xff, 0x33, 0x99);
chroma(255, 51, 153);
chroma([255, 51, 153]);

You can construct colors from different color spaces by passing the name of color space as the last argument. Here we define the same color in HSL by passing the hue angle (0-360) and percentages for saturation and l*ightness:

chroma(330, 1, 0.6, 'hsl')

New (since 2.0): you can also construct colors by passing an plain JS object with attributes corresponding to a color space supported by chroma.js:

chroma({ h:120, s:1, l:0.75});
chroma({ l:80, c:25, h:200 });
chroma({ c:1, m:0.5, y:0, k:0.2});

chroma.valid Copy Section

Also new: you can use chroma.valid to try if a color argument can be correctly parsed as color by chroma.js:

chroma.valid('red');
chroma.valid('bread');
chroma.valid('#F0000D');
chroma.valid('#FOOOOD');

chroma.hsl Copy Section

Alternatively, every color space has its own constructor function under the chroma namespace. For a list of all supported color spaces, check the appendix.

chroma.hsl(330, 1, 0.6)

chroma.hsv Copy Section

chroma.lab(40, -20, 50);
chroma.lab(50, -20, 50);
chroma.lab(80, -20, 50);

| | |
|-------------|-------------------------------------------------------------------------------------------------------|
| D50 | Represents the color temperature of daylight at 5000K. |
| D55 | Represents mid-morning or mid-afternoon daylight at 5500K. |
| D65 | Represents average daylight at 6500K. |
| A | Represents the color temperature of a typical incandescent light bulb at approximately 2856K. |
| B | Represents noon daylight with a color temperature of approximately 4874K. |
| C | Represents average or north sky daylight; it's a theoretical construct, not often used in practical applications. |
| F2 | Represents cool white fluorescent light. |
| F7 | This is a broad-band fluorescent light source with a color temperature of approximately 6500K. |
| F11 | This is a narrow tri-band fluorescent light source with a color temperature of approximately 4000K. |
| E | Represents an equal energy white point, where all wavelengths in the visible spectrum are equally represented. |

chroma('hotpink').lab();
chroma.setLabWhitePoint('F2');
chroma('hotpink').lab();

chroma.getLabWhitePoint Copy Section

Returns the name of the currently set CIE Lab white reference point.

chroma.getLabWhitePoint();

chroma.lch Copy Section

The range for lightness and chroma depend on the hue, but go roughly from 0..100-150. The range for hue is 0..360.

chroma.lch(80, 40, 130);
chroma(80, 40, 130, 'lch');

chroma.hcl Copy Section

chroma.hcl(130, 40, 80);
chroma(130, 40, 80, 'hcl');

chroma.oklab(0.4,-0.2,0.5);
chroma.oklab(0.5,-0.2,0.5);
chroma.oklab(0.8,-0.2,0.5);

chroma.oklch(0.5, 0.2, 240);
chroma(0.8, 0.12, 60, 'oklch');

chroma.cmyk(0.2, 0.8, 0, 0);
chroma(0.2, 0.8, 0, 0, 'cmyk');

GL is a variant of RGB(A), with the only difference that the components are normalized to the range of 0..1.

chroma.gl(0.6, 0, 0.8);
chroma.gl(0.6, 0, 0.8, 0.5);
chroma(0.6, 0, 0.8, 'gl');

chroma.temperature Copy Section

chroma.temperature(2000); // candle light
chroma.temperature(3500); // sunset
chroma.temperature(6500); // daylight

The effective temperature range goes from 0 to about 30000 Kelvin,

f = function(i) {
    return chroma.temperature(i * 30000)
}

chroma.mix Copy Section

chroma.mix('red', 'blue');
chroma.mix('red', 'blue', 0.25);
chroma.mix('red', 'blue', 0.75);

chroma.mix('red', 'blue', 0.5, 'rgb');
chroma.mix('red', 'blue', 0.5, 'hsl');
chroma.mix('red', 'blue', 0.5, 'lab');
chroma.mix('red', 'blue', 0.5, 'lch');
chroma.mix('red', 'blue', 0.5, 'lrgb');

Similar to chroma.mix, but accepts more than two colors. Simple averaging of R,G,B components and the alpha channel.

colors = ['#ddd', 'yellow', 'red', 'teal'];
chroma.average(colors); // lrgb
chroma.average(colors, 'rgb');
chroma.average(colors, 'lab');
chroma.average(colors, 'lch');

Also works with alpha channels.

chroma.average(['red', 'rgba(0,0,0,0.5)']).css();

As of version 2.1 you can also provide an array of weights to
compute a weighted average of colors.

colors = ['#ddd', 'yellow', 'red', 'teal'];
chroma.average(colors, 'lch'); // unweighted
chroma.average(colors, 'lch', [1,1,2,1]);
chroma.average(colors, 'lch', [1.5,0.5,1,2.3]);

chroma.blend Copy Section

Blends two colors using RGB channel-wise blend functions. Valid blend modes are multiply, darken, lighten, screen, overlay, burn, and dodge.

chroma.blend('4CBBFC', 'EEEE22', 'multiply');
chroma.blend('4CBBFC', 'EEEE22', 'darken');
chroma.blend('4CBBFC', 'EEEE22', 'lighten');

chroma.random Copy Section

chroma.random();
chroma.random();
chroma.random();

// contrast smaller than 4.5 = too low
chroma.contrast('pink', 'hotpink');
// contrast greater than 4.5 = high enough
chroma.contrast('pink', 'purple');

chroma.contrastAPCA('hotpink', 'pink');
chroma.contrastAPCA('purple', 'pink');

Computes the Euclidean distance between two colors in a given color space (default is Lab).

chroma.distance('#fff', '#ff0', 'rgb');
chroma.distance('#fff', '#f0f', 'rgb');
chroma.distance('#fff', '#ff0');
chroma.distance('#fff', '#f0f');

chroma.deltaE Copy Section

chroma.deltaE('#ededee', '#ededee');
chroma.deltaE('#ededee', '#edeeed');
chroma.deltaE('#ececee', '#eceeec');
chroma.deltaE('#e9e9ee', '#e9eee9');
chroma.deltaE('#e4e4ee', '#e4eee4');
chroma.deltaE('#e0e0ee', '#e0eee0');
chroma.deltaE('#000000', '#ffffff');

chroma.brewer.OrRd

chroma.scale('RdBu').colors(5);
// offical 5-color RdBu:
['#ca0020', '#f4a582', '#f7f7f7', '#92c5de', '#0571b0']

chroma
    .scale(chroma.brewer.RdBu.slice(1,-1))
    .colors(5);

chroma.scale(['#ca0020', '#f4a582', '#f7f7f7', '#92c5de', '#0571b0'])

You can access a list of all available palettes via Object.keys(chroma.brewer):

Object.keys(chroma.brewer)
// ['OrRd', 'PuBu', 'BuPu', 'Oranges', 'BuGn', 'YlOrBr', 'YlGn', 'Reds', 'RdPu', 'Greens', 'YlGnBu', 'Purples', 'GnBu', 'Greys', 'YlOrRd', 'PuRd', 'Blues', 'PuBuGn', 'Viridis', 'Spectral', 'RdYlGn', 'RdBu', 'PiYG', 'PRGn', 'RdYlBu', 'BrBG', 'RdGy', 'PuOr', 'Set2', 'Accent', 'Set1', 'Set3', 'Dark2', 'Paired', 'Pastel2', 'Pastel1']

chroma.limits Copy Section

var data = [2.0,3.5,3.6,3.8,3.8,4.1,4.3,4.4,
            4.6,4.9,5.2,5.3,5.4,5.7,5.8,5.9,
            6.2,6.5,6.8,7.2,8];

chroma.limits(data, 'e', 4);

chroma.limits(data, 'q', 4);

chroma.limits(data, 'l', 4);

chroma.limits(data, 'k', 4);

Get and set the color opacity using color.alpha.

chroma('red').alpha(0.5);
chroma('rgba(255,0,0,0.35)').alpha();

color.darken Copy Section

chroma('hotpink').darken();
chroma('hotpink').darken(2);
chroma('hotpink').darken(2.6);

Similar to darken, but the opposite direction

chroma('hotpink').brighten();
chroma('hotpink').brighten(2);
chroma('hotpink').brighten(3);

color.saturate Copy Section

chroma('slategray').saturate();
chroma('slategray').saturate(2);
chroma('slategray').saturate(3);

Similar to saturate, but the opposite direction.

chroma('hotpink').desaturate();
chroma('hotpink').desaturate(2);
chroma('hotpink').desaturate(3);

color.mix Copy Section

Mix this color with a target color. The mix ratio is a value between 0 and 1. This is the same as chroma.mix but with the first parameter already set. As such, the color space used can be adjusted.

chroma('hotpink').mix('blue');
chroma('hotpink').mix('blue', 0.25);
chroma('hotpink').mix('blue', 0.75, 'lab');

color.shade Copy Section

Produce a shade of the color. This is syntactic sugar for color.mix with a target color of black.

chroma('hotpink').shade(0.25);
chroma('hotpink').shade(0.5);
chroma('hotpink').shade(0.75);

color.tint Copy Section

Produce a tint of the color. This is syntactic sugar for color.mix with a target color of white.

chroma('hotpink').tint(0.25);
chroma('hotpink').tint(0.5);
chroma('hotpink').tint(0.75);

color.set Copy Section

Changes a single channel and returns the result a new chroma object.

// change hue to 0 deg (=red)
chroma('skyblue').set('hsl.h', 0);
// set chromaticity to 30
chroma('hotpink').set('lch.c', 30);

Relative changes work, too:

// half Lab lightness
chroma('orangered').set('lab.l', '*0.5');
// double Lch saturation
chroma('darkseagreen').set('lch.c', '*2');

color.get Copy Section

chroma('orangered').get('lab.l');
chroma('orangered').get('hsl.l');
chroma('orangered').get('rgb.g');

If called without arguments color.luminance returns the relative brightness, according to the WCAG definition. Normalized to 0 for darkest black and 1 for lightest white.

chroma('white').luminance();
chroma('aquamarine').luminance();
chroma('hotpink').luminance();
chroma('darkslateblue').luminance();
chroma('black').luminance();

chroma.js also allows you to adjust the luminance of a color. The source color will be interpolated with black or white until the correct luminance is found.

// set lumincance to 50% for all colors
chroma('white').luminance(0.5);
chroma('aquamarine').luminance(0.5);
chroma('hotpink').luminance(0.5);
chroma('darkslateblue').luminance(0.5);

By default, this interpolation is done in RGB, but you can interpolate in different color spaces by passing them as second argument:

chroma('aquamarine').luminance(0.5); // rgb
chroma('aquamarine').luminance(0.5, 'lab');
chroma('aquamarine').luminance(0.5, 'hsl');

color.hex Copy Section

chroma('orange').hex()

chroma('orange').hex();
chroma('orange').alpha(0.5).hex();
chroma('orange').alpha(0.5).hex('rgb');

You can use .hex('argb') in case you need to encode the color with the alpha channel as first byte rather than the last:

chroma('orange').hex('argb');; // '#ffffa500'

color.name Copy Section

Returns the named color. Falls back to hexadecimal RGB string, if the color isn't present.

chroma('#ffa500').name();
chroma('#ffa505').name();

color.css Copy Section

Returns a CSS string representation that can be used as CSS-color definition.

chroma('teal').css();
chroma('teal').alpha(0.5).css();

By default chroma is using the rgb() color space, but you can pass a color space name as first argument. Accepted color spaces are rgb, hsl, lab, lch, oklab, and oklch.

chroma('teal').css('hsl');
chroma('teal').css('lab');
chroma('teal').css('oklch');

color.rgb Copy Section

Returns an array with the red, green, and blue component, each as number within the range 0..255. Chroma internally stores RGB channels as floats but rounds the numbers before returning them. You can pass false to prevent the rounding.

chroma('orange').rgb();
chroma('orange').darken().rgb();
chroma('orange').darken().rgb(false);

color.rgba Copy Section

Just like color.rgb but adds the alpha channel to the returned array.

chroma('orange').rgba();
chroma('hsla(20, 100%, 40%, 0.5)').rgba();

color.hsl Copy Section

Returns an array with the hue, saturation, and lightness component. Hue is the color angle in degree (0..360), saturation and lightness are within 0..1. Note that for hue-less colors (black, white, and grays), the hue component will be NaN.

chroma('orange').hsl();
chroma('white').hsl();

color.hsv Copy Section

Returns an array with the hue, saturation, and value components. Hue is the color angle in degree (0..360), saturation and value are within 0..1. Note that for hue-less colors (black, white, and grays), the hue component will be NaN.

chroma('orange').hsv();
chroma('white').hsv();

color.hsi Copy Section

Returns an array with the hue, saturation, and intensity components, each as number between 0 and 255. Note that for hue-less colors (black, white, and grays), the hue component will be NaN.

chroma('orange').hsi();
chroma('white').hsi();

color.lab Copy Section

Returns an array with the L, a, and b components.

chroma('orange').lab()

color.lch Copy Section

Returns an array with the Lightness, chroma, and hue components.

chroma('skyblue').lch()

color.hcl Copy Section

Alias of lch, but with the components in reverse order.

chroma('skyblue').hcl()

color.oklab Copy Section

Returns an array with the L, a, and b components in the OKLab color space.

chroma('orange').oklab()

color.oklch Copy Section

Returns an array with the Lightness, chroma, and hue components in the OKLch color space.

chroma('skyblue').oklch()

color.num Copy Section

Returns the numeric representation of the hexadecimal RGB color.

chroma('#000000').num();
chroma('#0000ff').num();
chroma('#00ff00').num();
chroma('#ff0000').num();

color.temperature Copy Section

Estimate the temperature in Kelvin of any given color, though this makes the only sense for colors from the temperature gradient above.

chroma('#ff3300').temperature();
chroma('#ff8a13').temperature();
chroma('#ffe3cd').temperature();
chroma('#cbdbff').temperature();
chroma('#b3ccff').temperature();

color.gl Copy Section

Like RGB, but in the channel range of [0..1] instead of [0..255]

chroma('33cc00').gl();

color.clipped Copy Section

When converting colors from CIELab color spaces to RGB the color channels get clipped to the range of [0..255]. Colors outside that range may exist in nature but are not displayable on RGB monitors (such as ultraviolet). you can use color.clipped to test if a color has been clipped or not.

[c = chroma.hcl(50, 40, 20), c.clipped()];
[c = chroma.hcl(50, 40, 40), c.clipped()];
[c = chroma.hcl(50, 40, 60), c.clipped()];
[c = chroma.hcl(50, 40, 80), c.clipped()];
[c = chroma.hcl(50, 40, 100), c.clipped()];

As a bonus feature you can access the unclipped RGB components using color._rgb._unclipped.

chroma.hcl(50, 40, 100).rgb();
chroma.hcl(50, 40, 100)._rgb._unclipped;

color scales Copy Chapter

chroma.scale Copy Section

A color scale, created with chroma.scale, is a function that maps numeric values to a color palette. The default scale has the domain 0..1 and goes from white to black.

f = chroma.scale();
f(0.25);
f(0.5);
f(0.75);

You can pass an array of colors to chroma.scale. Any color that can be read by chroma() will work here, too. If you pass more than two colors, they will be evenly distributed along the gradient.

chroma.scale(['yellow', '008ae5']);
chroma.scale(['yellow', 'red', 'black']);

scale.domain Copy Section

You can change the input domain to match your specific use case. If called with no arguments, scale.domain returns the original array of positions along the scale where the color ramp was sampled.

// default domain is [0,1]
chroma.scale(['yellow', '008ae5']);
// set domain to [0,100]
chroma.scale(['yellow', '008ae5']).domain([0,100]);

You can use the domain to set the exact positions of each color.

// default domain is [0,1]
chroma.scale(['yellow', 'lightgreen', '008ae5'])
    .domain([0,0.25,1]);

scale.mode Copy Section

As with chroma.mix, the result of the color interpolation will depend on the color mode in which the channels are interpolated. The default mode is RGB:

chroma.scale(['yellow', '008ae5']);

This is often fine, but sometimes, two-color RGB gradients goes through kind of grayish colors, and Lab interpolation produces better results:

chroma.scale(['yellow', 'navy']);
chroma.scale(['yellow', 'navy']).mode('lab');

Also note how the RGB interpolation can get very dark around the center. You can achieve better results using linear RGB interpolation:

chroma.scale(['#f00', '#0f0']);
chroma.scale(['#f00', '#0f0']).mode('lrgb');

Other useful interpolation modes could be HSL or Lch, though both tend to produce too saturated / glowing gradients.

chroma.scale(['yellow', 'navy']).mode('lab');
chroma.scale(['yellow', 'navy']).mode('hsl');
chroma.scale(['yellow', 'navy']).mode('lch');

scale.gamma Copy Section

Gamma-correction can be used to "shift" a scale's center more the the beginning (gamma < 1) or end (gamma > 1), typically used to "even" the lightness gradient. Default is 1.

chroma.scale('YlGn').gamma(0.5);
chroma.scale('YlGn').gamma(1);
chroma.scale('YlGn').gamma(2);

scale.correctLightness Copy Section

This makes sure the lightness range is spread evenly across a color scale. Especially useful when working with multi-hue color scales, where simple gamma correction can't help you very much.

chroma.scale(['black', 'red', 'yellow', 'white']);
chroma.scale(['black', 'red', 'yellow', 'white'])
    .correctLightness();

scale.cache Copy Section

By default chroma.scale instances will cache each computed value => color pair. You can turn off the cache by setting

chroma.scale(['yellow', '008ae5']).cache(false);

scale.padding Copy Section

chroma.scale('RdYlBu');
chroma.scale('RdYlBu').padding(0.15);
chroma.scale('RdYlBu').padding(0.3);
chroma.scale('RdYlBu').padding(-0.15);

chroma.scale('OrRd');
chroma.scale('OrRd').padding([0.2, 0]);

You can call scale.colors(n) to quickly grab n equi-distant colors from a color scale. If called with no arguments, scale.colors returns the original array of colors used to create the scale.

chroma.scale('OrRd').colors(5);
chroma.scale(['white', 'black']).colors(12);

If you want to return chroma instances just pass null as format.

scale.classes Copy Section

If you want the scale function to return a distinct set of colors instead of a continuous gradient, you can use scale.classes. If you pass a number the scale will broken into equi-distant classes:

// continuous
chroma.scale('OrRd');
// class breaks
chroma.scale('OrRd').classes(5);
chroma.scale('OrRd').classes(8);

You can also define custom class breaks by passing them as array:

chroma.scale('OrRd').classes([0,0.3,0.55,0.85,1]);

scale.nodata Copy Section

When you pass a non-numeric value like null or undefined to a chroma.scale, "#cccccc" is returned as fallback or "no data" color. You can change the no-data color:

chroma.scale('OrRd')(null);
chroma.scale('OrRd')(undefined);
chroma.scale('OrRd').nodata('#eee')(null);

chroma.brewer Copy Section

chroma.js includes the definitions from ColorBrewer2.org. Read more about these colors in the corresponding paper by Mark Harrower and Cynthia A. Brewer.

chroma.scale('YlGnBu');
chroma.scale('Spectral');

To reverse the colors you could simply reverse the domain:

chroma.scale('Spectral').domain([1,0]);

You can access the colors directly using chroma.brewer.

chroma.brewer.OrRd

chroma.bezier Copy Section

chroma.bezier returns a function that bezier-interpolates between colors in Lab space. The input range of the function is [0..1].

// linear interpolation
chroma.scale(['yellow', 'red', 'black']);
// bezier interpolation
chroma.bezier(['yellow', 'red', 'black']);

You can convert an bezier interpolator into a chroma.scale instance

chroma.bezier(['yellow', 'red', 'black'])
    .scale()
    .colors(5);

cubehelix Copy Chapter

// use the default helix...
chroma.cubehelix();
// or customize it
chroma.cubehelix()
    .start(200)
    .rotations(-0.5)
    .gamma(0.8)
    .lightness([0.3, 0.8]);

start color for hue rotation, default=300

chroma.cubehelix().start(300);
chroma.cubehelix().start(200);

cubehelix.rotations Copy Section

number (and direction) of hue rotations (e.g. 1=360°, 1.5=540°`), default=-1.5

chroma.cubehelix().rotations(-1.5);
chroma.cubehelix().rotations(0.5);
chroma.cubehelix().rotations(3);

cubehelix.hue Copy Section

chroma.cubehelix();
chroma.cubehelix().hue(0.5);
chroma.cubehelix().hue([1,0]);

chroma.cubehelix().gamma(1);
chroma.cubehelix().gamma(0.5);

chroma.cubehelix().lightness([0,1]);
chroma.cubehelix().lightness([1,0]);
chroma.cubehelix().lightness([0.3,0.7]);

You can call cubehelix.scale() to use the cube-helix through the chroma.scale interface.

chroma.cubehelix()
    .start(200)
    .rotations(-0.35)
    .gamma(0.7)
    .lightness([0.3, 0.8])
  .scale() // convert to chroma.scale
    .correctLightness()
    .colors(5);

---

CHANGELOG Copy Section

Changelog Copy Chapter

3.2.0 Copy Section

- scale.domain now returns the original domain array when called with no arguments

3.1.3 Copy Section

- updated dependencies

3.1.2 Copy Section

- fixed a bug in Lch interpolation of hue-less colors

3.1.1 Copy Section

- fix: allow deep-imports in vite projects

3.1.0 Copy Section

- feat: parse 'transparent' as black with 0% opacity - resolves #280
- make it easier to access colorbrewer palette names - resolves #314
- docs: explain differences to official colorbrewer scales - resolves #316
- fix: correct parsing of modern css colors with percentage alpha - resolves #297
- fix: css output for hue-less colors in lch() and oklch() - resolves #357

3.0.0 Copy Section

- 🎉 NEW: Add support for modern CSS color spaces. This means you can now export and parse CSS colors in lab(), lch(), oklab(), oklch() space.
- 🎉 NEW: you can now control the standard white reference point for the CIE Lab and CIE Lch color spaces via setLabWhitePoint.
- Breaking: color.css() will no longer return legacy CSS colors like rgb(255, 255, 0) but use modern CSS colors like rgb(255 255 0) instead.
- fix: you can now use chroma.js both via the default export as well as named exports in ES6.
- fix: switch to W3C implementation of OKLab color space

2.6.0 Copy Section

- 🎉 NEW: add color.shade(), color.tint().
- fix: remove false w3c color cornflower

2.5.0 Copy Section

- refactored code base to ES6 modules

2.4.0 Copy Section

- add support for Oklab and Oklch color spaces

2.3.0 Copy Section

- use binom of degree n in chroma.bezier

2.2.0 Copy Section

- use Delta e2000 for chroma.deltaE #269

2.0.3 Copy Section

- hsl2rgb will, like other x2rgb conversions now set the default alpha to 1

2.0.2 Copy Section

- use a more mangle-safe check for Color class constructor to fix issues with uglifyjs and terser

2.0.1 Copy Section

- added chroma.valid() for checking if a color can be parsed by chroma.js

2.0.0 Copy Section

- chroma.js has been ported from CoffeeScript to ES6! This means you can now import parts of chroma in your projects!
- changed HCG input space from [0..360,0..100,0..100] to [0..360,0..1,0..1] (to be in line with HSL)
- added new object unpacking (e.g. hsl2rgb({h,s,l}))
- changed default interpolation to lrgb in mix/interpolate and average.
- if colors can't be parsed correctly, chroma will now throw Errors instead of silently failing with console.errors

1.4.1 Copy Section

- chroma.scale() now interprets null as NaN and returns the fallback color. Before it had interpreted null as 0
- added scale.nodata() to allow customizing the previously hard-coded fallback (aka "no data") color #cccccc

1.4.0 Copy Section

- color.hex() now automatically sets the mode to 'rgba' if the colors alpha channel is < 1. so chroma('rgba(255,0,0,.5)').hex() will now return "#ff000080" instead of "#ff0000". if this is not what you want, you must explicitly set the mode to rgb using .hex("rgb").
- bugfix in chroma.average in LRGB mode (#187)
- chroma.scale now also works with just one color (#180)

1.3.5 Copy Section

- added LRGB interpolation

1.3.4 Copy Section

- passing _null_ as mode in scale.colors will return chroma objects

1.3.3 Copy Section

- added color.clipped
- added chroma.distance
- added chroma.deltaE
- color.set now returns a new chroma instance
- chroma.scale now allows disabling of internal cache
- chroma.average now works with any color mode
- added unit tests for color conversions
- use hex colors as default string representation
- RGB channels are now stored as floats internally for higher precision
- bugfix with cubehelix and constant lightness
- bugfix in chroma.limits quantiles
- bugfix when running scale.colors(1)
- bugfix in hsi2rgb color conversion

1.2.2 Copy Section

- scale.colors() now returns the original colors instead of just min/max range

1.2.0 Copy Section

- added chroma.average for averaging colors

1.1.0 Copy Section

- refactored chroma.scale
- changed behaviour of scale.domain
- added scale.classes
- added scale.padding

1.0.2 Copy Section

- standardized alpha channel construction
- chroma.bezier automatically returns chroma.scale

1.0.1 Copy Section

- added simple color output to chroma.scale().colors()

1.0.0 Copy Section

- numeric interpolation does what it should
- refactored and modularized code base
- changed argument order of Color::interpolate

---

Readme Copy Section

Chroma.js

Chroma.js is a ~~tiny~~ small-ish zero-dependency JavaScript library for all kinds of color conversions and color scales.

[](https://travis-ci.com/gka/chroma.js)
[](https://bundlejs.com/?q=chroma-js)

Usage Copy Section

Install from npm

npm install chroma-js

Import package into project

import chroma from "chroma-js";

Initiate and manipulate colors:

chroma('#D4F880').darken().hex();  // #a1c550

Working with color scales is easy, too:

scale = chroma.scale(['white', 'red']);
scale(0.5).hex(); // #FF7F7F

Lab/Lch interpolation looks better than RGB

chroma.scale(['white', 'red']).mode('lab');

Custom domains! Quantiles! Color Brewer!!

chroma.scale('RdYlBu').domain(myValues, 7, 'quantiles');

And why not use logarithmic color scales once in your life?

chroma.scale(['lightyellow', 'navy']).domain([1, 100000], 7, 'log');

Like it? Copy Section

Why not dive into the interactive documentation (there's a static version, too). You can download chroma.min.js or use the hosted version on unpkg.com.

You can use it in node.js, too!

npm install chroma-js

Or you can use it in SASS using chromatic-sass!

Want to contribute? Copy Section

Come over and say hi in our Discord channel!

Build instructions Copy Section

First clone the repository and install the dev dependencies:

git clone [email protected]:gka/chroma.js.git
cd chroma.js
npm install

Then compile the coffee-script source files to the build files:

npm run build

Don't forget to tests your changes! You will probably also want to add new test to the /test` folder in case you added a feature.

npm test

And to update the documentation just run

npm run docs

To preview the docs locally you can use

npm run docs-preview

Similar Libraries / Prior Art Copy Section

* Chromatist
* GrapeFruit (Python)
* colors.py (Python)
* d3.js
* Color Art (Rust)

Author Copy Section

Chroma.js is written by Gregor Aisch.

License Copy Section

Released under BSD license.
Versions prior to 0.4 were released under GPL.

Further reading Copy Section

* How To Avoid Equidistant HSV Colors
* Mastering Multi-hued Color Scales with Chroma.js

FAQ Copy Section

There have been no commits in X weeks. Is chroma.js dead?

No! It's just that the author of this library has other things to do than devoting every week of his life to making cosmetic changes to a piece of software that is working just fine as it is, just so that people like you don't feel like it's abandoned and left alone in this world to die. Bugs will be fixed. Some new things will come at some point. Patience.

I want to help maintaining chroma.js!

Yay, that's awesome! Please say hi at our Discord chat to get in touch

---