這個給初學者的色彩漸層謎題是一款簡短、適合使用鍵盤的排序遊戲，圍繞著八塊固定 HSL 色相磚所構成的關卡，你必須將它們排列成一條從 330 度經過 0 度再到 40 度的連續弧線。每塊磚都顯示一個單一顏色，而色相值是各磚之間唯一會變動的部分；飽和度固定為 72 個百分比，亮度則固定為 52 個百分比。謎題開始時這八塊磚是隨機洗亂的，你的任務是將它們恢復成流暢的色相順序，其中包含容易忽略的從 350 度繞回 0 度的循環。每次正確檢查可獲得 1,000 分；兩次錯誤檢查即結束本回合，直到你按下重新開始為止。由於端點、磚塊數量與確切順序都是固定的，因此每位初學者的每次嘗試都會面對同一個可重現的挑戰，這使得本遊戲成為練習循環色相排序與 CSS 短距離色相內插的快速方式，無需任何色彩知識背景。
當版面開啟時，初學者看到什麼
當 色彩漸層謎題 首次載入時，在較寬的螢幕上你會看到八塊彩色磚以單行排列，在較窄的手機上則以四欄格狀排列。這些顏色看起來非常接近，而這正是重點：每塊磚與下一塊磚之間恰好相差 10 個色相度，但人眼未必總能辨識出等距的數值步進。飽和度與亮度保持恆定，因此唯一允許變動的就是色相位置。這代表初學者並非在考驗亮度或鮮豔度的判斷；唯一的訊號就是色相順序。
磚塊下方有幾個簡單的控制項。有一個「檢查漸層」按鈕用來確認你的成果，一個「重新開始」按鈕用來重新啟動本回合，以及一個共用的雙擊 Escape 老闆鍵。移動計數器與錯誤檢查計數器會在你遊玩過程中更新，因此初學者隨時都能知道在回合鎖定前還剩下幾次犯錯機會。
為什麼色相是循環的，以及為什麼 0 度會讓初學者困惑
色相並非一條數線。它是圓形上的一個角度，而圓共有 360 度。在這個謎題中，八個預期的色相分別是 330、340、350、0、10、20、30 與 40 度。一般數值排序會將 0 放在任何 0 到 360 範圍的最開頭，但在這條弧線中，0 實際上位於 350 和 10 之間。忘記這個循環就是初學者最常犯的單一錯誤。
CSS 色彩規範定義了如何在兩個色相角度之間移動。本謎題採用較短路徑法：它會將兩個角度都標準化到 0 到 359 的範圍內，將差值調整到負 180 到 180 度的範圍內，再對所要求的格數進行線性內插。對於從 330 到 40 這條固定弧線而言，較短路徑會穿越循環前進 70 度，而不是在色相環上反向跨越一大段。你可以從 W3C CSS Color Module Level 4 色相內插章節 以及 MDN 上 hue-interpolation-method 的參考文件 中確認這條確切規則。
初學者立刻就能使用的控制方式
本遊戲支援三種輸入方式，你可以在回合進行中隨時切換，不會受到任何懲罰。
- 拖放：按住任何一塊磚，將它拖曳到新位置，並在另一塊磚之前放開以將其嵌入。
- 鍵盤選取：使用 Tab 將焦點移至一塊磚，然後按下空白鍵或 Enter 鍵加以選取。再用向左或向右鍵將選取的磚每次滑動一格。
- 鍵盤檢查：按下 C 鍵即可執行與畫面上按鈕相同的「檢查漸層」動作，讓你的雙手無需離開鍵盤。
共用的雙擊 Escape 老闆鍵也已設定好，當你在會議中或共用空間裡練習時，這項功能非常實用。每個動作要嘛會改變磚塊順序、要嘛會增加移動計數，要嘛會計入兩次錯誤的上限；除此之外並不會觸發其他改變，因此初學者可以放心嘗試，不會意外喪失進度。
如何逐步遊玩色彩漸層謎題
- 觀察這八塊洗亂的磚塊，找出最短且連續的色相過渡，包括穿越紅色的循環點。
- 找出最接近弧線起點、約 330 度的磚塊，並判斷它應該位於完成列的最左端還是最右端。
- 將磚塊拖曳到定位，或先將焦點移至其中一塊再按下空白鍵或 Enter 鍵，然後用向左或向右方向鍵移動，直到順序看起來正確為止。
- 留意循環點：將任何偏紅的 350 度磚直接放在唯一的 0 度磚之前，然後在其後緊接著放上一塊明顯的 10 度磚。
- 確認整列從冷色系的藍粉經過紅色再回到橙色的順序讀起來流暢無可見的斷層；按下「檢查漸層」或 C 鍵。
- 若檢查正確，你將以 1,000 分完成本回合。若不正確，在你按下「重新開始」之前，你只剩下一次犯錯機會，否則回合將會鎖定。
初學者在色相弧線上常見的錯誤
最常見的初學者錯誤是依照亮度而非色相來排序。即使兩塊磚的色相值相近，它們仍可能呈現不同的視覺權重，因為 HSL 是 sRGB 的一種方便的圓柱型表示法，而非知覺上均勻的色彩空間。相等的數值色相步進在視覺上可能顯得不平均。請相信數值順序，而非感受上的對比。
第二個常見的初學者錯誤是將 0 度放在整列的開頭。由於色相會在圓上循環，0 度應排在 350 之後，而非之前。第三個錯誤是在還沒確認循環點之前就急著按下「檢查漸層」。一個實用的健全性檢查做法是從左到右在心中掃過一遍，確認最後那塊偏紅的磚和下一塊之間沒有出現可見的斷層。如果眼睛捕捉到一道小空隙，就把可疑的兩塊對調再試一次。
快速參考：磚塊數值與遊戲規則
| 設定 | 數值 |
|---|---|
| 磚塊數量 | 8 |
| 起始色相 | 330 度 |
| 結束色相 | 40 度 |
| 磚與磚之間的色相步進 | 10 度 |
| 飽和度 | 72 個百分比 (固定) |
| 亮度 | 52 個百分比 (固定) |
| 預期順序 | 330, 340, 350, 0, 10, 20, 30, 40 |
| 正確檢查得分 | 1,000 分 |
| 允許的錯誤檢查次數 | 2 (第二次錯誤後回合結束) |
| 最高分儲存位置 | 儲存在目前瀏覽器中 |
完成之後：最高分、重新開始與老闆鍵
當排序正確時，遊戲會進入完成狀態並鎖定，同時頒發 1,000 分。一旦謎題已完成或陷入僵局，之後的拖曳、鍵盤與檢查輸入都會被忽略，直到你按下「重新開始」。這種終端狀態的凍結機制可防止刷分，並確保同一個固定挑戰在每個瀏覽器中都是可重現的。
當本機儲存可用時，最高分會保留在目前的瀏覽器中，讓初學者可以在多次練習之間追蹤進步，而無須註冊帳號。雙擊 Escape 老闆鍵會將整個版面收合為一個中性畫面，這是個雖然小但很實用的細節，對於在會議中練習的使用者特別有幫助。所有的磚塊、分數與移動次數都不會被上傳：一切都在目前的分頁中執行、使用共用的遊戲外殼，並保留在你的裝置上。
如果你正在權衡選項，色彩調配遊戲規則：得分與失誤機制詳解 一文中有詳細說明。
如果你正在權衡選項，色彩數獨規則：五個版面、每個各有一解 一文中有詳細說明。