@huekit/mix

Blend OKLCH colors without the muddy sRGB midpoint. Zero dependencies. Part of huekit, the OKLCH toolkit for designers.

import { mix, gradient, shades, tints } from '@huekit/mix'

mix('#ff0000', '#0000ff')          // → 'oklch(0.54 0.29 326.64)'
gradient('#ff0000', '#0000ff', 5)  // → ['oklch(...)', ...]  arcs through magenta
shades('#3b82f6', 4)               // → 4 darker blues
tints('#3b82f6', 4)                // → 4 lighter blues

Why mix in OKLCH?

Blend two colors in plain RGB and the midpoint dives through grey. Red to blue becomes a dull purple-brown in the middle, because a straight line between two points in RGB space cuts through the desaturated centre.

OKLCH interpolates around the hue wheel instead, so blends stay vivid the whole way across — red to blue arcs up through magenta, the way you'd expect mixing light to behave. Same reason OKLCH gradients look better in CSS: no dead zone in the middle.

@huekit/mix gives you that for blending, gradients, and quick shade/tint ramps.

Install

npm install @huekit/mix

API

All functions accept hex strings or { l, c, h } objects, and return oklch() strings by default. Pass { raw: true } for { l, c, h } objects, and { precision: n } to control decimals.

mix(a, b, ratio?, options?)

Blend two colors. ratio 0 = all a, 1 = all b, 0.5 = midpoint (default).

mix('#ff0000', '#0000ff')            // → midpoint
mix('#ff0000', '#0000ff', 0.25)      // → closer to red
mix('#f00', '#00f', 0.5, { raw: true }) // → { l, c, h }

Hue is interpolated the short way around the wheel. If one color is achromatic (grey/black/white), the other's hue is held so no spurious tint creeps in.

gradient(a, b, steps?, options?)

An evenly-spaced array of stops between two colors. steps is the total count (minimum 2, default 5). First and last stops are the endpoints.

gradient('#ff0000', '#0000ff', 5)
// → ['oklch(0.63 0.26 29)', ..., 'oklch(0.45 0.31 264)']

shades(color, n?, options?)

n progressively darker steps (mixes toward black). Does not include the original.

shades('#3b82f6', 4)  // → 4 increasingly dark blues

tints(color, n?, options?)

n progressively lighter steps (mixes toward white). Does not include the original.

tints('#3b82f6', 4)  // → 4 increasingly light blues

Use it in CSS

const stops = gradient('#ff0000', '#0000ff', 7)
const css = `background: linear-gradient(90deg, ${stops.join(', ')});`

The huekit suite

| Package | What it does | |---------|--------------| | @huekit/hex | hex → oklch() conversion | | @huekit/scale | perceptual lightness scale from one color | | @huekit/contrast | WCAG & APCA contrast + readability helpers | | @huekit/mix ← you are here | blend colors, no muddy midpoint | | @huekit/tailwind | brand hex → Tailwind v4 @theme block (soon) | | @huekit/tokens | design tokens → CSS custom properties (soon) |

License

MIT