色彩漸層拼圖要你依照最短的連續色相過渡（包含360度的環繞），把八個被打亂的HSL色塊，還原成正確的順序。Color Gradient Puzzle這個工具，把這項任務簡化成單一規則：排列這些色塊，讓它們的色相從330°平順地過渡到40°，中途環繞經過紅色（0°）。與傳統排序不同，這個拼圖要求你認知到色相是環狀的——350°之後接著的是0°，而不是360°。這個遊戲使用CSS的「較短色相」內插方法，會在產生等分步進之前，先在兩個角度之間選出較短的弧。這代表整個序列，是透過環繞前進70°，而不是往回走290°。八個預期的色相值是330°、340°、350°、0°、10°、20°、30°與40°，不過這個工具不會以視覺方式顯示這些數值。你必須依靠色彩之間平順的過渡，來引導你的排列。這個拼圖對鍵盤操作很友善，讓你可以用空白鍵或Enter鍵選取色塊，再用左右方向鍵移動它們，或直接拖曳到定位。正確的排列可以讓你獲得1,000分，而兩次錯誤的檢查，則會結束這一局，直到你重新開始。
這個拼圖不只是一個遊戲——它是一項實際練習，讓你理解色相如何在色輪上環繞。許多人以為色相是線性遞增的，但實際上，它們形成一個圓圈，0°（紅色）緊接在350°（深紅紫色）之後。正是這種環狀關係，讓這個拼圖一開始感覺很棘手。Color Gradient Puzzle透過固定飽和度與明度，把這個概念獨立出來，讓你只需要專注在色相順序上。這個工具的設計，反映了這樣的用意：色塊使用瀏覽器的hsl()語法，飽和度為72%、明度為52%，選擇這兩個數值是為了清晰易辨，而不是為了感知上的均勻性。這代表數值上相等的色相間距，在視覺上未必看起來一樣寬，但這個拼圖的重點不在於色彩感知——而在於掌握色相內插的環狀邏輯，這是CSS與數位設計中的一個關鍵概念。試試看Color Gradient Puzzle，在你的瀏覽器中親自體驗。
為什麼最短色相弧很重要
「最短色相弧」是讓Color Gradient Puzzle與眾不同的核心規則。在CSS中，色相是以360度圓圈上的角度來表示的，而在兩個色相之間進行內插時，瀏覽器可以在兩條可能的路徑之間選擇：較短的弧，或較長的弧。舉例來說，330°與40°之間的距離，可以量測為70°（330° → 0° → 40°），也可以量測為290°（330° → 320° → ... → 40°）。CSS Color Module Level 4規範中指定，預設的方法是較短的弧，這也是為什麼這個拼圖預期序列會透過環繞前進，而不是往回走。這項規則能確保漸層中的過渡更加平順，避免色彩出現突兀的跳動。如果你單純依數值大小排序色相，你會把0°排在330°之前，破壞原本設計的視覺流動。這個拼圖強迫你把色相想成一個連續的迴圈，而這項技能，能直接應用在網頁設計或數位藝術中，用來製作無縫的漸層。如需更多關於CSS如何處理色相內插的細節，可以參考W3C CSS Color Module Level 4，或MDN關於hue-interpolation-method的文件。
| 色相角度（°） | 色彩外觀 | 序列中的下一個色相 |
|---|---|---|
| 330 | 粉紫色 | 340 |
| 340 | 淺紫色 | 350 |
| 350 | 深紅紫色 | 0（環繞） |
| 0 | 紅色 | 10 |
| 10 | 紅橙色 | 20 |
| 20 | 橙色 | 30 |
| 30 | 黃橙色 | 40 |
| 40 | 黃色 | —（序列結束） |
如何還原這八個被打亂的色塊
一旦你理解色相的環繞方式，在Color Gradient Puzzle中還原這八個被打亂的色塊，其實很直接。依照以下步驟，有效率地完成這個拼圖：
- 檢查色塊：查看這八個被打亂的色塊，找出它們之間最平順的過渡方式。記住，這個序列從330°（粉紫色）開始，到40°（黃色）結束，中途環繞經過紅色（0°）。最短路徑會透過環繞前進，因此350°之後接著的應該是0°，而不是360°。
- 選擇你的操作方式：你可以用滑鼠或觸控螢幕，把色塊拖曳到定位，也可以使用鍵盤。若要使用鍵盤，請按空白鍵或Enter鍵選取一個色塊，再用左右方向鍵，把它移動到想要的位置。
- 排列色塊：先把看起來最接近330°（粉紫色）的色塊放在最左邊。接著，找出在序列中看起來會接在它後面的色塊（340°，較淺的紫色），把它放在右邊。繼續這個流程，確保過渡看起來平順。請特別留意環繞的部分：350°（深紅紫色）之後的色塊，應該是0°（紅色），而不是更深的色相。
- 檢查你的排列：一旦色塊看起來連貫了，就點選「檢查漸層」按鈕，或在鍵盤上按「C」鍵。如果排列正確，你會獲得1,000分，並完成這個拼圖。如果不正確，你會收到漸層錯誤的通知，並且在遊戲結束之前，還有一次嘗試機會。
- 如有需要，重新開始：如果你進行了兩次錯誤的檢查，遊戲就會結束。點選「重新開始」按鈕，用一組重新打亂的色塊再試一次。
加快遊戲速度的鍵盤操作
Color Gradient Puzzle設計成完全支援鍵盤操作，讓你不需要滑鼠或觸控螢幕也能輕鬆遊玩。以下說明如何用鍵盤完成這個拼圖：
- 選取一個色塊：用Tab鍵在色塊之間切換。當一個色塊取得焦點後，按空白鍵或Enter鍵選取它。被選取的色塊會被標示出來。
- 移動色塊：選取一個色塊後，用左右方向鍵，把它移動到想要的位置。色塊會依照方向鍵的方向，一次移動一個位置。
- 檢查漸層：排列好色塊後，按「C」鍵檢查漸層是否正確。這個動作等同於點選「檢查漸層」按鈕。
- 重新開始遊戲：如果你想重新開始，按「重新開始」按鈕，或重新整理頁面。這個拼圖會用同樣的八個色塊，重新打亂排列。
如果你使用的裝置在拖曳操作上不夠精準，例如筆電觸控板或手機觸控螢幕，鍵盤操作會特別有用。它們也讓依賴輔助技術的使用者，更容易遊玩這個遊戲。想了解更多不用拖曳操作的技巧，可以查看我們的指南如何用按鍵玩Color Gradient Puzzle。
常見錯誤及避免方法
即使你清楚理解色相的環繞方式，在Color Gradient Puzzle中還是很容易犯錯。以下是一些常見的陷阱，以及避免方法：
- 忽略環繞：最常見的錯誤，是把色相當成線性序列來處理。例如，在350°之後放上360°，而不是0°。記住，色相是環狀的，而序列會環繞經過紅色。如果你不確定，就找出看起來最接近紅色（0°）的色塊，把它放在最深的紅紫色（350°）之後。
- 假設視覺間距相等：這個拼圖使用HSL數值，而它在感知上並不均勻。這代表330°到340°之間的視覺距離，看起來未必和10°到20°之間一樣，即使數值差是相同的。請專注在過渡是否平順，而不是表面看起來的間距。
- 把序列想得過於複雜：這個拼圖有一個固定的序列：330°、340°、350°、0°、10°、20°、30°與40°。不需要用其他順序去猜測或重新排列色塊。如果卡住了，試著重設拼圖，從把第一個色塊（330°）放在最左邊重新開始。
- 急著檢查：當色塊看起來差不多正確時，會很想立刻點選「檢查漸層」，但這樣可能會浪費你僅有的兩次嘗試機會。在提交之前，花點時間再次確認環繞的部分（350° → 0°），並確保過渡看起來是連貫的。
- 忘記使用鍵盤操作：如果你在拖放操作上遇到困難，改用鍵盤操作看看。用空白鍵或Enter鍵選取色塊，再用方向鍵移動，可能會更精準，在較小的螢幕上尤其如此。
如果你是第一次玩這類拼圖，也可能會覺得我們的指南如何避免魔方陣拼圖中的常見錯誤很有幫助。雖然規則不同，但仔細觀察與有條理排列的原則，在兩者中都適用。
為什麼這個拼圖不只是一個遊戲
Color Gradient Puzzle，對任何在數位設計、網頁開發或數位藝術中處理色彩的人來說，都是一個實用的工具。透過聚焦在色相的環狀本質上，它教會你一個經常被忽略的基本概念：色相是環繞著360度的圓圈，而兩個色相之間的最短路徑，未必總是你預期的那一條。這項知識，可以直接應用在CSS中製作平順的漸層，因為hsl()函數在CSS中很常見。舉例來說，如果你正在設計一個從藍色過渡到紅色的漸層，理解最短色相弧，能確保過渡看起來自然，而不是突兀。
這個拼圖也凸顯了HSL色彩空間的限制。雖然HSL用圓柱形格式表示色彩很方便，但它在感知上並不均勻。這代表色相上數值相等的間距，未必總是對應到視覺上相等的差異。舉例來說，從30°（黃橙色）到40°（黃色）的跳動，可能會比從330°（粉紫色）到340°（淺紫色）的跳動看起來更細微，即使兩者的數值差都是10°。這正是為什麼這個拼圖要固定飽和度與明度——為了把色相關係獨立出來。如果你對進一步探索色彩空間有興趣，或許會喜歡我們的Color Sudoku工具，它以不同的拼圖形式，應用了類似的色彩邏輯。
最後，Color Gradient Puzzle是練習視覺排序與注重細節的絕佳方式。固定的序列與有限的嘗試次數，會鼓勵你仔細思考每一步，強化在其他邏輯拼圖與問題解決情境中同樣有用的技能。不論你是設計師、開發者，還是拼圖愛好者，這個工具都提供了一種快速又有趣的方式，幫助你加深對色彩與環狀邏輯的理解。