Skip to content
Lizely

Color Gradient Puzzle

Restore eight shuffled HSL color tiles by following the shortest hue arc through the 360-degree wraparound.

Privacy: your files never leave your device. All processing happens locally in your browser.

How to use

  1. 1.Inspect the eight shuffled tiles and look for the shortest continuous HSL hue transition, including the wrap through red.
  2. 2.Drag tiles into position, or select a tile with Space or Enter and move it with the Left and Right arrow keys.
  3. 3.Choose Check gradient or press C; restore all eight hues before two incorrect checks end the run.

About Color Gradient Puzzle

Color Gradient Puzzle turns one precise color rule into a short visual sorting game. Eight tiles belong to a single HSL sequence that starts at 330 degrees and ends at 40 degrees. They are shuffled when the fixed challenge opens. Your job is to restore the smooth order, including the easy-to-miss wrap from 350 degrees through 0 degrees. Drag a tile before another tile, or select one with Space or Enter and move it with the Left and Right arrow keys. Choose Check gradient when the row looks continuous. A correct arrangement finishes the round for 1,000 points; two incorrect checks end the run until Restart is used.

The puzzle uses HSL because hue is represented as an angle on a circle. Saturation and lightness stay fixed, so only the hue position changes. This makes the intended relationship visible without brightness or saturation introducing a second sorting signal. The endpoints and the number of tiles are disclosed product fixtures. They do not change between visits, which keeps the challenge reproducible and lets the same expected sequence be tested in code, in the browser, and after production deployment.

Circular interpolation needs more care than sorting ordinary numbers. A naive numeric sort would place 0 before 330, even though 0 lies immediately after 350 along this particular arc. The CSS Color specification defines several ways to travel between hue angles. This game uses the shorter method: normalize both angles, adjust their difference into the range from minus 180 through 180 degrees, then linearly interpolate the requested number of positions. From 330 to 40, the shorter path advances by 70 degrees through the wraparound, not backward across most of the color wheel.

The eight expected hues are 330, 340, 350, 0, 10, 20, 30, and 40 degrees. The page does not print that answer beside the board, but assistive technology can announce each tile's numeric hue so the interaction is not color-only. This accessibility choice makes the answer explicit to a screen-reader user while preserving the visual puzzle for sighted play. Keyboard focus, selection state, move count, incorrect-check count, completion, deadlock, Restart, and the shared double-Escape boss key all have deterministic states.

A move changes only the order. It does not recompute colors, randomize the challenge, or silently complete the game. A check is the only action that can award the final score or add a mistake. Once the game is complete or deadlocked, later drag, keyboard, and check input is ignored until Restart. This terminal-state freeze prevents score farming and makes browser assertions repeatable. Best score remains local to the current browser when storage is available.

The visual swatches use the browser's hsl() color syntax with 72 percent saturation and 52 percent lightness. Those fixed display values were chosen for a readable, vivid row; they are not a claim that HSL is perceptually uniform. Equal numeric hue steps can appear to have unequal visual distance because HSL is a convenient cylindrical representation of sRGB, not a modern perceptual color space. The game teaches circular order and CSS shorter-hue interpolation, not color-difference measurement, accessibility contrast, print matching, or calibrated color science.

Everything runs in the current tab. No image, palette, result, or activity record is uploaded. The component contains no animation loop, remote color API, or runtime dataset download. It uses the shared game shell, local design tokens, responsive tiles, native drag events, and keyboard controls. On a narrow screen the tiles wrap into four columns; on a wider screen they form one eight-tile row without horizontal overflow.

Use the puzzle as a quick practice exercise for hue wraparound, CSS color work, or visual ordering. If you need to create a production gradient, inspect exact stops, copy CSS, compare contrast, or convert between color spaces, use the dedicated color tools instead. This game deliberately keeps one fixed sequence so every failure has a clear explanation and every success can be reproduced exactly.

Methodology & sources

Both endpoint hues are normalized into [0,360). Their difference is adjusted into [-180,180] according to CSS shorter-hue interpolation, then eight linearly spaced values are generated and normalized again. A fixed permutation supplies the starting board. Reordering increments moves; an exact ID-order comparison awards 1,000; two failed checks deadlock; terminal states ignore further input.

Frequently asked questions

Why does 0 degrees belong between 350 and 10 degrees?
Hue is circular. After 350 degrees, the next ten-degree step wraps to 0, then continues to 10 degrees.
What does shorter hue mean?
It selects the shorter of the two arcs connecting the start and end angles before interpolating equal steps.
Is HSL perceptually uniform?
No. The game teaches numeric hue order and CSS interpolation, not equal perceived color distance or calibrated color matching.
Can I play without dragging?
Yes. Press Space or Enter to select the focused tile, use Left or Right to move it, and press C to check the row.

Related tools

Mini Games guides

View all