Chromametry

A metrics framework for evaluating web-accessible sequential color palettes.

Figure 1. Web-accessible Palette Ranking

Metric Definitions

1. Contrast Efficiency: Measures how efficiently contrast space is used to achieve WCAG 4.5:1 contrast.
2. Lightness Linearity: Evaluates the linearity of lightness (with Helmholtz–Kohlrausch correction).
3. Chroma Smoothness: Checks for artifacts and kinks in the saturation curve using Monotone Cubic Splines.
4. Hue Stability: Quantifies hue shift/drift across the lightness ramp.
5. Spacing Uniformity: Measures the consistency of color spacing (DeltaE 2000).

Read full paper

All lightness, chroma, hue, and DeltaE2000 computations are performed in the CIELAB color space.

Benchmark Rankings

Comparison of popular design systems based on Chromametry metrics.

Table 1. Benchmark ranking of design systems evaluated using Chromametry metrics.

Note: Design systems like Bootstrap,Google Material 3, Apple Human Interface or Fluent UI are excluded as they define discrete semantic tokens rather than algorithmic sequential ramps.

Overall Score is computed as the geometric mean of the five normalized metrics.

Example: A Typical Report

Figure 2. Adobe Spectrum Color Palette.

Figure 3. Adobe Spectrum Palette Metrics.

Figure 4. Adobe Spectrum Palette Charts.

Benchmark result page

• Online Report : Benchmark page
• Local /benchmark/index.html (double click)

API

Installation

npm install chromametry

Usage

import { Palette, Ramp, Swatch } from "chromametry";

const blue = new Ramp([
  "#ffffff",
  "#eff6fb",
  "#d9e8f6",
  "#aacdec",
  "#73b3e7",
  "#4f97d1",
  "#2378c3",
  "#2c608a",
  "#274863",
  "#1f303e",
  "#11181d",
  "#000000",
], "blue");

console.log(blue.baseColor);
console.log(blue.wcag[45].span);
console.log(blue.metrics);
console.log(blue.score);
console.log(blue.direction);

const palette = new Palette({
  blue: blue.colors,
  gray: ["#ffffff", "#dfe1e2", "#71767a", "#000000"],
}, "example");

console.log(palette.contrastEfficiency);
console.log(palette.lightnessLinearity);
console.log(palette.score);

const swatch = new Swatch("#2378c3");
console.log(swatch.lab);
console.log(swatch.chroma);

Browser

ESM

<script type="module">
  import { Ramp } from "https://esm.sh/chromametry";

  const ramp = new Ramp(["#ffffff", "#2378c3", "#000000"], "blue");
  console.log(ramp.score);
</script>

Global

<script src="https://unpkg.com/chromametry/dist/index.global.js"></script>
<script>
  const ramp = new Chromametry.Ramp(["#ffffff", "#2378c3", "#000000"], "blue");
  console.log(ramp.score);
</script>

Class Reference

Swatch

Ramp

Palette

Reproducing Benchmarks

To run the benchmark generator locally:

git clone https://github.com/chromametry/chromametry.git
cd chromametry
npm install
npm run generate

Adding Custom Palettes to Benchmark

Create a new .ts file in benchmark/input/ (e.g., my-palette.ts).

import { red, volcano, gold } from '@ant-design/colors';

// Define colors (imported or inline object)
let colors: Record<string, string[]> = { red, volcano, gold };

// Ensure white/black anchors exist if your ramp misses them
for (let name in colors) {
    if (colors[name][0] !== "#ffffff") colors[name].unshift("#ffffff");
    if (colors[name][colors[name].length - 1] !== "#000000") colors[name].push("#000000");
}
export default {
  name: "Ant Design",
  colors,
};

Then regenerate the report:

npm run generate

Input Requirements

• Equal Steps: All color ramps must have the same number of steps.

• Format: Colors must be Hex strings.

• Monotonicity: Lightness must strictly increase or decrease (sorted).

• Anchors: Start/End colors should ideally be Black and White.