The Color Gradient Puzzle asks you to restore eight shuffled HSL color tiles so their hues step smoothly from 330° to 40° along the shorter arc through the 360° wraparound, and a correct restoration is worth exactly 1,000 points. This is a focused color gradient puzzle that turns one precise rule into a short visual sorting exercise. Eight tiles belong to a single HSL sequence that starts at 330° and ends at 40°. When the fixed challenge opens, those tiles appear in a deterministic shuffled order, and your task is to put them back in the right sequence. The puzzle uses HSL because hue is represented as an angle on a circle, so the central skill is recognizing circular order, not estimating brightness or guessing at saturation. The intended target hues are 330°, 340°, 350°, 0°, 10°, 20°, 30°, and 40°. A correct row begins near magenta-red, walks through warmer pinks, crosses 0° (pure red), and continues into orange. The easy-to-miss part is the wrap from 350° back to 0°: a naive numeric sort would place 0° first, even though 0° lies immediately after 350° along the arc this puzzle wants you to follow.
What the Color Gradient Puzzle Asks You to Restore
A color gradient puzzle can mean different things in different apps, but the version served by Color Gradient Puzzle has a very narrow scope. There is exactly one fixed sequence, the eight tiles never change between visits, and the only thing you are rearranging is the order of those tiles. You are not changing brightness, you are not changing saturation, and you are not creating new colors. You are putting eight pre-defined hues back into the order that CSS shorter-hue interpolation would produce if it stepped from 330° to 40° across eight positions.
That single-rule framing is what makes the puzzle easy to reason about. Each tile reveals one hue, and the only question is "where does this hue belong in the row?" Once you can identify the wrap, the rest is a small sorting job with a strict acceptance test. The expected hues and the start-to-finish direction are summarized below.
| Position | Expected hue |
|---|---|
| 1 | 330° |
| 2 | 340° |
| 3 | 350° |
| 4 | 0° |
| 5 | 10° |
| 6 | 20° |
| 7 | 30° |
| 8 | 40° |
The fixed positions of 330° at the left edge and 40° at the right edge are part of the product specification, which means the same sequence can be checked in code, in the browser, and after production deployment.
The Shorter Hue Arc and Why 0° Sits Between 350° and 10°
CSS defines more than one way to interpolate between hue angles, and this puzzle uses the shorter method. Both endpoints are normalized into the 0° to 360° range. Their difference is then adjusted into the -180° to +180° range, and the chosen arc is whichever one is shorter. From 330° to 40°, that shorter path advances by 70° through the wraparound; it does not retreat backward across most of the color wheel.
In plain terms, after 350°, the next ten-degree step wraps to 0°, then continues to 10°. That is why 0° belongs between 350° and 10° even though 0° is numerically smaller than every other tile. The shorter arc concept and its consequences for hue interpolation are documented in the W3C CSS Color Module Level 4 spec and on the MDN hue-interpolation-method reference.
This is also why the puzzle exposes each tile's numeric hue to assistive technology. A screen reader can announce "350 degrees," "0 degrees," or "10 degrees" while you work through the row, which makes the answer explicit without giving the visual puzzle away to a sighted player. The numeric announcement turns the wrap from a hidden trick into a stated rule, which is the right tradeoff for a short practice exercise.
How to Play the Color Gradient Puzzle
- Inspect the eight shuffled tiles and look for the shortest continuous hue transition, paying special attention to where the wrap from 350° through 0° should land.
- Drag tiles into position, or press Space or Enter to select it. Use the Left or Right arrow keys to slide the selected tile one slot at a time.
- Continue reordering until the row looks continuous from left to right, including the jump from 350° through red into 10°.
- Choose Check gradient or press C to verify the row. A correct row finishes the round for exactly 1,000 points.
- If a check is wrong, refine the arrangement and try again. Two incorrect checks end the run until Restart is used.
Drag, Click, and Keyboard Controls Compared
Both input paths are first-class and lead to the same board state, so you can switch between them at any point in the run.
| Action | Mouse or touch | Keyboard |
|---|---|---|
| Move a tile one slot | Drag the tile before another tile | Select with Space or Enter, then press Left or Right |
| Verify the row | Click Check gradient | Press C |
| Restart the run | Click Restart | Use the Restart control |
| Hide the game quickly | — | Press Escape twice |
Mouse and touch work through native drag events. Keyboard play uses Space or Enter to select a tile, and the Left or Right arrow keys to slide it by one slot at a time. A move only changes order, never hue, saturation, or lightness, and the challenge does not reshuffle mid-run. Once the round is finished or deadlocked, drag, keyboard, and Check input are all ignored until Restart is used. This terminal-state freeze is what makes the run reproducible: the only way to advance is to restore the correct order, and the only way to fail is to make two bad checks.
Scoring, Mistakes, Restart, and the Boss Key
A correct row awards exactly 1,000 points and ends the round immediately. There is no partial credit for a near-correct arrangement, no speed bonus, and no penalty for finishing slowly, because the puzzle deliberately keeps one fixed sequence so every failure has a clear explanation and every success can be reproduced exactly. Best score is stored locally in the current browser when storage is available; nothing about the run, the palette, or the score is uploaded, and there is no account, leaderboard, or remote color API. The component contains no animation loop, remote color service, or runtime dataset download, so the round can be replayed even on a slow connection.
Two incorrect Check gradient presses add two mistakes and deadlock the run. Restart is the only way out of a deadlock, and after a Restart the deterministic starting permutation is loaded again. A single correct check after Restart still produces the standard 1,000 points, so the score ceiling does not change after a mistake. Two Escape presses in a row fire the shared Boss Key, which hides the puzzle the same way it hides every other game in the shell. That shortcut is useful when you are sorting hue tiles in a public setting and need to clear the screen quickly.
HSL Saturation and Lightness: What Stays Fixed
The visible swatches use the browser's hsl() color syntax with 72% saturation and 52% lightness. Those display values are fixed for the whole game and were chosen so the row reads as a vivid gradient without brightness or saturation masking the hue signal. Because saturation and lightness never change, you cannot accidentally use a "darker looks later" heuristic: the only thing that varies is hue position.
This is also a fair warning about what HSL is and is not. HSL is a convenient cylindrical representation of sRGB, not a modern perceptual color space. Equal numeric hue steps can look visually unequal because HSL does not model perceived color distance. The game teaches numeric hue order and CSS interpolation, not calibrated matching or accessibility contrast. If you need exact contrast, perceptual color science, or print-safe conversion, treat the puzzle as a practice exercise and use a dedicated color tool for the real measurement. The puzzle is honest about that limit, and the page exposes each tile's numeric hue to assistive technology so the wraparound rule is not hidden from non-sighted players.
When to Use a Color Tool Instead of the Puzzle
The Color Gradient Puzzle is intentionally narrow. It will not generate gradients, copy CSS, compare contrast ratios, or convert between color spaces. If you need a real production gradient, a real contrast check, or a real conversion between HSL, RGB, HEX, or LCH, switch to a dedicated color tool. The puzzle is best used as a short drill for hue wraparound, CSS color work, or visual ordering, especially the easy-to-miss jump from 350° through 0° to 10°. On a narrow screen the tiles wrap into four columns, and on a wider screen they form one eight-tile row without horizontal overflow, so the same sequence remains the goal on any device.