See what each HSL slider actually changes.

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.

Why the lab shows RGB, HEX, and Delta E

HSL is convenient for editing, but screens ultimately display red, green, and blue channel values. HEX is a compact notation for those RGB channels. Two different notations can therefore describe the same displayed color.

Toon Shade converts both colors through sRGB and XYZ into the CIELAB color space, then calculates Delta E 76. Delta E is a distance between two Lab coordinates: smaller values mean the coordinates are closer. The game converts that distance into a friendly 0–100 round score rather than claiming the number is a perfect model of every person’s vision or every display.

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.