Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Make Your Things Pretty With chroma-js

DZone's Guide to

Make Your Things Pretty With chroma-js

Chroma is a JavaScript library for dealing with colors. Read them, change them, make some delightful scales. Read on to learn how to use it!

· Web Dev Zone ·
Free Resource

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

I once asked Shirley Wu how she makes all her dataviz so pretty: Baskerville font and chroma-js.

Chroma is a JavaScript library for dealing with colors. Read them, change them, make some delightful scales. It has changed the way I work.

I'm still new to the library, so I don't know everything. Here are some useful things I've found.

You can see them in action in this unfinished piechart showing how I spend money on transport. 

Delightful Color Scales

Chroma color scales are designed to be delightful. You define two colors, and chroma-js finds the most pleasant path between them.

Here's the code: 

<div id="app"></div>
.swatch {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: black;
}
const scaleLch = chroma
  .scale(["#fafa6e", "#2A4858"])
  .mode("lch")
  .colors(6);

const scaleRgb = chroma
  .scale(["#fafa6e", "#2A4858"])
  .mode("rgb")
  .colors(6);

const Chroma = ({ scale }) => (
  <div>
    {[0, 1, 2, 3, 4, 5].map((_, i) => (
      <div className="swatch" style={{ backgroundColor: scale[i] }}>
        {" "}
      </div>
    ))}
  </div>
);

ReactDOM.render(
  <div>
    lch: <Chroma scale={scaleLch} />rgb: <Chroma scale={scaleRgb} />
  </div>,
  document.getElementById("app")
);

See the Pen Chroma basic scale by Swizec Teller (@swizec) on CodePen.

The quickest way to get some pretty colors going is to define an ordinal scale like this. Choose start and end points, say you want 6 colors, and pick the lch mode.

I'm not sure what lch mode means, but it creates nicer colors than the default rgb mode. They come out brighter.

You can create continuous scales as well. Add multiple points of reference, etc. Great for encoding data with color.

Prettier Hover Effects

Chroma also helps you create prettier hover effects. Color effects in general, really.

You often see in web and dataviz design that people use opacity changes to create hover effects. You mouse over something and it becomes a little transparent so the white background shines through.

This works but looks bland. It lightens the color. What you want instead is to make the color look brighter.

Chroma to the rescue with its color manipulation utilities.

chroma(color).brighten(2) 

You can also saturate, desaturate, and darken. All useful effects if you find an excuse to use them. All better than just changing opacities.

Color Brewer

If you're color challenged like me, then you can't go wrong with the color brewer utilities. A set of predefined colors that look great together.

That pie chart above is made with the PuBu schema. chroma.scale("PuBu"). No need to worry too much, just go to color brewer, find a scheme you like, and tell Chroma to use it.

Happy coloring!

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

Topics:
web dev ,front-end development ,data visualization ,javascript libraries

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}