Interactive HSL color picker and accuracy lab

Hue chooses the color family

Hue is an angle around a color wheel. Red begins near 0°, yellow appears near 60°, green near 120°, cyan near 180°, blue near 240°, and magenta near 300°. The wheel wraps around, so 360° returns to red.

When remembering a hue, first name a broad family instead of chasing an exact number. Decide whether the target felt warm or cool, then narrow it: was the blue leaning toward cyan or violet? Was the red closer to orange or berry? This reduces a continuous wheel to a sequence of easier choices.

Saturation describes color intensity

At 0% saturation, an HSL color has no hue information and appears gray. Increasing saturation makes the selected hue more pronounced. Saturation is not the same as brightness: a dark navy can be highly saturated, while a pale sky blue can have moderate saturation.

A useful memory question is whether the color looked dusty, soft, natural, vivid, or neon-like. Those words are imperfect, but they create anchors. In the game, a hue can be close while the result still looks wrong because the remembered saturation is too strong.

Lightness controls the path from black to white

HSL lightness is 0% at black and 100% at white. At 50%, a fully saturated hue is usually at its strongest HSL form. Raising lightness mixes the appearance toward white; lowering it moves toward black.

Try judging lightness before fine-tuning hue. Squinting at the two swatches can make their light-dark relationship easier to compare. Very pale colors often have weak visible hue differences, which is why a small lightness error can dominate the overall impression.

How HSL relates to RGB and HEX

HSL is convenient for editing, but screens ultimately display red, green, and blue channel values. HEX is a compact notation for those RGB channels. Different notations can therefore describe the same displayed color, and the live picker shows all three formats together.

What Delta E 76 can and cannot measure

Toon Recolor converts both colors through sRGB and XYZ into the CIELAB color space, then calculates Delta E 76. Delta E 76 is the Euclidean distance between two Lab coordinates: smaller values mean those coordinates are closer.

The result is useful for consistent game scoring, but it is not a perfect model of every person’s vision, viewing environment, or display. Screen calibration, ambient light, visual differences, and limitations of the older Delta E 76 formula can all affect perceived accuracy. The game therefore converts the distance into a friendly 0–100 score rather than presenting it as a laboratory certification.

A practical three-pass memory method

1. Name the family: warm red, yellow-green, cyan-blue, violet, or another broad neighborhood.
2. Judge intensity: muted, medium, vivid, or almost gray.
3. Judge lightness: dark, middle, light, or nearly white.

After the color disappears, rebuild those three judgments in the same order. This method will not produce a perfect match every time—the uncertainty is the point of the game—but it makes each adjustment deliberate and helps explain where a memory differed.