Manipulation & Interpolation

Manipulation

Function	Description
lighten(color, amount)	Increase HSL lightness by amount (0–100)
darken(color, amount)	Decrease HSL lightness by amount (0–100)
saturate(color, amount)	Increase HSL saturation by amount (0–100)
desaturate(color, amount)	Decrease HSL saturation by amount (0–100)
setAlpha(color, alpha)	Returns rgba(...) with the given alpha (0–1)
getAlpha(color)	Returns the alpha channel value (0–1)
invertColor(color)	Inverts all three RGB channels
grayscale(color)	Converts to grayscale using ITU-R BT.709 perceptual weights
rotateHue(hex, degrees)	Rotates hue by degrees; supports negative values
adjustHexBrightness(hex, offsetPercent)	Lightens (positive) or darkens (negative) by percentage
mixColors(c1, c2, t, opts?)	Interpolates between two colors. t = 0–1. mode: 'rgb' | 'hsl' | 'lab' | 'lch' | 'oklab' | 'oklch'. hueInterpolation: 'shorter' | 'longer' | 'increasing' | 'decreasing'

mixColors example

import { mixColors } from 'color-value-tools'

// RGB mix at midpoint
mixColors('#e74c3c', '#3498db', 0.5)
// → '#8dc6bc'

// Perceptually even mix in Oklab
mixColors('#e74c3c', '#3498db', 0.5, { mode: 'oklab', format: 'hex' })

// HSL with "longer" hue path
mixColors('#e74c3c', '#3498db', 0.5, { mode: 'hsl', hueInterpolation: 'longer' })

// Get rgba string output
mixColors('#ff0000', '#0000ff', 0.25, { mode: 'lab', format: 'rgba' })

Interpolation & Scales

Function	Description
interpolateColors(c1, c2, steps, opts?)	Returns array of steps colors from c1 to c2. Same space / format / hueInterpolation options as mixColors
createColorScale(anchors, steps, opts?)	Generates a steps-color scale across multiple anchor colors with optional positions (0–1)
midpointColor(c1, c2, opts?)	Perceptual midpoint between two colors (default space: 'oklab')

createColorScale — multi-stop gradient

import { createColorScale } from 'color-value-tools'

// Evenly spaced anchors
createColorScale(['#ff0000', '#ffff00', '#00ff00'], 9)

// With explicit positions
createColorScale(
  [
    { color: '#1a1a2e', position: 0 },
    { color: '#e94560', position: 0.4 },
    { color: '#f5a623', position: 1 },
  ],
  12,
  { space: 'oklch' },
)