Color Gradient Puzzle 接受一條完整的純鍵盤路徑，讓你不必使用拖曳、觸控板手勢或觸控螢幕，就能重新排列八塊打亂的 HSL 色彩方塊。拖曳所能執行的每一個動作——拿起方塊、與相鄰方塊交換、確認完成的順序——在相同的遊戲外殼中都內建了對應的鍵盤指令，因此鍵盤路徑並非精簡模式，而是透過按鍵呈現的同一套控制介面。按下 Space 或 Enter 以選取目前聚焦的方塊，按下 Left 或 Right 方向鍵將該方塊一次滑動一個位置，然後按 C 執行漸層檢查。每一次鍵盤操作都會以一次移動的形式記錄到拖曳所使用的同一個計數器中，而同一套精確的 ID 順序比對會判定該回合以 1,000 分成功結束，或在兩次錯誤檢查後進入死鎖。沒有隱藏的滑鼠步驟、沒有必要的懸停狀態，也沒有只能由指標觸發的最終點擊，因此從未碰過滑鼠的玩家，與只用拖曳的玩家，會在相同規則下得到相同的分數。
為何在此謎題中拖曳是可選的
Color Gradient Puzzle 的設計理念是：單一精確的色彩規則——330 度到 40 度之間較短的色相弧線——無論使用者是使用滑鼠還是鍵盤輸入，都應以相同的精確度進行遊玩。八塊方塊、固定的起始洗牌、確定性的檢查邏輯，以及 1,000 分獎勵，都是產品契約的一部分，而非任何單一輸入裝置所賦予的特權。拖曳與鍵盤並列為支援的輸入方式，兩者皆會回饋到同一個移動計數器與同一套精確的 ID 順序比對，因此兩種路徑在計分上並無優劣之分。
當玩家能精準指向方塊並親眼看到交換發生時，拖曳十分方便，但它需要一個可運作的指標、穩定的手部操作，有時還需要一個並非在所有瀏覽器中都以相同方式登錄原生拖曳事件的觸控表面。鍵盤遊玩則消除了這些依賴。只要能按下 Space、Enter、Left 方向鍵、Right 方向鍵與 C，使用者就能在完全不碰滑鼠的情況下完成謎題，這正是產品頁面 FAQ 條目直接以 Space/Enter、方向鍵與 C 的按鍵序列回答此問題，而非建議替代工具的原因。
鍵盤控制一覽
下表將每個按鍵對應到其所執行的動作，以及該動作所改變的遊戲狀態。每個項目皆對應產品契約中一份有記載的輸入，因此下表的綁定即為此謎題在鍵盤上所能辨識的完整組合。
| 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 |
一次移動只會重新排列順序；它不會重新計算色塊顏色、不會隨機化挑戰，也不會在背後悄悄完成遊戲。Check 動作是唯一能頒發 1,000 分或將錯誤檢查計數推向兩次失誤死鎖的步驟。
逐步還原 8 塊方塊的色相弧線
請依照下列步驟，僅以鍵盤完成一局 Color Gradient Puzzle。下方所示的順序是多數有視覺能力的玩家所採用的最短路，每一步僅使用控制表格中所列的按鍵。
- Tab 進入遊戲板，讓每塊方塊依序取得焦點，以便螢幕閱讀器能朗讀其數值色相。確認朗讀出的八個數值是 330、340、350、0、10、20、30 與 40 度的一個排列組合。
- 在可見的色塊中辨識最短的連續過渡，包括從 350 度經過 0 度的環繞。在心中記下你想放在最左側位置的精確色相。
- 反覆按 Tab，直到其色相屬於最左側位置的方塊取得焦點，然後按 Space 或 Enter 選取它。
- 每需要將選取的方塊向左移動一個位置，就按一次 Left 方向鍵。每按一次算作一次移動。
- Tab 到下一塊放錯位置的方塊，按 Space 或 Enter 選取，再利用 Left 或 Right 方向鍵將其滑入正確的相鄰位置。重複此步驟，直到每一對相鄰色相都沿著環繞前進十度。
- 當該列在視覺上看起來連續，且螢幕閱讀器以 330、340、350、0、10、20、30、40 的精確順序朗讀色相時，按 C（或啟用 Check gradient 控制項）以驗證該列。
- 若檢查通過，遊戲板會以正好 1,000 分凍結於完成狀態。若檢查失敗，錯誤檢查計數會遞增，且你可以在不重新開始的情況下繼續重新排列。
- 若發生第二次錯誤檢查，遊戲板會進入死鎖終止狀態。請按 Restart 以重設為同一組固定洗牌並再試一次。
固定的 HSL 序列與最短色相弧線
這八塊方塊屬於同一條 HSL 序列，從 330 度開始到 40 度結束，沿著 360° 環向前行進 70 度，而非向後橫越色相圓的大部分區域。每個色塊的飽和度與亮度分別固定為 72% 與 52%，因此方塊之間唯一改變的是圓上的色相位置。這正是讓 350 到 0 的環對肉眼可見的原因，也讓此謎題的焦點在於圓形順序而非亮度排序。
精確的色相值屬於公開的產品規格，這意味著同一序列無論在程式碼、瀏覽器中，或產品部署後，都可以接受測試，而答案不會因造訪時間而改變。下表依回合完成時該列必須呈現的順序列出每塊方塊的色相。
| 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 |
一個直覺的數值排序會將 0 排在 330 之前，儘管 0 在此特定弧線上位於 350 之後。CSS Color 規範定義了數種在色相角度之間移動的方式，而 Color Gradient Puzzle 使用的是較短路徑法：兩個端點角度皆被標準化至 [0, 360) 區間，差值會被調整至 −180 至 180 度的範圍內，並在再次標準化前產生八個等距的線性數值。MDN 關於 色相內插 的參考文件也記錄了相同的弧線規則，這也是為何此謎題同時可作為 CSS 圓形順序的簡短練習題。
分數、死鎖、重新開始與老闆鍵行為
Color Gradient Puzzle 有一組少量的具名遊戲狀態，每個狀態都具備確定性的鍵盤回應。下表概述每個狀態對玩家的意義，以及在其中仍然有效的按鍵。
| 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 |
在 Complete 與 Deadlock 上的終止狀態凍結，是為了防範分數農刷而刻意設置的防護機制，也讓瀏覽器端的斷言得以重複：一旦回合結束，該列不會悄悄洗牌，後續的按鍵也不會移動方塊或執行檢查。Restart 是唯一能將遊戲板返回固定起始排列的動作。
Color Gradient Puzzle 涵蓋與不涵蓋的範圍
所有運作皆在當前分頁中進行。不會上傳任何圖片、調色盤、結果或活動紀錄，元件內不含動畫迴圈、遠端色彩 API，也不會在執行階段下載資料集；當儲存空間可用時，最高分會保留在當前覽器中。遊戲刻意維持單一固定序列，讓每次失敗都有清楚的解釋，每次成功都能被精確重現。
此謎題教導圓形順序與 CSS 較短路徑色相內插，但並未聲稱 HSL 是感知上均勻的色彩空間。相等的數值色相步進在視覺上可能呈現不等的距離，因為 HSL 是 sRGB 的一種便利圓柱表示法，而非現代的感知色彩空間。若任務是建立正式環境用的漸層、檢查精確色標、複製 CSS、比較對比，或在不同色彩空間之間轉換，則應改用具專門功能的色彩工具——此謎題是一道快速的練習題，而非校準儀器。
對於希望深入了解精確色標與環繞背後數學的玩家，關於在色相圓上還原八塊 HSL 方塊的配套指南，從排序的角度探討了同一規格，可與本篇以鍵盤為主的操作教學搭配使用。
延伸閱讀：Sudoku with Colors: 9 Tokens, Full Rules, 1,000 Points。
延伸閱讀：Number Connecting Puzzle: Verify Every Segment for 1,000。