色彩漸層拼圖

使用方式

1. 1.檢視八塊隨機排列的方塊，尋找最短的連續 HSL 色相轉換，包含穿越紅色的迴圈。
2. 2.拖曳方塊至正確位置，或按 Space 或 Enter 選取方塊，再使用左右箭頭鍵移動。
3. 3.選擇「檢查漸層」或按 C；在連續兩次錯誤檢查前，可恢復所有八種色相。

關於色彩漸層拼圖

色彩漸層拼圖將一個精確的色彩規則轉化為短暫的視覺排序遊戲。八塊色塊屬於同一 HSL 序列，從 330 度開始，到 40 度結束。當挑戰開啟時，色塊會被隨機打亂。你的任務是恢復平滑順序，特別是容易被忽略的從 350 度到 0 度的環繞部分。拖動一個色塊至另一個色塊之前，或按 Space 或 Enter 選取後，使用左右箭頭鍵移動。當行看起來連續時，選擇「檢查漸層」。正確排列可獲得 1,000 分；兩次錯誤檢查將結束遊戲，直到重新開始才可繼續。

此拼圖使用 HSL 是因為色相以圓形上的角度表示。飽和度與亮度保持不變，僅色相位置改變。這讓預期的關係清晰可見，避免亮度或飽和度引入第二個排序訊號。起點與終點，以及色塊數量為產品固定設定，不會因瀏覽次數而改變，確保挑戰可重複驗證，並能在程式碼、瀏覽器環境及生產部署後進行測試。

圓形插值比一般數值排序需要更多細心。簡單的數值排序會將 0 放在 330 之前，即使 0 會緊接在 350 之後沿此特定弧線。CSS 色彩規格定義了多種在色相角度間移動的方法。本遊戲使用較短的路徑：將兩個角度標準化，調整其差值至負 180 到正 180 度之間，再線性插值所需的位移。從 330 到 40，較短路徑會沿環繞前進 70 度，而非向後跨越大部分色相輪。

八個預期的色相為 330、340、350、0、10、20、30 與 40 度。頁面不會在畫面旁顯示答案，但輔助科技可朗讀每個色塊的數值色相，讓互動不侷限於視覺。此可及性設計讓螢幕閱讀器使用者能明確得知答案，同時保留視覺挑戰給視覺使用者。鍵盤焦點、選擇狀態、移動次數、錯誤檢查次數、完成狀態、死鎖、重新開始，以及共用的雙 ESC 老闆鍵皆有確定的狀態。

一次移動僅改變順序，不會重新計算顏色、重新隨機挑戰，或靜默完成遊戲。唯有「檢查」動作可獲得最終分數或增加錯誤次數。一旦遊戲完成或進入死鎖狀態，之後的拖曳、鍵盤與檢查輸入將被忽略，直到重新開始。此終端狀態的封鎖防止分數農耕，並讓瀏覽器斷言可重複執行。最佳分數僅儲存在當前瀏覽器的本機狀態中。

視覺樣板使用瀏覽器的 hsl() 色彩語法，設定為 72 百分比飽和度與 52 百分比亮度。這些顯示值為可讀且鮮豔的選擇，並非宣稱 HSL 具有感知均勻性。相等的數值色相步距在視覺上可能看起來距離不等，因為 HSL 是 sRGB 的圓柱體表示，而非現代的感知色彩空間。此遊戲教導的是圓形順序與 CSS 更短的色相插值，而非色彩差異測量、可及性對比、印刷匹配或校準色彩科學。

所有內容皆在當前標籤中執行。不會上傳任何圖片、調色盤、結果或活動紀錄。此元件不包含動畫迴圈、遠端色彩 API 或執行時資料集下載。它使用共享遊戲殼、本機設計標記、響應式色塊、原生拖曳事件與鍵盤控制。在窄螢幕上，色塊會疊成四列；在寬螢幕上則排成一排八塊，不會橫向溢位。

使用此謎題作為快速練習，針對色相迴圈、CSS 色彩操作或視覺排序。若需建立生產級漸層，請檢視精確的色相停點、複製 CSS、比較對比度，或在不同色彩空間間轉換，建議使用專用的色彩工具。此遊戲刻意維持一個固定順序，因此每一次失敗都有明確解釋，每一次成功都能完全重現。

方法與來源

兩個端點的色相都會歸一化至 [0,360)。其差值會根據 CSS 的較短色相插值調整至 [-180,180]，然後產生八個線性間隔的值並再次歸一化。固定的排列提供初始棋盤。重新排序會增加移動步數；若完全符合 ID 順序則獲得 1,000；兩次失敗將導致遊戲死鎖；終止狀態將忽略進一步輸入。

• W3C CSS Color Module Level 4 — Hue Interpolation
• MDN — hue-interpolation-method

常見問題

為何 0 度數必須介於 350 與 10 度數之間？

色相是迴圈的。在 350 度數之後，接下來的十度步驟會迴圈至 0，然後繼續到 10 度數。

何謂較短的色相？

它會選擇起點與終點角度之間較短的弧段，再進行等距插值。

HSL 是視覺上均勻的嗎？

不是。此遊戲教導的是數值上的色相順序與 CSS 的插值，並非等於視覺上色差的感知，也非經校準的色彩匹配。

是否可以不拖曳就進行遊戲？

可以。按 Space 或 Enter 選取目前聚焦的方塊，使用左右箭頭鍵移動，再按 C 檢查該行。

相關工具

• 馬賽克拼圖
  將每個方塊分類為黑色或白色，直到每一個提示與其裁剪後的 3×3 鄰居數量相符。
• 🗞️紙摺謎題
  預測五張透明四乘四紙張摺疊後，展平時 punched 孔的位置。
• 數字連線謎題
  以連續的正交路徑連線兩組相匹配的數字，並避免重複的格子、重疊、分支以及錯誤的端點。
• 水管謎題
  旋轉九個固定管道方塊，直到每個開口與鄰居匹配，且所有方塊組成一個連通的網路，且不形成閉合迴路。
• 15 數字華容道
  在瀏覽器免費遊玩經典 15 數字華容道；使用鍵盤或點選滑動方塊，不需下載或註冊。
• 2048 遊戲
  在瀏覽器免費玩 2048；用方向鍵合併方塊、挑戰 2048，不需下載或註冊。

• Solve the Color Gradient Puzzle by Following the Shortest Hue Arc (英文原文)
• Color Gradient Puzzle: Play Without Dragging Using Keys (英文原文)
• Color Gradient Puzzle: Restore 8 HSL Tiles on the Hue Circle (英文原文)
• Can You Play Shape Rotation Match With a Keyboard? Yes (英文原文)
• Connect Numbers in Sequence? Numberlink Pairs Them Instead (英文原文)
• River Crossing Puzzle Score Is a Fixed Reward, Not a Test (英文原文)
• Are the Pattern Completion Test Questions Randomized? No (英文原文)
• Semantic vs Thematic Odd One Out: A Pinned-Sense Game (英文原文)
• Literal vs Idiomatic Phrasal Verbs: 8 Contexts to Test (英文原文)
• Play Nurikabe on a Phone or Without a Mouse (英文原文)
• Can You Play Number Memory Test Without Downloading? Yes (英文原文)
• Do Diagonal Numbers Count as Adjacent in Number Match 10? (英文原文)
• How Do I Avoid Common Mistakes in Number Balance? (英文原文)
• Can You Play Nonogram Without Downloading? Yes (英文原文)
• Do Two Things at Once Game: Beat Both Deadlines (英文原文)
• Moving Object Memory Game: Track Two Discs to 1,000 (英文原文)
• Creature Inheritance Game: Genetics or Fictional Puzzle? (英文原文)
• Mirror Laser Puzzle Game: How Slash Tiles Route Rays (英文原文)
• Mirror Image Questions: 5 Asymmetric Polygons to Reflect (英文原文)
• Can You Play Memory Match Without Downloading? Yes (英文原文)