Color Gradient Puzzle 每日挑戰是一輪固定且可重現的關卡，要求你把八塊打亂的 HSL 色塊還原到從 330° 到 40° 的較短色相弧上。 每次開啟都會看到相同的八塊版面，每個拖曳或按鍵操作都是確定性的，排列正確即可獲得 1,000 分並結束該回合，但兩次錯誤檢查會使關卡進入死鎖。這個謎題不會在每次重玩時重新洗牌、隨機化或旋轉：你今天面對的版面和明天一模一樣，這也正是它適合作為每日練習題，而非一次性腦力遊戲的原因。每塊色塊都以瀏覽器的 hsl() 語法呈現，飽和度 72%、亮度 52%，因此色相是唯一會變動的通道。正是這種單通道設計，讓謎題可以用文字描述——輔助科技可以讀出每塊色塊的數值色相——也讓從 350° 經過 0° 到 10° 的跨越成為整個挑戰的核心。如果你想要看具體的每日固定版面，請開啟 Color Gradient Puzzle，查看每次載入時出現的那八塊色塊；不同回合之間不會有任何其他變化。
每日版面實際包含什麼
每日固定版面是從一個固定 HSL 序列中抽出、橫向排列的八塊色塊。左端是 330°，右端是 40°，依序正確的八個色相為 330、340、350、0、10、20、30 和 40。整列的飽和度與亮度固定維持在 72% 與 52%，避免亮度與彩度引入第二種排序線索。由於只有色相會變動，相鄰兩塊色塊之間的視覺變化永遠是固定的一個 10 度步進——唯一的例外是，這個步進跨越了從 350° 經過 0° 到 10° 的色相回繞，而不是從 350° 以數值遞減的方式排列。
因為版面是固定的，所以你可以加以驗證。這八個色相並非每次造訪時由隨機種子產生，排列順序也沒有依時間重新洗牌，更沒有把正確序列藏在伺服器後端。無論是重新整理頁面、重新啟動瀏覽器，或正式部署後上線，同樣的固定版面都不會改變，這也讓每日挑戰可以同時充當任何宣稱能重現它的程式碼的回歸測試。72% 飽和度與 52% 亮度屬於顯示層級的固定參數，而非視覺感知上的聲明；選擇這兩個值，是為了讓色塊在一般螢幕上仍然清晰可讀。
為什麼每日版面上 0° 會落在 350° 與 10° 之間
色相是圓周上的一個角度，因此從 330° 到 40° 的距離，並不是 330 − 40 = 290° 這個差值。它其實是兩段弧中較短的那一段：向後經過綠色半圓的 290°，或向前經過紅色回繞的 70°。CSS Color 規格將這個做法稱為「較短色相內插法」(shorter hue interpolation method)，而 W3C CSS Color Module Level 4 將其定義為：先把角度差調整到 −180° 到 180° 的範圍內，再進行內插。MDN 的 hue-interpolation-method 參考文件以實作角度重新表述了同一規則，而 W3C 色相內插章節 則是每日謎題在底層實際遵循的規範。對於 330° 到 40°，這個規則會選出向前 70° 的那一段弧，因此八個色相的排列是 330 → 340 → 350 → 0 → 10 → 20 → 30 → 40，而不是繞一大圈經過 220° 回到原點。
這段每日弧線的算式相當簡單，可以徒手驗算：
- 向前經過 0°：(360° − 330°) + 40° = 30° + 40° = 70°。
- 向後經過 180°：330° − 40° = 290°。
- 比較兩者：70° < 290°，因此較短的弧線是向前 70°、經過回繞的那一條。
天真的數值排序會把這八個色相排成 0、10、20、30、40、330、340、350，因為 0 是最小的數字；但對這個版面來說，這個順序是錯誤的。這個謎題刻意採用色相，正是因為色相是循環的，而每日挑戰的目標，就是抗拒把它當作一條扁平清單來處理的誘惑。W3C 與 MDN 的參考文件解釋了每日謎題所使用的同一種正規化做法：先讓兩個端點都落在 [0, 360) 範圍內，把差值平移到 [−180, 180] 區間，再對八個停點做等距線性內插並重新正規化。
| 列中的位置 | 正確色相（較短弧線） | 天真數值排序會排出的結果 |
|---|---|---|
| 1 | 330° | 0° |
| 2 | 340° | 10° |
| 3 | 350° | 20° |
| 4 | 0° | 30° |
| 5 | 10° | 40° |
| 6 | 20° | 330° |
| 7 | 30° | 340° |
| 8 | 40° | 350° |
如何解開每日 Color Gradient Puzzle
每輪開始時，這八個色相會以固定且打亂的順序出現，你的任務是在用完兩次檢查機會之前，把它們排回上面那個正確順序。下列步驟說明每日關卡所支援的完整鍵盤與滑鼠操作流程。
- 檢視八塊打亂的色塊。尋找最短的連續色相變化，包含從 350° 經過 0° 到 10° 的回繞。使用螢幕閱讀器的玩家可以聽到每塊色塊的數值色相，因此不依賴顏色也能進行同樣的檢視。
- 拖曳色塊到定位。把一塊色塊拖到另一塊色塊前方，即可插入該位置。這個動作只會改變順序，不會重新計算顏色、不會重新洗牌版面，也不會結束回合。
- 或用 Space 或 Enter 選取，再用方向鍵移動。在已聚焦的色塊上按 Space 或 Enter 來選取它，接著按 Left 或 Right 方向鍵，將它與該側的色塊交換位置。每按一次，色塊只會移動一個位置。
- 按下 Check gradient 或 C 鍵。當整列看起來已經連續時，按下 Check 按鈕或 C 鍵。順序正確即結束該回合並獲得 1,000 分；順序錯誤則計一次失誤，並維持原版面讓你繼續重新排列。
- 若進入死鎖請重新開始。兩次錯誤檢查會結束該回合，直到你按下 Restart 為止；按下後會還原原本固定的排列順序，並同時重設計次與失誤次數。
每日關卡的鍵盤操作
每日 Color Gradient Puzzle 完全可以不使用滑鼠遊玩，這對於想在其他工作之間順手打開練一輪的玩家來說相當方便。鍵盤配置簡短好記，每顆鍵只負責一個動作。
| 動作 | 滑鼠／指標 | 鍵盤 |
|---|---|---|
| 拿起已聚焦的色塊 | 拖曳一塊色塊 | Space 或 Enter |
| 將選取的色塊移動一格 | 拖放到另一塊色塊前方 | Left 或 Right 方向鍵 |
| 檢查目前的順序 | 點擊 Check gradient | C |
| 快速隱藏謎題 | — | 連按兩次 Escape（老闆鍵） |
| 重置該回合 | 點擊 Restart | 僅限 Restart 按鈕 |
雙按 Escape 的老闆鍵是與其他 Lizely 瀏覽器遊戲共用的，因此無論你開啟的是這個每日挑戰，或站上其他鍵盤優先的謎題，同樣的緊急手勢都能派上用場。聚焦狀態、計次、失誤次數、完成狀態與死鎖狀態都是確定性的，因此螢幕閱讀器能讀出和明眼玩家所見相同的數字，你也可以在瀏器的 DevTools 中驗證同一狀態。在窄螢幕上，色塊會排成四欄、每欄兩塊；在較寬的螢幕上，則會維持一列八塊、不會出現水平溢出。
計分、死鎖與重新開始規則
排列正確會立即結束該回合，並剛好獲得 1,000 分。唯一能頒發分數或累計失誤的動作，就是產生正確順序的那一次檢查——單純移動永遠不會結束遊戲、永遠不會扣分，也永遠不會重新洗牌。錯誤的檢查會維持原版面、增加失誤次數，並讓你繼續重新排列。兩次錯誤檢查會結束該回合，在第二次錯誤檢查之後，無論是拖曳、鍵盤輸入或檢查，都會被忽略，直到你按下 Restart 為止。這個終止狀態的凍結機制，能避免一陣亂點來農出額外分數，也讓每日固定版面能從程式碼中完整重現。
按下 Restart 會還原原本固定的排列順序，並重設計次與失誤兩項計數器，因此當天的第二次嘗試面對的會是和第一次一模一樣的謎題。最佳分數會在瀏覽器可使用本地儲存時保存下來，而該回合的任何資訊——顏色、移動、失誤、分數——都不會被上傳。這個元件不會呼叫遠端顏色 API、不會下載執行階段資料集，也不會執行動畫迴圈，因此即使在離線狀態下也能遊玩每日關卡，而且不會主動連回伺服器。
每日謎題能教你的——以及它教不了你的
每日 Color Gradient Puzzle 是圍繞一個特定概念所設計的：色相是一個角度，而「較短色相內插」才是沿著圓周逐步前進的正確規則。一旦你看懂為什麼在這裡 0° 應該落在 350° 與 10° 之間，同樣的規則也會出現在 CSS 漸層停點、color-mix() 的內插，以及任何沿著色相環走動的程式碼之中。這個謎題在無障礙設計上的選擇——把數值色相讀給輔助科技——也示範了把「只能靠顏色」的謎題開放給非視覺玩家的正確做法：把答案通道和視覺通道一起送出去，而不是用前者取代後者。
每日版面教不了你的，是感知上的均勻性。HSL 只是 sRGB 一種方便的圓柱表示法，並非校準過的色彩空間，因此相等的 10 度色相步進，不一定會呈現相等的視覺跳躍。固定的 72% 飽和度與 52% 亮度，是為了呈現一排鮮明易讀的色塊而選擇的；它們並不代表 HSL 在感知上是均勻的。如果你的真正任務是產生可上線的漸層、比較對比、在不同色彩空間之間轉換，或對應印刷輸出，那麼這個每日謎題並不是合適的工具。這類工作請改用專門的色彩工具，而把這個每日關卡留給色相環的練習。
如果你正在比較各種選項，Color Sudoku for Beginners: Start With One Open Cell 一文對此有詳細說明。
如果你正在比較各種選項，How Many Blocks Puzzle: Read the Isometric Pile Correctly 一文對此有詳細說明。