Rainbow Perceptual Distance

100%

Rainbow Perceptual Distance

✓ Published0🌍 Public

Last edited Apr 6, 2016

Created on Apr 6, 2016

Three rainbow color scales—HSL, HCL, and Cubehelix—are compared by graphing the CIE76 perceptual color difference between pairs of hues spaced 20 degrees apart. The chart plots these differences along a 360-degree hue axis, with flatter curves indicating more uniform perceptual spacing. The HCL scale is perfectly flat by definition, while Cubehelix outperforms HSL but remains uneven. Using D3 v4, the visualization renders SVG lines and labels via `d3.line`, `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleRainbow`, computing differences with `d3.lab` and a custom `delta` function.

AI-generated description

This attempts to measure the perceptual uniformity of three rainbow color scales by computing the CIE76 color difference at various points along the scale. The flatness of the curve, not its absolute value, shows the uniformity of each scale. The HCL rainbow is perfectly flat by definition. Cubehelix is better than HSL, but is not uniform.

It would be better to use CIEDE2000 to compute the difference, but I’m lazy.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Rainbow Perceptual Distance

This chart compares the perceptual uniformity of three rainbow color scales—HSL, HCL, and Cubehelix—by plotting the CIE76 color difference between points 10° apart along each scale. The flatness of each curve indicates uniformity, with HCL perfectly flat by definition and Cubehelix more uniform than HSL. Built with D3 v4, the visualization uses `d3.line` with basis curves, a linear x-scale over 0–360 degrees, and a category10 color scheme for the series. Each data point is computed via `d3.lab` and a custom delta function, with labels positioned along the paths using `textPath`.

KKirun1

95% match

Loading thumbnail…

Rainbow Luminance

Two horizontal bands compare the HSL rainbow to its luminance-only counterpart. The top band uses `d3.hsl` to produce the full rainbow, while the bottom band converts that color to HCL via `d3.hcl` and sets chroma to zero, isolating perceived lightness. Both bands are drawn as 1-pixel-wide Canvas images stretched vertically, generated with `createImageData` and `putImageData`, and labeled to the left of each strip. The visualization demonstrates that the HSL rainbow’s brightness varies widely across hues, making it unsuitable for data encoding.

Mmbostock

82% match

Loading thumbnail…

A Less-Angry Rainbow

Three rainbow color scales are compared in two horizontal bands each, rendered as 1-pixel-high Canvas images stretched vertically. The first band shows the original colors, while the second band removes chroma (sets `c = 0` via `d3.hcl`) to reveal lightness variation. The scales include HSL, HCL, and a cubehelix scale built with `d3.scale.cubehelix` and a custom `d3.interpolateCubehelix` interpolation. The code uses D3 v3 and Canvas `putImageData` to draw each scale.

Mmbostock

82% match

Loading thumbnail…

Rainbows are Harmful

This example uses a rainbow color scale to recolor an existing image, demonstrating how the popular hue-cycling ramp distorts perceptual ordering. It loads a bitmap via an HTML `Image` object, draws it to a Canvas, and then reads its pixel data with `getImageData`. The code remaps each pixel’s red channel using `d3.scale.linear` with an HSL interpolation from 0 to 360 degrees, then writes the new RGB values back with `putImageData`. The result visibly replaces the original colors with a smooth but misleading spectrum, illustrating the scale’s perceptual non-uniformity.

Mmbostock

74% match

Loading thumbnail…

Lab and HCL Color Spaces

Four horizontal gradients compare color interpolation across RGB, HSL, Lab, and HCL color spaces. Each row renders a 960-pixel-wide linear scale transitioning from pale yellow to dark blue, using `d3.scale.linear` with the respective `d3.interpolateRgb`, `d3.interpolateHsl`, `d3.interpolateLab`, or `d3.interpolateHcl` method. The code draws each gradient into a 1-pixel-high Canvas via `putImageData`, then stretches it vertically for display. This juxtaposition reveals how perceptually uniform Lab and HCL spaces avoid the muddy midtones visible in RGB and HSL interpolation.

Mmbostock

74% match

Loading thumbnail…

HCL Color Space

A two-dimensional cross section of the HCL color space maps hue from 0° to 360° vertically and luminance from 100 to 0 horizontally, with chroma held constant at 50. The visualization uses d3.hcl to compute RGB values for each pixel, writing them directly to a Canvas `ImageData` buffer. The resulting gradient reveals how perceived color and brightness shift across the HCL space, rendered at a 960×500 resolution.

Mmbostock

73% match

Loading thumbnail…

Perceptual Color Picker

This interactive color picker demonstrates the HCL (Hue-Chroma-Luminance) color space for perceptually uniform color selection. Three sliders adjust hue, chroma, and luminance, while gradient canvas backgrounds show how each parameter affects the final color. The interface converts between HCL and hex values bidirectionally, with a preview box and text input for direct hex entry. The visualization uses D3.js v5 for color space conversions and Topologica for reactive data flow, while rendering gradient backgrounds to canvas and checking color gamut validity with D3's displayable method.

CCurran Kelleher

72% match

Loading thumbnail…

Cubehelix II

Six color ramps illustrate variations of the Cubehelix color scheme, including reversed, hue-shifted, diverging, and a perceptual rainbow approximation. Each ramp renders as a horizontal gradient on individual Canvas elements, with pixel colors computed via the `d3.scale.cubehelix` plugin and `d3.interpolateCubehelix`. A polylinear scale with multiple domain points creates the diverging ramps. The labels and layout are positioned absolutely via D3 selections and ordinal scales.

Mmbostock

71% match