The Color Gradient Puzzle daily challenge is one fixed reproducible round that asks you to restore eight shuffled HSL tiles to the shorter hue arc running from 330° to 40°. Every visit opens the same eight-tile board, every drag or keystroke is deterministic, and a correct row finishes the run for 1,000 points while two wrong checks deadlock it. The puzzle does not reseed, randomize, or rotate between sessions: the board you face today is the board you will face tomorrow, which is what makes it useful as a daily practice exercise rather than a one-off brainteaser. Each tile is rendered with the browser's hsl() syntax at 72% saturation and 52% lightness, so hue is the only varying channel. That single-channel setup is what lets the puzzle be expressed in words — assistive technology can announce each tile's numeric hue — and what makes the wrap from 350° through 0° to 10° the entire challenge. If you want to see the concrete daily fixture, open the Color Gradient Puzzle and look at the eight tiles that load on every visit; nothing else changes between rounds.
What the daily board actually contains
The daily fixture is a single row of eight tiles drawn from one fixed HSL sequence. The endpoints are 330° on the left and 40° on the right, and the eight expected hues in order are 330, 340, 350, 0, 10, 20, 30, and 40. Saturation and lightness stay pinned at 72% and 52% across the row, which keeps brightness and chroma from introducing a second sorting signal. With only hue varying, the visual change between any two neighboring tiles is one constant ten-degree step — except that step crosses the wrap from 350° through 0° to 10° instead of running numerically downward from 350°.
Because the board is fixed, you can audit it. The eight hues are not generated per visit from a random seed, the permutation is not shuffled against a clock, and the expected sequence is not hidden behind a server. The same fixture survives page reloads, browser restarts, and production deployment, which is what lets the daily challenge double as a regression test for any code that claims to reproduce it. The 72% saturation and 52% lightness are display fixtures rather than perceptual claims; they were picked to keep the swatches readable on a typical monitor.
Why 0° sits between 350° and 10° on the daily board
Hue is an angle on a circle, so the distance from 330° to 40° is not the difference 330 − 40 = 290°. It is the shorter of two arcs: 290° backward through the green half of the wheel, or 70° forward through the red wraparound. The CSS Color specification calls this the shorter hue interpolation method, and the W3C CSS Color Module Level 4 defines it as the path that adjusts the angular difference into the range from −180° to 180° before interpolating. MDN's hue-interpolation-method reference restates the same rule in implementation terms, and the W3C hue interpolation section is what the daily puzzle follows under the hood. From 330° to 40°, that rule selects the forward 70° arc, so the eight hues step 330 → 340 → 350 → 0 → 10 → 20 → 30 → 40 instead of wrapping around the long way back through 220°.
The arithmetic for the daily arc is short enough to check by hand:
- Forward through 0°: (360° − 330°) + 40° = 30° + 40° = 70°.
- Backward through 180°: 330° − 40° = 290°.
- Compare: 70° < 290°, so the shorter arc is the 70° forward path through the wraparound.
A naive numeric sort would order the eight hues 0, 10, 20, 30, 40, 330, 340, 350 because 0 is the smallest number, but that order is wrong for this board. The puzzle deliberately uses hue because hue is circular, and the daily challenge is to resist the temptation to treat it as a flat list. The W3C and MDN references explain the same normalization the daily puzzle applies: bring both endpoints into [0, 360), shift the difference into [−180, 180], then linearly space the eight stops and renormalize.
| Position in the row | Correct hue (shorter arc) | What a naive numeric sort would put there |
|---|---|---|
| 1 | 330° | 0° |
| 2 | 340° | 10° |
| 3 | 350° | 20° |
| 4 | 0° | 30° |
| 5 | 10° | 40° |
| 6 | 20° | 330° |
| 7 | 30° | 340° |
| 8 | 40° | 350° |
How to solve the daily Color Gradient Puzzle
Each round opens with the eight hues in a fixed shuffled permutation and your job is to return them to the order above before you burn two checks. The steps below describe the full keyboard and pointer workflow the daily run supports.
- Inspect the eight shuffled tiles. Look for the shortest continuous hue transition, including the wrap from 350° through 0° to 10°. Screen-reader users can hear each tile's numeric hue announced, so the same inspection is available without relying on color.
- Drag tiles into position. Drag a tile in front of another tile to insert it there. A move changes only the order; it does not recompute colors, randomize the board, or finish the run.
- Or select with Space or Enter and move with arrow keys. Press Space or Enter on the focused tile to select it, then press Left or Right arrow to swap it with the tile on that side. Each press moves the tile one slot.
- Press Check gradient or C. When the row looks continuous, press the Check button or hit C. A correct order finishes the round for 1,000 points; an incorrect order adds one mistake and leaves the board in place so you can keep reordering.
- Restart if you deadlock. Two incorrect checks end the run until you press Restart, which restores the original fixed permutation and resets both the move count and the mistake count.
Keyboard controls for the daily run
The daily Color Gradient Puzzle is fully playable without a mouse, which is helpful for a routine you might fire up between other tasks. The keyboard layout is small enough to keep in your head, and every key does exactly one thing.
| Action | Mouse / pointer | Keyboard |
|---|---|---|
| Pick up the focused tile | Drag a tile | Space or Enter |
| Move the selected tile one slot | Drop in front of another tile | Left or Right arrow |
| Check the current order | Click Check gradient | C |
| Hide the puzzle quickly | — | Press Escape twice (Boss Key) |
| Reset the round | Click Restart | Restart button only |
The double-Escape boss key is shared with other Lizely browser games, which means the same panic gesture works whether you opened this daily challenge or a different keyboard-first puzzle on the site. Focus state, move count, incorrect-check count, completion, and deadlock are all deterministic, so a screen reader can announce the same numbers a sighted player sees and you can verify the same state in browser DevTools. On a narrow screen the tiles wrap into four columns of two; on a wider screen they form one eight-tile row without horizontal overflow.
Scoring, deadlocks, and restart rules
A correct arrangement finishes the round immediately and awards exactly 1,000 points. The check that produced the correct order is the only action that can award the score or add a mistake — moves alone never finish the game, never reduce the score, and never randomize the fixture. An incorrect check leaves the board where it is, increments the mistake count, and lets you keep reordering. Two incorrect checks end the run, and after the second wrong check, further drag, keyboard, and check input is ignored until you press Restart. That terminal-state freeze is what stops a streak of click-spamming from farming extra points and what makes the daily fixture reproducible from code.
Restart restores the original fixed permutation and resets both counters, so the second attempt of the day faces the same puzzle as the first. Best score persists in local browser storage when storage is available, and nothing about the run — colors, moves, mistakes, score — is uploaded. The component does not call a remote color API, does not download a runtime dataset, and does not run an animation loop, so the daily run survives offline sessions and does not phone home.
What the daily puzzle teaches — and what it doesn't
The daily Color Gradient Puzzle is built around one specific idea: hue is an angle, and shorter-hue interpolation is the right rule for stepping around it. Once you see why 0° belongs between 350° and 10° here, the same rule shows up in CSS gradient stops, in color-mix() interpolation, and in any code that walks around a hue wheel. The puzzle's accessibility choice — announcing numeric hues to assistive technology — also shows the right way to expose a color-only puzzle to non-sighted players: ship the answer channel next to the visual channel, not in place of it.
What the daily board does not teach is perceptual uniformity. HSL is a convenient cylindrical representation of sRGB, not a calibrated color space, and equal ten-degree hue steps do not always look like equal visual jumps. The fixed 72% saturation and 52% lightness were chosen for a vivid, readable row; they are not a claim that HSL is perceptually flat. If your real task is generating a production gradient, comparing contrast, converting between color spaces, or matching print output, the daily puzzle is the wrong tool. Open a dedicated color tool for those jobs and keep this daily round for hue-circle practice.
If you're weighing options, Color Sudoku for Beginners: Start With One Open Cell covers this in detail.
If you're weighing options, How Many Blocks Puzzle: Read the Isometric Pile Correctly covers this in detail.