postcss-helmlab

PostCSS plugin for Helmlab color spaces. Transforms helmlab(), helmlch(), helmgen(), helmgenlch() CSS functions into rgb()/rgba() fallbacks plus color(display-p3 …) and color(rec2020 …) wide-gamut overrides — wrapped in @supports queries so the cascade survives modern CSS minifiers (Lightning CSS, cssnano).

// postcss.config.mjs
import helmlab from 'postcss-helmlab';
export default { plugins: [helmlab({ outputMode: 'all' })] };

| Mode | Output | |-----------|-------------------------------------------------------------------| | srgb | rgb() / rgba() only | | p3 | color(display-p3 …) only | | rec2020 | color(rec2020 …) only | | both | sRGB inline + @supports (color: color(display-p3 …)) block | | all | sRGB inline + P3 @supports + Rec2020 @supports blocks |

both is the default.

Why?

Helmlab is a data-driven color space family trained on 64,000+ human color perception observations. It provides two spaces:

• MetricSpace — 20% lower STRESS than CIEDE2000 on perceptual distance measurement
• GenSpace — wins 21-10 vs OKLab on 50 ColorBench metrics for color generation

This plugin lets you use Helmlab color spaces in CSS today, without waiting for browser support.

Installation

npm install postcss-helmlab

Usage

Add postcss-helmlab to your PostCSS config:

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-helmlab'),
  ],
};

Or with PostCSS API:

const postcss = require('postcss');
const helmlab = require('postcss-helmlab');

const result = await postcss([helmlab]).process(css);

Syntax

Color functions

/* Input */
.card {
  color: helmlab(0.78 0.52 -0.20);
  background: helmgen(0.60 0.22 0.03);
  border-color: helmlch(0.78 0.56 338.7deg);
  outline-color: helmgenlch(0.60 0.15 30deg);
}

/* Output */
.card {
  color: rgb(255, 76, 119);
  background: rgb(196, 107, 68);
  border-color: rgb(255, 67, 131);
  outline-color: rgb(175, 120, 91);
}

Alpha

/* Input */
.overlay { background: helmlab(0.78 0.52 -0.20 / 0.5); }

/* Output */
.overlay { background: rgba(255, 76, 119, 0.5); }

Gradients

Interpolate gradients through Helmlab spaces with perceptually uniform steps:

/* Input */
.gradient {
  background: linear-gradient(in helmgen, #e63946, #457b9d);
}

/* Output — 10 perceptually spaced stops */
.gradient {
  background: linear-gradient(#e63946 0.0%, #c7555e 11.1%, ..., #457b9d 100.0%);
}

Color mixing

/* Input */
.mix { color: color-mix(in helmgen, #e63946 50%, #457b9d); }

/* Output */
.mix { color: rgb(147, 93, 111); }

Supported spaces

| Function | Space | Best for | |----------|-------|----------| | helmlab(L a b) | MetricSpace | Perceptual distance, accessibility | | helmlch(L C h) | MetricSpace (cylindrical) | Hue-based selection | | helmgen(L a b) | GenSpace | Gradients, palettes | | helmgenlch(L C h) | GenSpace (cylindrical) | Hue-based generation |

Links

• Helmlab documentation
• GitHub
• arXiv paper
• npm: helmlab

License

MIT