chroma.js
JavaScript library for color conversion, manipulation, and scale generation
Repository Health
Technical Analysis
chroma.js is a small library for all kinds of color operations in the browser and Node.js: converting between color spaces (RGB, HSL, LAB, LCH, HSV, and more), reading colors from CSS strings, named colors, or hex/temperature values, and generating smooth color scales and palettes for maps and charts. It bundles the classic ColorBrewer palettes and X11/CSS named colors out of the box, so data-visualization projects can pull in perceptually reasonable color ramps without hand-picking hex values.
The library exposes a chainable chroma() API for building up color transformations (darken, brighten, saturate, mix, blend) and a chroma.scale() API for interpolating between colors across a domain, commonly used to color choropleth maps, heatmaps, and data-driven charts.
What You Get
- Color parsing and conversion across RGB, HSL, HSV, LAB, LCH, CMYK, and named/hex/CSS color strings
- A chainable color-manipulation API (darken, brighten, saturate, desaturate, alpha, mix, blend)
- A
chroma.scale()API for building continuous or discretized color scales/gradients between multiple colors - Built-in ColorBrewer palettes and X11/CSS named colors ready to use as scale inputs
- Color-distance and contrast utilities for accessibility and perceptual-difference checks
Common Use Cases
- Coloring choropleth maps and heatmaps by interpolating a value across a color scale
- Generating data-visualization color palettes (sequential, diverging, categorical) from ColorBrewer presets
- Programmatically lightening, darkening, or blending brand colors for hover/active UI states
- Converting user-supplied or design-token colors between formats (hex, RGB, HSL) for theming systems
Under The Hood
Architecture: The chroma() factory in Color.js normalizes any input format through src/io/input.js, which dispatches to per-space parsers under src/io/ (hex, css, named, cmyk, hsl, hsv, lab, lch, gl, num), converting everything to an internal RGB representation that manipulation methods (darken, saturate, mix) and src/generator/src/interpolator scale logic operate on before re-serializing back out through the same io modules on demand. Tech Stack: Written in modern JavaScript (ESM, ships both index.js ESM and dist/chroma.cjs CJS/UMD builds via Rollup), with a handful of legacy .coffee files still present in the io layer (delta-e, distance) alongside newer plain-JS modules, built and tested with pnpm and Vitest. Code Quality: A large test/ directory (50+ files) covers each color-space converter and the scale/interpolation logic individually, giving good regression coverage for a library where subtle color-math bugs are easy to introduce; the codebase shows its age in a mix of coding styles (CoffeeScript remnants alongside ES modules) reflecting over a decade of incremental maintenance. API Design: The chainable chroma(color).method().method() style and the single chroma.scale() entry point for gradients keep the common cases terse, though the breadth of supported color-space names and options makes the full API surface non-trivial to memorize without consulting docs.
Used by 25 apps in this directory
ILLA Builder
Design Tools · Developer Tools · Low Code Platforms
Open-source low-code platform for building internal tools with drag-and-drop UI, reactive data bindings, and real-time collaboration.
isoflow
Design Tools · Developer Tools
A React component that lets developers embed a fully-featured, isometric network diagram editor directly into their applications.
Kibana
Analytics · Monitoring
Your open source window into the Elastic Stack — query, visualize, and act on data stored in Elasticsearch with real-time dashboards, AI-assisted search, and automated alerting.
Label Studio
AI Development · Data Engineering
Label Studio is an open-source, multi-type data labeling platform that lets teams annotate images, text, audio, video, and time series data with a configurable XML-based UI and export annotations in formats ready for any ML framework.
Langfuse
AI Development · Monitoring
Open source AI engineering platform for LLM observability, prompt management, evaluation, and debugging — self-host in minutes or use Langfuse Cloud.
likec4
Developer Tools · Devops
Define your software architecture as code and get always up-to-date, interactive C4 diagrams generated automatically from a DSL.
LobeHub
AI Assistants · Automation · Productivity
Your Chief Agent Operator — build, schedule, and collaborate with an entire AI team in one self-hostable workspace.
massCode
Code Editors · Developer Tools · Productivity
A free, local-first developer workspace unifying snippets, notes, HTTP requests, calculations, drawings, and dev tools in one desktop app.
matomo
Analytics
Open-source, privacy-first web and app analytics that puts you in complete control of your data.