gka/chroma.js

★ 10,556JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((chroma.js))
    Color operations
      Darken lighten
      Convert formats
      Mix blend
    Color scales
      Lab interpolation
      Quantile spacing
      Log spacing
    Built-in palettes
      Color Brewer sets
    Environments
      Browser
      Node.js

mindmap root((chroma.js)) Color operations Darken lighten Convert formats Mix blend Color scales Lab interpolation Quantile spacing Log spacing Built-in palettes Color Brewer sets Environments Browser Node.js

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Convert a hex color to a darker shade in one line for dynamic UI theming

USE CASE 2

Generate a smooth color gradient between two colors and retrieve the color at any point along the scale

USE CASE 3

Use Color Brewer palette sets to create perceptually balanced color schemes for maps and charts

USE CASE 4

Build logarithmically or quantile-spaced color scales for data visualization dashboards

Tech stack

JavaScript

Getting it running

Difficulty · easy Time to first run · 5min

Use freely for any purpose including commercial use under the BSD license, versions before 0.4 used a GPL license.

In plain English

Chroma.js is a small JavaScript library with no external dependencies for working with colors in code. It handles color conversions, color manipulation such as darkening or lightening a color, and generating smooth color scales between two or more colors. It works in both browsers and Node.js and is available through npm. The most common use is converting colors from one format to another and adjusting them programmatically. For example, you can pass in a hex color code, darken it, and get a new hex value back in a single line. You can also create a gradient scale between two colors and ask for the color at any point along that scale as a percentage. One of the more useful features is the ability to choose which color space is used for interpolation when building a scale. Interpolating in the Lab color space, for instance, produces transitions that look more visually even to human eyes than simple RGB blending does. The library also has built-in support for the Color Brewer palette sets, which are color schemes designed specifically for data visualization work such as maps and charts. Scales can use custom value ranges, quantile bucketing, or logarithmic spacing. The library was written by Gregor Aisch and is released under the BSD license. Versions before 0.4 used a GPL license. An interactive documentation page lets you explore the API and see live examples without writing any code. There is also a static version of the docs in the repository. The README includes a note in the FAQ section addressing why the commit history sometimes goes quiet for long stretches: the author treats the library as stable and focuses on fixes and improvements rather than ongoing cosmetic changes. The project has a Discord channel for contributors and anyone who wants to discuss it.

Copy-paste prompts

Prompt 1

Using chroma.js, write a function that takes a brand hex color and returns a 5-step palette from light to dark, interpolated in Lab color space.

Prompt 2

Help me use chroma.js to map a numeric data range to a Color Brewer scale and output the right color for each value in my dataset.

Prompt 3

Using chroma.js, generate a diverging color gradient (e.g. red to white to blue) and export 10 evenly spaced colors as hex codes for a heatmap.

Prompt 4

With chroma.js, write a function that checks whether two colors have enough contrast for accessible text on a background.

Prompt 5

Help me install chroma.js via npm and set up a color scale that uses quantile bucketing for an uneven data distribution.

Open on GitHub → Explain another repo

← gka on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.