Color Gradient Puzzle 只有單一難度等級：八塊 HSL 色塊，必須沿著一條固定的弧線（從 330° 經過 0° 到 40°）重新排序，沒有可選擇的階級、沒有漸進式解鎖、也沒有計時壓力。每次造訪的挑戰都相同，難度也相同。由於這個謎題刻意固定了一個序列和一個跨越 0° 的陷阱，所以沒有「簡單」、「中等」或「困難」模式可以切換。每次嘗試之間會改變的，只有你的移動次數和錯誤檢查次數。這個謎題使用 HSL 是因為色相在色輪上以角度表示，而飽和度和亮度在可見色塊上分別固定為 72% 和 52%，因此色塊之間只有色相位置會改變。這個單一的排序線索就是整個遊戲，而精通跨越 360 度的最短弧線是你唯一需要克服的難度。
為何這個謎題沒有可選擇的難度等級
大多數謎題遊戲都提供難度選單，但 Color Gradient Puzzle 的設計核心是可重現性，而非進程式推進。端點和色塊數量是已揭露的產品規格，且不會在每次造訪時改變，這使得挑戰可以重現，並讓同一個預期序列能在程式碼、瀏覽器以及正式部署之後進行測試。固定的排列組合提供了起始的版面，因此挑戰開始時八塊色塊總是以相同的打亂順序出現。這個設計選擇將「難度」轉變為你針對單一特定弧線所衡量的結果，而非跨越一連串遞增挑戰的階梯。
如果有讀者期待「第一級」的色塊數量或「第二級」的端點變化，答案是這個謎題並未提供這些。固定的弧線賦予這個謎題兩個其他漸層遊戲從未打破的實用特性：每次失敗都有清楚的解釋，每次成功都能精確重現。入門者和專家面對的都是介於 330 度到 40 度之間的相同八塊色塊，唯一變數是他們在兩次檢查失敗結束回合之前，能多快、多乾淨地恢復正確順序。
真正決定難度的因素
由於沒有可選擇的等級，三個機制因素決定了一回合會感覺多難：跨越 0° 的陷阱、兩次檢查的限制，以及嚴格的計分規則。下表將每個因素與玩家可用的控制項進行比較，讓你能看出難度存在於何處，以及控制項如何抵消它。
| 難度因素 | 其呈現方式 | 可抵消它的控制項 |
|---|---|---|
| 350°→0°→10° 的色相跨越 | 天真的數值排序將被趨近於 0° 的色塊放在 330° 之前，而非介於 350° 和 10° 之間 | 遵循最短的色相弧線，而非數值順序 |
| 兩次錯誤檢查 | 第二次失敗的檢查漸層會結束回合，直到按下 Restart | 在按下 C 之前以視覺方式驗證；謹慎使用檢查 |
| 精確的 ID 順序比對 | 只有完美的排列才能獲得 1,000 分的完成分數 | 仔細重新排序；部分進度永遠不會計分 |
| 顯示給玩家的移動計數器 | 每次拖曳或方向鍵移動都會計數一次 | 使用鍵盤方向鍵以獲得比拖曳更精細的控制 |
| 終端狀態凍結 | 當回合完成或陷入死鎖時，拖曳、鍵盤和檢查輸入都會被忽略 | 按下 Restart 以開始新的嘗試 |
這五個因素就是完整的難度介面。這個遊戲刻意保持單一固定序列，讓每次失敗都有清楚的解釋，每次成功都能精確重現，而不是將難度隱藏在隨機的升級之中。
如何恢復八塊 HSL 色塊的順序
回合開始時已有八塊打亂的色塊。你的工作是將它們放回最短的連續 HSL 色相轉換，包括容易忽略的從 350 度跨越 0 度的那一段。以下步驟將帶你走過從全新開啟到獲得 1,000 分的精確路徑。
- 檢視八塊打亂的色塊，尋找最短的連續 HSL 色相轉換，包括跨越紅色的那一段。先找出最接近 330° 的色塊和最接近 40° 的色塊，因為它們是弧線的兩端定錨點。
- 用滑鼠拖曳色塊到位，或使用 Space 或 Enter 選取色塊，再使用左右方向鍵移動它，以獲得更精細的擺放。
- 在腦中將這排色塊從 330° 走到 340° 走到 350° 走到 0° 走到 10° 走到 20° 走到 30° 走到 40°。預期的色相為 330、340、350、0、10、20、30 和 40 度，會沿著跨越 0° 區域的最短路徑前進 70 度，而非向後跨越大部分色輪。
- 繼續重新排序，直到這排色塊看起來連續，且從 350° 跨越到 0° 的銜接沒有中斷。如果在你的裝置上拖曳感覺不夠精準，請使用鍵盤控制項。
- 選擇 Check gradient 或按下 C 鍵。正確的排列可以以 1,000 分結束回合；兩次錯誤檢查會在使用 Restart 之前結束回合。
- 如果這排色塊的順序還不對，再次研究可見的順序、重複重新排序，並且只在跨越 0° 的銜接平滑時按下 C。每次移動只會改變順序；它不會重新計算顏色、不會隨機化挑戰，也不會悄悄完成遊戲。
提高難度的跨越 0° 陷阱
這個謎題中最大的單一難度來源就是跨越 0° 的部分，因為色相是循環的，且必須使用 CSS 的最短色相插值，而非天真的數值排序。CSS Color 規範定義了數種在色相角度之間移動的方式。Color Gradient Puzzle 使用最短路徑的方法：將兩個角度標準化，將它們的差值調整到負 180 到 180 度的範圍內，然後對所要求的格數進行線性插值。從 330 度到 40 度，最短路徑會跨越 0° 前進 70 度，而非向後跨越大部分色輪。
下表列出八個預期色相的順序（也就是你應該擺放它們的順序），讓從 350 跨越 0 到 10 的部分一眼可見。
| 位置 | 預期色相（度） | 在弧線中的角色 |
|---|---|---|
| 1 | 330 | 起始端點 |
| 2 | 340 | 沿最短弧線的第一步 |
| 3 | 350 | 跨越 0° 之前的最後一步 |
| 4 | 0 | 跨越點，介於 350 和 10 之間 |
| 5 | 10 | 跨越 0° 之後的第一步 |
| 6 | 20 | 繼續沿最短弧線前進 |
| 7 | 30 | 倒數第二步 |
| 8 | 40 | 結束端點 |
如果你將這些值當作普通數字排序，0 會落在 330 之前，跨越 0° 的銜接就會中斷。上表中的正確順序，是當實作方法將兩個端點標準化、將差值調整到負 180 到 180 度的範圍內，然後對八個位置進行線性插值時所產生的排列方式。在上述操作步驟的檢視步驟中走過這八個值，是讓難度保持可控最可靠的方法。
計分、死鎖與重新開始機制
計分規則很嚴格：正確的排列可以以 1,000 分結束回合，其他任何動作都不會給分。移動只會改變順序。它不會重新計算顏色、不會隨機化挑戰，也不會悄悄完成遊戲。檢查是唯一能頒發最終分數或增加錯誤次數的動作。一旦遊戲完成或陷入死鎖，之後的拖曳、鍵盤和檢查輸入都會被忽略，直到按下 Restart，而這種終端狀態凍結能防止分數農場行為，並讓瀏覽器斷言變得可重複。
最高分會在儲存空間可用時保留在當前瀏覽器中，並且不會上傳任何結果或活動紀錄。一切都在當前分頁中執行，該元件不包含動畫迴圈、遠端色彩 API 或執行階段資料集下載，且此謎題使用共用的遊戲外殼、本地設計權杖、回應式色塊、原生拖曳事件和鍵盤控制項。在窄螢幕上，色塊會排成四欄；在寬螢幕上則會形成一排八塊色塊，而不會水平溢出。
難度降低的時機
有兩個設計選擇能為螢幕閱讀器使用者以及任何偏好不拖曳的人降低難度。首先，頁面不會在版面旁邊印出預期色相，但輔助技術可以播報每塊色塊的數值色相，因此這個互動並非僅依賴顏色。這種無障礙選擇讓螢幕閱讀器使用者能明確知道答案，同時為視覺玩家保留了視覺謎題。其次，完整的鍵盤操作路徑消除了滑鼠拖曳在觸控板或高 DPI 螢幕上可能產生的精準度問題：按下 Space 或 Enter 以選取已聚焦的色塊，使用左或右方向鍵移動它，然後按下 C 以檢查這排色塊。
確定性的狀態讓練習迴圈保持簡短。鍵盤聚焦、選取狀態、移動次數、錯誤檢查次數、完成、死鎖、Restart，以及共用的雙 Esc 老闆鍵，全部都具有可重現的值，因此每次嘗試的行為都完全相同。一份關於遵循最短色相弧線的專屬攻略更深入地涵蓋了相同的跨越 0° 概念，如果你想要對回合中最棘手的部分進行第二次練習，可以參考。
這個謎題教了什麼，又沒教什麼
因為只有一個難度等級，了解這個謎題實際上在教什麼會有所幫助。它教的是循環排序和 CSS 最短色相插值，而不是色差測量、無障礙對比、印刷對色或校正過的色彩科學。相等的數值色相步進在視覺上看起來可能有不同的視覺距離，因為 HSL 只是 sRGB 的一個方便的圓柱表示法，而不是現代的感知色彩空間。飽和度 72% 和亮度 52% 的固定顯示值是為了讓一排色塊清晰、鮮明而選擇的，它們並非主張 HSL 具有感知均勻性。如果你需要製作正式的漸層、檢查精確的色標、複製 CSS、比較對比或在不同色彩空間之間轉換，請改用專用的色彩工具。這個謎題是用於色相跨越 0°、CSS 色彩工作或視覺排序的快速練習，而這個有限的範圍正是難度在各個經驗等級都能保持平易近人的原因。
延伸閱讀：給初學者的配色遊戲：從 RGB 和 CMY 開始。