JavaScript Color Manipulation Libraries
chroma-js, color, color-convert, rgb-hex, rgb2hex, and tinycolor2 are all JavaScript libraries designed to handle color manipulation, conversion, and analysis in web applications. They enable developers to parse color values, convert between formats (like RGB, HSL, HEX, LAB), adjust brightness or saturation, generate palettes, and perform accessibility checks. While they share overlapping capabilities, each package targets different use cases — from ultra-lightweight single-purpose utilities (rgb-hex) to full-featured toolkits for data visualization (chroma-js) or production-grade UI systems (tinycolor2).
Npm Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Color Manipulation in JavaScript: A Deep Dive into Popular npm Packages
When building modern web applications, developers often need to work with colors—converting between formats, adjusting brightness or saturation, generating palettes, or ensuring accessibility. The JavaScript ecosystem offers several well-maintained libraries for these tasks, each with its own focus and trade-offs. Let’s compare chroma-js, color, color-convert, rgb-hex, rgb2hex, and tinycolor2 from a practical, engineering perspective.
🎨 Core Philosophy and Scope
chroma-js is a full-featured color library designed for designers and data visualizers. It supports advanced operations like interpolation, color scales, and perceptually uniform adjustments (e.g., lightness in CIELAB space). It handles a wide range of input formats and excels at creating smooth gradients or diverging palettes.
// chroma-js: Interpolate between red and blue in Lab space
const gradient = chroma.scale(['red', 'blue']).mode('lab');
const midColor = gradient(0.5).hex(); // '#800080' (purple)
color (by Qix-) provides a fluent, chainable API focused on conversions and basic manipulations. It wraps color-convert under the hood but adds methods for lightening, darkening, rotating hue, etc. It’s ideal when you need readable, expressive code without heavy dependencies.
// color: Chainable transformations
const adjusted = color('#ff0000').lighten(0.2).saturate(0.1).hex();
color-convert is a low-level, zero-dependency utility strictly for converting between color spaces (RGB, HSL, HSV, XYZ, LAB, etc.). It doesn’t parse strings or offer manipulation methods—just pure math functions. Use it when you already have numeric values and need fast, direct conversion.
// color-convert: Direct numeric conversion
const [h, s, l] = convert.rgb.hsl(255, 0, 0); // [0, 100, 50]
rgb-hex and rgb2hex are ultra-lightweight utilities that do one thing: convert RGB values (as numbers or arrays) to hex strings. They don’t support other formats or manipulations. rgb-hex is actively maintained; rgb2hex appears unmaintained and redundant.
// rgb-hex: Simple RGB → hex
const hex1 = rgbHex(255, 0, 0); // '#ff0000'
const hex2 = rgbHex([255, 0, 0]); // '#ff0000'
// rgb2hex: Same functionality, but less flexible
const hex3 = rgb2hex(255, 0, 0); // '#ff0000'
tinycolor2 is a battle-tested, all-in-one solution used in projects like Bootstrap. It supports parsing almost any color format, offers extensive manipulation methods (brighten, spin, mix), and includes utilities for readability and contrast checks. Its API is imperative rather than chainable.
// tinycolor2: Parse and manipulate
const tc = tinycolor('#f00');
const lighter = tc.lighten(20).toHexString(); // '#ff6666'
const isDark = tc.isDark(); // true
🔌 Input Flexibility and Parsing
How each library handles input varies significantly:
-
chroma-js: Accepts hex, named colors, RGB/RGBA arrays, HSL strings, and more. Very forgiving.chroma('red'); chroma([255, 0, 0]); chroma('hsl(0, 100%, 50%)'); -
color: Similar flexibility—strings, objects, arrays.color('red'); color({r: 255, g: 0, b: 0}); color([255, 0, 0]); -
color-convert: Only accepts numeric arguments—no string parsing.convert.rgb.hsl(255, 0, 0); // works convert.rgb.hsl('red'); // throws error -
rgb-hex/rgb2hex: Accept either three numbers or an array of three numbers.rgbHex(255, 0, 0); rgbHex([255, 0, 0]); -
tinycolor2: Extremely permissive—handles CSS strings, objects, arrays, even malformed inputs gracefully.tinycolor('red'); tinycolor({r: 255, g: 0, b: 0}); tinycolor('rgb(255, 0, 0)');
⚙️ Key Operations Compared
Converting RGB to Hex
All libraries can do this, but with different ergonomics:
// chroma-js
chroma(255, 0, 0).hex(); // '#ff0000'
// color
color.rgb(255, 0, 0).hex(); // '#ff0000'
// color-convert (requires manual formatting)
const [r, g, b] = [255, 0, 0];
'#' + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');
// rgb-hex
rgbHex(255, 0, 0); // '#ff0000'
// rgb2hex
rgb2hex(255, 0, 0); // '#ff0000'
// tinycolor2
tinycolor({r: 255, g: 0, b: 0}).toHexString(); // '#ff0000'
Lightening a Color
Only higher-level libraries support this:
// chroma-js
chroma('red').brighten(1).hex(); // '#ff6666'
// color
color('red').lighten(0.2).hex(); // '#ff6666'
// tinycolor2
tinycolor('red').lighten(20).toHexString(); // '#ff6666'
// color-convert, rgb-hex, rgb2hex: Not supported
Checking Contrast Ratio (for Accessibility)
Only chroma-js and tinycolor2 provide built-in accessibility tools:
// chroma-js
chroma.contrast('white', 'black'); // 21 (maximum)
// tinycolor2
tinycolor.readability('white', 'black'); // 21
// Others: Not supported
🧩 When to Use Which?
Need advanced color theory features?
Use chroma-js if you’re building data visualizations, design systems, or need perceptually accurate interpolations. Its support for LAB, LCH, and custom color scales is unmatched.
Want clean, chainable syntax for common tasks?
color strikes a great balance between power and simplicity. It’s perfect for UI theming, dynamic color adjustments, or when you prefer functional-style chaining.
Just converting numeric values between color spaces?
color-convert is your go-to. It’s tiny, dependency-free, and blazing fast—ideal for performance-critical paths where you control input format.
Only converting RGB to hex (and nothing else)?
rgb-hex is sufficient. Avoid rgb2hex—it offers no advantages and appears unmaintained.
Building a robust UI toolkit or editor?
tinycolor2 has been tested in production for years (used in Bootstrap, Photoshop plugins, etc.). Its error tolerance, wide format support, and accessibility helpers make it reliable for user-facing tools.
⚠️ Deprecation and Maintenance Notes
rgb2hex: Last published in 2016. No GitHub repository linked on npm. Consider it deprecated—usergb-hexinstead.- All other packages (
chroma-js,color,color-convert,rgb-hex,tinycolor2) are actively maintained as of 2024.
📊 Summary Table
| Package | Parsing | Manipulation | Color Spaces | Accessibility | Bundle Impact | Best For |
|---|---|---|---|---|---|---|
chroma-js | ✅ Rich | ✅ Advanced | ✅ Many (LAB, LCH, etc.) | ✅ Contrast ratio | Medium | Data viz, design systems |
color | ✅ Good | ✅ Basic | ✅ Standard (RGB, HSL, etc.) | ❌ | Small | UI theming, readable code |
color-convert | ❌ None | ❌ None | ✅ Many (numeric only) | ❌ | Tiny | Low-level conversion |
rgb-hex | ❌ RGB only | ❌ None | ❌ RGB → Hex only | ❌ | Minimal | Simple RGB→hex needs |
rgb2hex | ❌ RGB only | ❌ None | ❌ RGB → Hex only | ❌ | Minimal | ❌ Avoid—use rgb-hex |
tinycolor2 | ✅ Excellent | ✅ Extensive | ✅ Standard + extras | ✅ Readability | Medium | Production UIs, editors |
💡 Final Guidance
- Don’t over-engineer: If you only need
rgb(255,0,0)→#ff0000, usergb-hex. - Avoid mixing libraries: Pick one that covers your full use case to prevent bundle bloat.
- Prefer maintained packages: Skip
rgb2hex; everything else is safe for production. - Consider your team:
color’s chainable API is easier to read;tinycolor2’s imperative style is more familiar to jQuery-era devs.
Choose based on your actual needs—not just features, but also maintainability, bundle size, and how the API fits into your codebase.
How to Choose: color vs chroma-js vs rgb-hex vs color-convert vs rgb2hex vs tinycolor2
- color:
Choose
colorwhen you want a clean, chainable API for common color manipulations (lighten, darken, rotate) with solid format support. It wrapscolor-convertbut adds developer-friendly syntax. It’s a great middle ground for UI theming or dynamic color adjustments without the weight of larger libraries. - chroma-js:
Choose
chroma-jswhen you need advanced color operations like perceptually uniform interpolation, multi-stop color scales, or support for color spaces beyond RGB/HSL (e.g., CIELAB, LCH). It’s ideal for data visualization, design systems, or applications requiring precise color math. Avoid it if you only need basic conversions—it’s heavier than necessary for simple tasks. - rgb-hex:
Choose
rgb-hexif your sole requirement is converting RGB values (as numbers or arrays) to hexadecimal strings. It’s tiny, well-maintained, and does exactly one thing well. Don’t use it if you need any other color functionality. - color-convert:
Choose
color-convertonly when you’re working with raw numeric color values and need fast, dependency-free conversion between color spaces (e.g., RGB to XYZ). It does not parse strings or offer manipulation methods, so it’s best used as a low-level building block inside other tools. - rgb2hex:
Do not choose
rgb2hexfor new projects. It provides the same narrow functionality asrgb-hexbut hasn’t been updated since 2016 and lacks an official repository. Usergb-hexinstead for the same use case with active maintenance. - tinycolor2:
Choose
tinycolor2when building production UIs, editors, or design tools that require robust parsing of diverse color formats, extensive manipulation methods, and built-in accessibility utilities (like contrast checking). Its battle-tested reliability and comprehensive feature set make it suitable for user-facing applications where error tolerance matters.
Popular Comparisons
README for color
color
JavaScript library for immutable color conversion and manipulation with support for CSS color strings.
const color = Color('#7743CE').alpha(0.5).lighten(0.5);
console.log(color.hsl().string()); // 'hsla(262, 59%, 81%, 0.5)'
console.log(color.cmyk().round().array()); // [ 16, 25, 0, 8, 0.5 ]
console.log(color.ansi256().object()); // { ansi256: 183, alpha: 0.5 }
Install
npm install color
Usage
import Color from 'color';
Constructors
// string constructor
const color = Color('rgb(255, 255, 255)') // { model: 'rgb', color: [ 255, 255, 255 ], valpha: 1 }
const color = Color('hsl(194, 53%, 79%)') // { model: 'hsl', color: [ 195, 53, 79 ], valpha: 1 }
const color = Color('hsl(194, 53%, 79%, 0.5)') // { model: 'hsl', color: [ 195, 53, 79 ], valpha: 0.5 }
const color = Color('#FF0000') // { model: 'rgb', color: [ 255, 0, 0 ], valpha: 1 }
const color = Color('#FF000033') // { model: 'rgb', color: [ 255, 0, 0 ], valpha: 0.2 }
const color = Color('lightblue') // { model: 'rgb', color: [ 173, 216, 230 ], valpha: 1 }
const color = Color('purple') // { model: 'rgb', color: [ 128, 0, 128 ], valpha: 1 }
// rgb
const color = Color({r: 255, g: 255, b: 255}) // { model: 'rgb', color: [ 255, 255, 255 ], valpha: 1 }
const color = Color({r: 255, g: 255, b: 255, alpha: 0.5}) // { model: 'rgb', color: [ 255, 255, 255 ], valpha: 0.5 }
const color = Color.rgb(255, 255, 255) // { model: 'rgb', color: [ 255, 255, 255 ], valpha: 1 }
const color = Color.rgb(255, 255, 255, 0.5) // { model: 'rgb', color: [ 255, 255, 255 ], valpha: 0.5 }
const color = Color.rgb(0xFF, 0x00, 0x00, 0.5) // { model: 'rgb', color: [ 255, 0, 0 ], valpha: 0.5 }
const color = Color.rgb([255, 255, 255]) // { model: 'rgb', color: [ 255, 255, 255 ], valpha: 1 }
const color = Color.rgb([0xFF, 0x00, 0x00, 0.5]) // { model: 'rgb', color: [ 255, 0, 0 ], valpha: 0.5 }
// hsl
const color = Color({h: 194, s: 53, l: 79}) // { model: 'hsl', color: [ 195, 53, 79 ], valpha: 1 }
const color = Color({h: 194, s: 53, l: 79, alpha: 0.5}) // { model: 'hsl', color: [ 195, 53, 79 ], valpha: 0.5 }
const color = Color.hsl(194, 53, 79) // { model: 'hsl', color: [ 195, 53, 79 ], valpha: 1 }
// hsv
const color = Color({h: 195, s: 25, v: 99}) // { model: 'hsv', color: [ 195, 25, 99 ], valpha: 1 }
const color = Color({h: 195, s: 25, v: 99, alpha: 0.5}) // { model: 'hsv', color: [ 195, 25, 99 ], valpha: 0.5 }
const color = Color.hsv(195, 25, 99) // { model: 'hsv', color: [ 195, 25, 99 ], valpha: 1 }
const color = Color.hsv([195, 25, 99]) // { model: 'hsv', color: [ 195, 25, 99 ], valpha: 1 }
// cmyk
const color = Color({c: 0, m: 100, y: 100, k: 0}) // { model: 'cmyk', color: [ 0, 100, 100, 0 ], valpha: 1 }
const color = Color({c: 0, m: 100, y: 100, k: 0, alpha: 0.5}) // { model: 'cmyk', color: [ 0, 100, 100, 0 ], valpha: 0.5 }
const color = Color.cmyk(0, 100, 100, 0) // { model: 'cmyk', color: [ 0, 100, 100, 0 ], valpha: 1 }
const color = Color.cmyk(0, 100, 100, 0, 0.5) // { model: 'cmyk', color: [ 0, 100, 100, 0 ], valpha: 0.5 }
// hwb
const color = Color({h: 180, w: 0, b: 0}) // { model: 'hwb', color: [ 180, 0, 0 ], valpha: 1 }
const color = Color.hwb(180, 0, 0) // { model: 'hwb', color: [ 180, 0, 0 ], valpha: 1 }
// lch
const color = Color({l: 53, c: 105, h: 40}) // { model: 'lch', color: [ 53, 105, 40 ], valpha: 1 }
const color = Color.lch(53, 105, 40) // { model: 'lch', color: [ 53, 105, 40 ], valpha: 1 }
// lab
const color = Color({l: 53, a: 80, b: 67}) // { model: 'lab', color: [ 53, 80, 67 ], valpha: 1 }
const color = Color.lab(53, 80, 67) // { model: 'lab', color: [ 53, 80, 67 ], valpha: 1 }
// hcg
const color = Color({h: 0, c: 100, g: 0}) // { model: 'hcg', color: [ 0, 100, 0 ], valpha: 1 }
const color = Color.hcg(0, 100, 0) // { model: 'hcg', color: [ 0, 100, 0 ], valpha: 1 }
// ansi16
const color = Color.ansi16(91) // { model: 'ansi16', color: [ 91 ], valpha: 1 }
const color = Color.ansi16(91, 0.5) // { model: 'ansi16', color: [ 91 ], valpha: 0.5 }
// ansi256
const color = Color.ansi256(196) // { model: 'ansi256', color: [ 196 ], valpha: 1 }
const color = Color.ansi256(196, 0.5) // { model: 'ansi256', color: [ 196 ], valpha: 0.5 }
// apple
const color = Color.apple(65535, 65535, 65535) // { model: 'apple', color: [ 65535, 65535, 65535 ], valpha: 1 }
const color = Color.apple([65535, 65535, 65535]) // { model: 'apple', color: [ 65535, 65535, 65535 ], valpha: 1 }
Set the values for individual channels with alpha, red, green, blue, hue, saturationl (hsl), saturationv (hsv), lightness, whiteness, blackness, cyan, magenta, yellow, black
String constructors are handled by color-string
Getters
color.hsl()
Convert a color to a different space (hsl(), cmyk(), etc.).
color.object() // {r: 255, g: 255, b: 255}
Get a hash of the color value. Reflects the color's current model (see above).
color.rgb().array() // [255, 255, 255]
Get an array of the values with array(). Reflects the color's current model (see above).
color.rgbNumber() // 16777215 (0xffffff)
Get the rgb number value.
color.hex() // #ffffff
Get the hex value. (NOTE: .hex() does not return alpha values; use .hexa() for an RGBA representation)
color.red() // 255
Get the value for an individual channel.
CSS Strings
color.hsl().string() // 'hsl(320, 50%, 100%)'
Calling .string() with a number rounds the numbers to that decimal place. It defaults to 1.
Luminosity
color.luminosity(); // 0.412
The WCAG luminosity of the color. 0 is black, 1 is white.
color.contrast(Color("blue")) // 12
The WCAG contrast ratio to another color, from 1 (same color) to 21 (contrast b/w white and black).
color.isLight() // true
color.isDark() // false
Get whether the color is "light" or "dark", useful for deciding text color.
Manipulation
color.negate() // rgb(0, 100, 255) -> rgb(255, 155, 0)
color.lighten(0.5) // hsl(100, 50%, 50%) -> hsl(100, 50%, 75%)
color.lighten(0.5) // hsl(100, 50%, 0) -> hsl(100, 50%, 0)
color.darken(0.5) // hsl(100, 50%, 50%) -> hsl(100, 50%, 25%)
color.darken(0.5) // hsl(100, 50%, 0) -> hsl(100, 50%, 0)
color.lightness(50) // hsl(100, 50%, 10%) -> hsl(100, 50%, 50%)
color.saturate(0.5) // hsl(100, 50%, 50%) -> hsl(100, 75%, 50%)
color.desaturate(0.5) // hsl(100, 50%, 50%) -> hsl(100, 25%, 50%)
color.grayscale() // #5CBF54 -> #969696
color.whiten(0.5) // hwb(100, 50%, 50%) -> hwb(100, 75%, 50%)
color.blacken(0.5) // hwb(100, 50%, 50%) -> hwb(100, 50%, 75%)
color.fade(0.5) // rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 0.4)
color.opaquer(0.5) // rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 1.0)
color.rotate(180) // hsl(60, 20%, 20%) -> hsl(240, 20%, 20%)
color.rotate(-90) // hsl(60, 20%, 20%) -> hsl(330, 20%, 20%)
color.mix(Color("yellow")) // cyan -> rgb(128, 255, 128)
color.mix(Color("yellow"), 0.3) // cyan -> rgb(77, 255, 179)
// chaining
color.green(100).grayscale().lighten(0.6)
Propers
The API was inspired by color-js. Manipulation functions by CSS tools like Sass, LESS, and Stylus.