Color Gradient Puzzle accepts a complete keyboard-only path that lets you reorder eight shuffled HSL color tiles without ever using drag, a trackpad gesture, or a touch screen. Every action that drag performs — picking up a tile, swapping it with a neighbor, and confirming the finished row — has a direct keyboard equivalent built into the same game shell, so the keyboard route is not a stripped-down mode but the same control surface expressed through keys. Press Space or Enter to select the focused tile, push the Left or Right arrow key to slide that tile one position at a time, and press C to run the gradient check. Each keyboard move is recorded as a move in the same counter that drag uses, and the same exact ID-order comparison decides whether the run ends in a 1,000-point success or a deadlock after two wrong checks. There is no hidden mouse step, no required hover state, and no final click that only a pointer can trigger, so a player who never touches a mouse reaches the same score under the same rules as a player who only drags.
Why Dragging Is Optional in This Puzzle
Color Gradient Puzzle is built around the idea that one precise color rule — the shorter hue arc between 330 and 40 degrees — should be playable with the same fidelity whether the user reaches for a mouse or types on a keyboard. The eight tiles, the fixed starting shuffle, the deterministic check logic, and the 1,000-point reward are all part of the product contract, not privileges granted by any one input device. Drag and keyboard are listed side by side as supported inputs, and both feed the same move counter and the same exact ID-order comparison, so neither path gives a scoring advantage over the other.
Drag is convenient when a player can point precisely at a tile and see the swap happen visually, but it requires a working pointer, a steady hand, and sometimes a touch surface that does not always register native drag events the same way across browsers. Keyboard play removes those dependencies. A user who can press Space, Enter, the Left arrow, the Right arrow, and C can complete the puzzle without ever picking up a mouse, which is why the FAQ entry on the product page answers the question directly with the Space/Enter, arrow, and C sequence rather than suggesting an alternative tool.
Keyboard Controls at a Glance
The table below maps each keyboard key to the action it performs and the game state that action changes. Every entry corresponds to a documented input from the product contract, so the bindings below are the complete set the puzzle recognizes on a keyboard.
| Key | Action | What it changes |
|---|---|---|
| Tab / Shift+Tab | Move focus between the eight tiles in row order | Highlighted tile only; no move count change |
| Space | Select the focused tile so arrows can move it | Selection state on the focused tile |
| Enter | Same as Space — select the focused tile | Selection state on the focused tile |
| Left arrow | Move the selected tile one slot to the left | Row order; increments move count by one |
| Right arrow | Move the selected tile one slot to the right | Row order; increments move count by one |
| C | Run the gradient check on the current row | Completion flag or incorrect-check count |
| Restart button | Reset to the original fixed shuffle | Row order, move count, incorrect checks, score |
| Escape, Escape | Trigger the shared double-Escape boss key | Page chrome only; does not alter puzzle state |
A move only reorders the row; it never recomputes the swatch colors, never randomizes the challenge, and never silently completes the game. The Check action is the only step that can award the 1,000-point score or push the incorrect-check counter toward the two-strike deadlock.
Restore the 8-Tile Hue Arc Step by Step
Use the steps below to finish a round of Color Gradient Puzzle with the keyboard alone. The order shown below is the shortest path most sighted players take, and each step uses only the keys listed in the controls table.
- Tab into the board and let each tile receive focus in turn so the screen reader can announce its numeric hue. Confirm the eight announced values are a permutation of 330, 340, 350, 0, 10, 20, 30, and 40 degrees.
- Identify the shortest continuous transition among the visible swatches, including the wrap from 350 degrees through 0 degrees. Mental note the exact hue you want at the leftmost slot.
- Press Tab until the tile whose hue belongs in the leftmost slot has focus, then press Space or Enter to select it.
- Press Left arrow once for every slot the selected tile must travel toward the start of the row. Each press counts as one move.
- Tab to the next misplaced tile, press Space or Enter, and use Left or Right arrows to slide it into its correct neighbor. Repeat until every adjacent pair of hues advances by ten degrees through the wraparound.
- When the row visually looks continuous and the screen reader reads the hues in the exact order 330, 340, 350, 0, 10, 20, 30, 40, press C (or activate the Check gradient control) to validate the row.
- If the check passes, the board freezes in its complete state at exactly 1,000 points. If the check fails, the incorrect-check counter increments and you can continue reordering without restarting.
- If a second incorrect check occurs, the board enters the deadlock terminal state. Press Restart to reset the same fixed shuffle and try again.
The Fixed HSL Sequence and the Shortest Hue Arc
The eight tiles belong to a single HSL sequence that starts at 330 degrees and ends at 40 degrees, traveling forward 70 degrees through the 360° wraparound rather than backward across most of the color wheel. Saturation and lightness are fixed at 72 percent and 52 percent respectively for every swatch, so the only thing that changes between tiles is the hue position on the circle. This is what makes the wrap from 350 to 0 visible to the eye and what makes the puzzle about circular order rather than brightness ranking.
The exact hues are disclosed product fixtures, which means the same sequence can be tested in code, in the browser, and after production deployment without the answer changing between visits. The table below lists each tile's hue in the order the row must read when the run is complete.
| Position in row | Expected hue (degrees) | Step from previous |
|---|---|---|
| 1 | 330 | — |
| 2 | 340 | +10 forward |
| 3 | 350 | +10 forward |
| 4 | 0 | +10 forward (wraparound) |
| 5 | 10 | +10 forward |
| 6 | 20 | +10 forward |
| 7 | 30 | +10 forward |
| 8 | 40 | +10 forward |
A naive numeric sort would place 0 before 330, even though 0 sits immediately after 350 along this particular arc. The CSS Color specification defines several ways to travel between hue angles, and Color Gradient Puzzle uses the shorter method: both endpoint angles are normalized into [0, 360), the difference is adjusted into the range −180 through 180 degrees, and eight linearly spaced values are generated before being normalized again. The MDN reference on hue interpolation documents the same arc rule for web color work, which is why the puzzle doubles as a short practice exercise for circular order in CSS.
Score, Deadlock, Restart, and Boss Key Behavior
Color Gradient Puzzle has a small set of named game states, each with a deterministic keyboard response. The table below summarizes what each state means for the player and what keys remain effective inside it.
| State | How it is reached | Keyboard response |
|---|---|---|
| Active play | Default state after the fixed shuffle loads | All listed keys change row order or selection; C runs the check |
| Complete | A correct check matches the exact ID-order | Score locked at 1,000; further input ignored until Restart |
| Deadlock | Two incorrect checks | Further drag, keyboard, and check input ignored until Restart |
| Restart | Choosing Restart at any time | Resets row order, moves, incorrect checks, and selection |
| Boss key | Pressing Escape twice in succession | Page chrome swap only; puzzle state is preserved underneath |
The terminal-state freeze on Complete and Deadlock is a deliberate guard against score farming, and it makes browser-side assertions repeatable: once a run ends, the row does not silently shuffle, and later key presses do not move tiles or run checks. Restart is the only action that returns the board to the fixed starting permutation.
What Color Gradient Puzzle Does and Does Not Cover
Everything runs in the current tab. No image, palette, result, or activity record is uploaded, the component contains no animation loop, no remote color API, and no runtime dataset download, and best score stays local to the current browser when storage is available. The game deliberately keeps one fixed sequence so every failure has a clear explanation and every success can be reproduced exactly.
The puzzle teaches circular order and CSS shorter-hue interpolation, but it does not 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 rather than a modern perceptual color space. If the task is to create a production gradient, inspect exact stops, copy CSS, compare contrast, or convert between color spaces, a dedicated color tool should be used instead — the puzzle is a quick practice exercise, not a calibration instrument.
For players who want a deeper look at the exact stops and the math behind the wraparound, the companion guide on restoring eight HSL tiles on the hue circle covers the same fixture from the sorting angle and can be used alongside this keyboard-first walkthrough.