HELMLAB: An Analytical, Data-Driven Color Space for Perceptual Distance in UI Design Systems

This paper introduces HELMLAB, a novel 72-parameter analytical color space for UI design systems that utilizes learned transformations and perceptual corrections to achieve a 20.2% improvement in perceptual distance accuracy over CIEDE2000 while maintaining invertibility and providing practical utilities for design workflows.

The Gist

Imagine you are a graphic designer trying to build a website. You need a color system that does three things perfectly:

1. Measure distance: It needs to know exactly how "different" two colors look to a human eye (so you can ensure text is readable against a background).
2. Create gradients: It needs to make smooth transitions from black to white (grays) without accidentally turning them slightly blue or pink.
3. Rotate colors: If you ask the computer to shift a color from red to orange, it should do so in a straight, logical line, not a wobbly one.

For decades, the tools we used (like CIEDE2000) were like old, heavy maps. They were accurate for measuring distance, but terrible for drawing smooth lines or creating new colors. Other tools (like Oklab) were great for drawing lines but terrible at measuring distance.

Enter HELMLAB. Think of it as a GPS system for colors that was built from scratch using data, not just theory.

Here is how it works, explained through simple analogies:

1. The "72-Part Engine" (The Data-Driven Approach)

Old color systems were built by mathematicians guessing the best formulas. HELMLAB is different. The researchers built a machine with 72 adjustable knobs (parameters) and fed it thousands of examples of human color preferences.

Imagine a sound engineer mixing a song. They don't just guess the volume; they tweak the bass, treble, and reverb until it sounds perfect. HELMLAB does this with color. It learned exactly how to transform raw computer numbers (XYZ) into a format that matches how our brains actually see color.

2. The "Gray Filter" (Neutral Correction)

One of the biggest headaches in design is making a gray gradient. In many old systems, if you tried to fade from black to white, the computer would accidentally inject a tiny bit of blue or green, making the gray look "dirty."

HELMLAB has a special "Gray Filter" (Stage 10). Think of it like a spell-checker that runs after you've written your essay. Even if the math gets messy and tries to make the gray colorful, this filter instantly snaps it back to pure, neutral gray.

• The Result: Your gradients are perfectly smooth, with zero "color leakage."

3. The "Helmholtz-Kohlrausch" Effect (The Brightness Trick)

Have you ever noticed that a bright, saturated red looks "louder" or brighter than a dull gray, even if they have the same amount of light? This is a psychological trick our brains play on us.

Old color systems ignored this. HELMLAB has a built-in "Volume Knob" for this effect. It learns that saturated colors should feel brighter and adjusts the "Lightness" number accordingly. This makes the colors feel more natural and vibrant, just like they do in real life.

4. The "Blue Band" Fix (Smoothing the Rough Spots)

During testing, the researchers noticed something weird: when moving from blue to cyan, the colors would jump around unevenly, like a bumpy road.

To fix this, they added a "Pothole Patch" (the Blue-Band Refit). They specifically told the computer, "Hey, smooth out the blue area."

• The Trade-off: It made the blue area 8.9 times smoother, and the cost was almost nothing (a tiny 0.08% drop in overall accuracy). It's like spending $1 to fix a massive pothole on a highway.

5. The "Rigid Rotation" (Aligning the Compass)

Imagine a compass where North isn't actually pointing North. HELMLAB rotates its internal map slightly (by about 28 degrees) so that the primary colors (Red, Green, Blue) line up exactly where we expect them to be.

• The Magic: Because this is just a rotation, it doesn't change how we measure the distance between colors. It just makes the map easier to read.

Why Should You Care?

HELMLAB isn't just a math paper; it's a toolkit for the future of the web and apps.

• For Designers: It means you can generate color palettes that look perfect on screens (both light and dark mode) without manual tweaking.
• For Developers: It provides a single, reliable formula to check if text is readable (contrast) and to create smooth animations.
• For Everyone: It means the colors on your phone and computer will look more consistent, vibrant, and "human."

In a nutshell: HELMLAB is a color space that learned from human eyes rather than textbooks. It fixes the "dirty gray" problem, smooths out the bumpy blue roads, and gives designers a tool that is both scientifically accurate and creatively flexible. It's the difference between using a rusty ruler and a laser-guided measuring tape.

Technical Summary

1. Problem Statement

Current color spaces used in UI design systems fail to simultaneously satisfy three critical requirements:

1. Accurate Perceptual Distance Prediction: Essential for contrast checking and color difference evaluation (e.g., CIEDE2000 is accurate but complex; Oklab is simple but poor at distance prediction).
2. Achromatic Integrity: Neutral grays must map to zero chroma ($a=b=0$) to allow for clean gradient interpolation without color artifacts. Existing spaces like CAM16-UCS suffer from "chroma leakage" (grays appearing slightly colored).
3. Hue-Angle Alignment: Primary and secondary colors should align with conventional hue angles for programmatic manipulation.

No existing space jointly optimizes the color-space transform and the distance metric end-to-end against psychophysical data to solve all three problems.

2. Methodology

The authors propose HELMLAB, a 72-parameter analytical color space that treats the entire pipeline from CIE XYZ to perceptual distance as a single, differentiable system optimized via gradient descent.

A. Forward Transform Pipeline

The transformation from CIE XYZ (D65) to HELMLAB coordinates ($L, a, b$) consists of 11 stages with learnable parameters:

1. Cone Response: A learned $3\times3$matrix ($M_1$) maps XYZ to cone-like signals (replacing fixed matrices like Bradford).
2. Power Compression: Signed power compression ($\gamma_i$) applied per channel, generalizing the cube-root function.
3. Lab Projection: A second learned matrix ($M_2$) projects signals to opponent channels.
4. Hue Correction: A 4-harmonic Fourier rotation corrects systematic hue distortions based on the angle $h = \text{atan2}(b, a)$.
5. Helmholtz–Kohlrausch (H-K) Embedding: Lightness ($L$) is explicitly made dependent on chroma ($C$) to account for the phenomenon where saturated colors appear brighter than achromatic stimuli of equal luminance.
6. Lightness Refinement: A cubic polynomial with hue-dependent terms and dark-region exponential compression to handle non-linearities in dark blues vs. dark yellows.
7. Chroma Processing: A complex interleaved sequence involving hue-dependent scaling, non-linear chroma power, lightness-dependent scaling, and hue-lightness interaction terms.
8. Hue-Dependent Lightness: A final exponential correction for residual hue-lightness interactions.
9. Neutral Correction (NC): A critical post-processing step. Since independent channel compressions often shift the achromatic axis, the system pre-computes errors for 256 gray levels and fits PCHIP interpolants to subtract these errors at runtime, guaranteeing $a=b=0$ for grays.
10. Rigid Rotation: A fixed rotation ($\phi = -28.2^\circ$) of the $(a,b)$ plane to align sRGB primaries with conventional hue angles. This is an isometry, meaning it improves hue alignment without altering the distance metric.

B. Distance Metric

The distance metric is not a simple Euclidean distance. It includes:

• Pair-dependent weighting for lightness ($S_L$) and chroma ($S_C$).
• A Minkowski exponent ($p$) and chroma weight ($w_C$).
• Monotonic compression and post-power functions to reduce bias for large differences.
• Total Parameters: 65 for the space transform + 7 for the metric = 72 learnable parameters.

C. Optimization Strategy

• Loss Function: Minimizes STRESS (a metric of agreement between predicted and visual differences) on the COMBVD dataset (3,813 pairs).
• Regularization: Includes penalties for cross-dataset performance (He et al. 2022), round-trip accuracy, achromatic integrity, and Munsell uniformity.
• Blue-Band Refit: A specific penalty term was added to the loss function to address severe gradient non-uniformity in the blue–cyan region, reducing step-size ratios by $8.9\times$.

3. Key Contributions

1. State-of-the-Art Accuracy: Achieves a STRESS of 23.30 on COMBVD, a 20.2% reduction compared to CIEDE2000 (29.18).
2. Guaranteed Achromatic Integrity: The Neutral Correction ensures chroma $C < 10^{-6}$ for all grays, eliminating the "chroma leakage" found in other modern spaces.
3. Isometric Hue Improvement: A rigid rotation improves hue-angle alignment (RMS error reduced to $18.1^\circ$) with zero cost to the distance metric.
4. H-K Embedding: Explicitly models the Helmholtz–Kohlrausch effect within the lightness channel, a feature often ignored in standard spaces.
5. Practical Utility: Includes invertible transforms (round-trip error $< 10^{-14}$), gamut mapping, and utilities for CSS/Android/iOS token export and dark/light mode adaptation.

4. Results

• Performance: HELMLAB outperforms CIEDE2000, Oklab, CAM16-UCS, and IPT on the COMBVD dataset.
  • HELMLAB: 23.30
  • CIEDE2000: 29.18
  • Oklab: 47.46 (optimized for hue, not distance)
• Cross-Validation:
  • On He et al. 2022 (82 pairs): HELMLAB (30.33) beats CIEDE2000 (32.6).
  • On MacAdam 1974 (128 pairs): HELMLAB (20.33) trails CAM16-UCS (18.7) but remains competitive.
• Gradient Uniformity: The blue-band refit reduced the max/min step-size ratio in blue-cyan gradients from $51.4\times$to$5.8\times$(an$8.9\times$improvement) with only a$+0.08$ STRESS penalty.
• Generation Quality: Neutral ramps interpolate without color artifacts, and the Jacobian determinant remains positive across the sRGB gamut, ensuring local invertibility.

5. Significance

HELMLAB represents a shift from manually designed color spaces to data-driven, end-to-end optimized analytical spaces. Its significance lies in:

• UI Design Systems: It provides a single space that is mathematically rigorous for contrast checking (distance) while being structurally sound for design tokens (gradients, palettes, and neutral ramps).
• Solving the Trade-off: It successfully decouples the optimization of the color transform from the distance metric constraints via the Neutral Correction, allowing the optimizer to find the best perceptual parameters while enforcing strict geometric guarantees for grays.
• Implementation: The inclusion of invertible transforms and ecosystem-specific utilities (CSS, Tailwind, Material Design) makes it immediately actionable for web and mobile developers, bridging the gap between academic color science and practical engineering.

The authors note limitations, including the model's complexity (72 parameters vs. Oklab's ~15), reliance on 10° observer data, and specific underperformance on the BFD-P(C) sub-dataset, but position HELMLAB as a significant step forward for screen-based color workflows.