VueCraft NPM

Installation ​

Requirements ​

Requires Node.js 18+. No runtime or peer dependencies — the package is fully framework-agnostic and works in any JS/TS environment (browser, Node, edge runtimes).

Installation ​

bash
npm install color-value-tools

Quick start ​

ts
import {
  normalizeColor,
  mixColors,
  lighten,
  darken,
  saturate,
  complement,
  triadic,
  wcagLevel,
  bestTextColor,
  colorDeltaE,
  randomColor,
} from 'color-value-tools'

// Parse any color format
normalizeColor('#3498db')
// { type: 'hex', hex: '#3498db', r: 52, g: 152, b: 219, a: 1, h: 204, s: 70, l: 53, v: 86 }

// Manipulate
lighten('#3498db', 15) // '#74b9e7'
darken('#3498db', 15) // '#1d6ea5'
saturate('#3498db', 20) // '#1b9df3'

// Harmonies
complement('#3498db') // '#db7633'
triadic('#3498db') // ['#3498db', '#db3398', '#98db33']

// WCAG accessibility
wcagLevel('#ffffff', '#3498db') // 'AA-large'
bestTextColor('#3498db') // '#000000'

// Perceptual color distance (CIEDE2000)
colorDeltaE('#ff0000', '#fe0000') // 0.2079

// Random color within a hue/saturation range
randomColor({ hRange: [200, 260], sRange: [60, 80] })

CommonJS:

js
const { normalizeColor, mixColors } = require('color-value-tools')

Subpath imports ​

Everything is available from the package root, but you can also import a single group by meaning. Subpaths work with both ESM and CommonJS and ship full TypeScript types.

ts
import { hexToRgb, rgbToOklch, toOklchString } from 'color-value-tools/convert'
import { wcagLevel, simulateColorBlindness } from 'color-value-tools/a11y'
SubpathContents
color-value-tools/parseType detection (isHexColor, getColorType, …), CSS string parsers, normalizeColor, toNearestNamedColor
color-value-tools/convertConversions between hex, RGB, HSL, HSV, HWB, CMYK, Lab, LCH, Oklab, Oklch, Display P3; CSS string formatters
color-value-tools/manipulatelighten, darken, saturate, desaturate, setAlpha, invertColor, grayscale, rotateHue, mixColors
color-value-tools/paletteHarmonies, colorShades, monochromatic, tints / shades / tones, interpolateColors, createColorScale, randomColor, generators
color-value-tools/a11yLuminance, contrast, WCAG checks, colorDeltaE, color blindness simulation
color-value-tools/cachenormalizeColorCached and cache controls

Subpaths expose the same functions as the root. They make imports easier to read, but don't shrink the bundle on their own: tree-shaking already removes unused functions when importing from the root.