Color Value Tools
A comprehensive utility library for parsing, converting, and analyzing color values across all major color models — hex, RGB, HSL, HSV, HWB, Lab, LCH, Oklab, Oklch, CMYK, Display P3. Zero dependencies.
When you'd reach for this
Color stops being a one-time accent pick in a design tool the moment your project needs to convert, compare, and validate it programmatically — that's exactly what Color Value Tools is for.
A design system built on custom tokens
Instead of hand-tuning every shade and tint in Figma, generate the whole scale from one base color with a single function — mathematically even, not "eyeballed."
Your theme switches at runtime
When the background changes dynamically (dark mode, per-client branding, a user-picked palette), you need to recompute a readable text color and check it against WCAG every time, not hardcode pairs upfront.
Color arrives from different sources
An API returns hex, a designer hands you HSL, a CSS variable holds a color in the oklch format — you need to normalize all of it to one format without writing a parser for every case.
An accessibility audit of the UI
You need to quickly show how the palette looks under protanopia or deuteranopia, without installing a separate browser extension.
At a glance
Universal parser and conversion
Parse any color format with ease: hex, RGB, HSL, HSV, HWB, Lab, LCH, Oklab, Oklch, CMYK, Display P3, and even CSS variables. All conversions between models are performed with high precision and are lossless when reversing. This forms the foundation for all subsequent color operations.
Manipulation and intelligent interpolation
Lighten, darken, saturate, desaturate, invert, or rotate the hue of any color. Mix colors and create smooth transitions in six color spaces (RGB, HSL, Lab, LCH, Oklab, Oklch) with four hue interpolation modes. Generate multi-stop scales based on anchor points.
Harmonies, palettes, and generators
Instantly generate proven color schemes: complementary, triadic, analogous, tetradic, and more. Build tints, shades, and tones palettes using Oklab for maximum visual uniformity. For large datasets, use generator functions that yield colors lazily, saving memory.
Accessibility and color blindness simulation
Check contrast per WCAG, determine compliance level (AAA/AA), and pick the ideal text color for any background, including semi‑transparent and gradient ones. Analyze how your colors are perceived by people with three types of color blindness (protanopia, deuteranopia, tritanopia) using Vienot matrices.
CLI, cache, and zero dependencies
Use the built‑in CLI for quick color analysis from the terminal. Speed up repeated operations in rendering loops with the built‑in LRU cache for the normalization function. All functionality is available with zero external dependencies, shipped in ESM and CommonJS formats with full TypeScript support.
Perceptual distance and random colors
Measure how different two colors actually look using the CIEDE2000 formula, which reflects human color perception more accurately than a simple Euclidean distance in RGB. Generate random colors constrained by hue, lightness, and saturation, then format the result as a CSS string.
See how it works
What your palette looks like to a colorblind user
simulateColorBlindness applies the Vienot 1999 matrices to linearized RGB — you can check contrast before shipping, not guess from a checklist.
import { simulateColorBlindness } from 'color-value-tools'
simulateColorBlindness('#e74c3c', 'deuteranopia') // '#9a7b00'
simulateColorBlindness('#3498db', 'protanopia') // '#5282db'
// Vienot 1999 matrices applied to linearized RGB — good enough to check a
// palette before it ships, not just guess from a colorblind-safe checklist.A harmony and a shade scale from one color
triadic builds three colors 120° apart, colorShades a light-to-dark scale of nine steps. One base color in, a coordinated palette out — no manual hue math, no hand-picked hex values.
import { triadic, colorShades } from 'color-value-tools'
triadic('#6c3483') // ['#6c3483', '#34836c', '#83346c'] — evenly spaced 120°
const shades = colorShades('#6c3483', 9) // light-to-dark HSL scale, 9 steps
// One base color in, a coordinated palette out — no manual hue-rotation
// math, no hand-picked hex values.
