Playground
See the difference yourself. Pick colors and compare results.
Live helmlab.js comparison tools. All computation runs client-side.
Gradient Comparison
Pick two colors and compare 16-step gradients across three spaces.
Helmlab gradients use CIEDE2000 arc-length reparameterization for perceptually equal step sizes. OKLab and CIE Lab use simple linear interpolation. Notice the blue midpoint: Helmlab keeps it sky blue, while OKLab shifts toward lavender.
Palette Generator
Generate a Tailwind-style 50-950 scale from any base color.
Both palettes vary lightness while keeping the base hue and chroma. Helmlab uses GenSpace (depressed cubic transfer) for smoother cusp behavior at extreme lightness values.
Perceptual Distance
MetricSpaceMeasure how different two colors look. Helmlab ΔE is trained on COMBVD + MacAdam + He — the other metrics are shown for comparison.
Helmlab ΔE and OKLab ΔE are Euclidean distances in their respective Lab spaces (scaled by 100 to match the CIE Lab range). CIEDE2000 is the industry reference — Helmlab achieves lower STRESS than CIEDE2000 on COMBVD, MacAdam, and He datasets.
Color Harmony Generator
Generate classic color harmonies in Helmlab GenSpace. Hue rotations preserve lightness and chroma, with in-gamut clipping per target.
Click a swatch to copy its hex. Harmonies rotate hue around the base color in Helmlab GenSpace LCh — lightness stays constant, chroma is clipped per target to keep every color in sRGB.
Color Inspector
Pick a color and see its coordinates in every space.
Any sRGB hex color is in gamut by definition. The P3 check applies to MetricSpace Lab coordinates and tests whether the inverse maps into the wider Display P3 gamut.
Contrast Checker & Fixer
Check WCAG contrast between two colors. Auto-fix adjusts the foreground lightness in Helmlab GenSpace while preserving hue.
Helmlab not yet loaded — falling back to HSL lightness search.
Dark/Light Mode Adapter
Enter up to 5 base colors. Helmlab adjusts lightness (via GenSpace) until each color meets WCAG AA (4.5:1) on both white and dark backgrounds.
Adaptation uses helmlab.ensureContrast(): binary-searches GenSpace L along both darken/lighten directions and picks the closest candidate that clears the target ratio. Hue and chroma are preserved; only lightness moves.