「色彩漸變拼圖」要求你將八片打亂順序的 HSL 色塊復原,使其色相沿著經過 360° 環繞的較短弧線,從 330° 平滑遞進到 40°,正確復原恰好可得 1,000 分。這是一款聚焦於色彩漸變的拼圖,將一條精確規則化為簡短的視覺排序練習。八片色塊屬於同一條 HSL 序列,從 330° 開始,到 40° 結束。當固定的挑戰開啟時,這些色塊會以預定的打亂順序出現,你的任務是將它們放回正確的序列。此拼圖採用 HSL,是因為色相在圓上以角度表示,所以核心技巧在於辨識環形順序,而不是估算亮度或猜測飽和度。預期的目標色相為 330°、340°、350°、0°、10°、20°、30° 與 40°。正確的一排從接近洋紅紅開始,經過較暖的粉紅,越過 0°(純紅),再延伸到橙色。最容易忽略的部分是從 350° 回到 0° 的環接:單純的數值排序會把 0° 放在最前面,然而在此拼圖所要求遵循的弧線上,0° 緊接在 350° 之後。
「色彩漸變拼圖」要求你復原的內容
「色彩漸變拼圖」在不同應用程式中可能代表不同含義,但 Color Gradient Puzzle 所提供的版本範圍非常明確。剛好只有一個固定序列,八片色塊在不同次造訪之間永遠不變,你唯一要重新排列的就是這些色塊的順序。你不會改變亮度,不會改變飽和度,也不會創造新色彩。你只是將八個預先定義的色相,放回 CSS 較短色相插值從 330° 跨越八個位置遞進到 40° 時所產生的順序。
這種「單一規則」的框架,正是此拼圖易於推理的原因。每片色塊呈現一個色相,唯一的問題就是「這個色相屬於這排中的哪個位置?」一旦你能辨識出環接點,剩下的就是一道帶有嚴格驗收條件的小型排序題。預期的色相與從頭到尾的方向彙整如下。
| 位置 | 預期色相 |
|---|---|
| 1 | 330° |
| 2 | 340° |
| 3 | 350° |
| 4 | 0° |
| 5 | 10° |
| 6 | 20° |
| 7 | 30° |
| 8 | 40° |
左側邊緣固定為 330°、右側邊緣固定為 40°,這屬於產品規格的一部分,代表同一序列可在程式碼、瀏覽器以及正式上線部署後進行檢查。
較短的色相弧線,以及 0° 為何位於 350° 與 10° 之間
CSS 定義了不止一種在色相角度之間進行插值的方式,而此拼圖採用的是較短的那一種。兩個端點都會正規化到 0° 到 360° 的範圍內,接著把它們的差值調整到 -180° 到 +180° 的範圍,並選擇較短的那一條弧線。從 330° 到 40°,這條較短路徑經過環接向前推進 70°;它並非橫越大部分色相環向後退。
簡單來說,在 350° 之後,下一個十度的推進會環接到 0°,再繼續到 10°。這就是為什麼 0° 屬於 350° 與 10° 之間,即使 0° 在數值上小於其他每一片色相。較短弧線的概念及其對色相插值的影響,記載於 W3C CSS Color Module Level 4 規格,以及 MDN hue-interpolation-method 參考資料中。
這也是為何此拼圖會將每片色塊的數值色相暴露給輔助科技。螢幕閱讀器在你處理這排色塊時,可以朗讀「350 度」、「0 度」或「10 度」,使答案明確化,卻不會直接把視覺拼圖洩漏給看得見的玩家。數值的朗讀把環接點從隱藏的技巧變成明文的規則,這對一個簡短的練習而言是恰當的取捨。
如何遊玩「色彩漸變拼圖」
- 檢視八片打亂的色塊,尋找最短的連續色相過渡,特別留意從 350° 經過 0° 的環接點應該落在何處。
- 將色塊拖曳到定位,或按下 Space 或 Enter 來選取。使用 Left 或 Right 方向鍵將選取的色塊一次移動一個位置。
- 持續重新排列,直到這排從左到右看起來連續,包括從 350° 經過紅色跳到 10° 的那段。
- 選擇「Check gradient」或按下 C 來驗證這排。正確的一排會以恰好 1,000 分結束此回合。
- 如果驗證錯誤,請調整排列再試一次。兩次錯誤的驗證會使此回合結束,直到使用「Restart」才能重來。
拖曳、點擊與鍵盤控制比較
兩種輸入方式皆為第一級的操作,並會導向相同的盤面狀態,因此你可以在回合進行中隨時切換。
| 動作 | 滑鼠或觸控 | 鍵盤 |
|---|---|---|
| 將色塊移動一個位置 | 將色塊拖曳到另一片色塊之前 | 以 Space 或 Enter 選取,再按下 Left 或 Right |
| 驗證這排 | 點擊「Check gradient」 | 按下 C |
| 重新開始此回合 | 點擊「Restart」 | 使用「Restart」控制項 |
| 快速隱藏遊戲 | — | 連按兩次 Escape |
滑鼠與觸控透過原生拖曳事件運作。鍵盤玩法使用 Space 或 Enter 來選取色塊,並以 Left 或 Right 方向鍵將其一次移動一個位置。移動只改變順序,絕不更改色相、飽和度或亮度,而且此挑戰不會在回合中途重新洗牌。一旦回合結束或陷入僵局,拖曳、鍵盤與 Check 輸入都會被忽略,直到使用「Restart」。這種「終止狀態」的凍結機制,正是此回合可重現的原因:唯一推進的方式是復原正確順序,唯一失敗的方式是做出兩次錯誤的驗證。
計分、失誤、重新開始與老闆鍵
正確的一排會恰好獎勵 1,000 分,並立即結束此回合。對於「接近正確」的排列沒有部分給分,沒有速度加分,也不會因為完成較慢而扣分,因為此拼圖刻意維持單一固定序列,使每次失敗都有清楚的原因,每次成功都能精確重現。最佳分數會在瀏覽器支援儲存功能時,儲存在本機目前的瀏覽器中;此回合、調色盤或分數的一切資訊都不會上傳,也沒有帳號、排行榜或遠端色彩 API。此元件不含動畫迴圈、遠端色彩服務或執行階段資料集下載,因此即使在低速連線下,此回合仍可重玩。
兩次錯誤的「Check gradient」會累積兩次失誤並使此回合陷入僵局。「Restart」是脫離僵局的唯一方法,而在「Restart」之後,預定的起始排列會再次載入。即使是「Restart」之後的單次正確驗證,仍會產生標準的 1,000 分,所以分數上限不會因失誤而改變。連按兩次 Escape 會觸發共用的老闆鍵,以與隱藏外殼中其他所有遊戲相同的方式隱藏此拼圖。當你在公開場合排序色相色塊、需要快速清空螢幕時,這個捷徑非常實用。
HSL 的飽和度與亮度:保持不變的部分
可見的色票使用瀏覽器的 hsl() 色彩語法,飽和度 72%、亮度 52%。這些顯示值在整個遊戲中是固定的,選擇它們是為了讓這排呈現為鮮豔的漸變,而不會讓亮度或飽和度遮蓋色相訊號。由於飽和度與亮度永遠不變,你無法意外使用「看起來較深就排後面」的啟發法:唯一會變動的就是色相位置。
這同時也是一個關於 HSL 是什麼、不是什麼的公正提醒。HSL 是 sRGB 一種方便的圓柱表示法,而不是現代的感知色彩空間。數值上相等的色相步進,視覺上看起來可能並不相等,因為 HSL 並未建模感知色彩距離。此遊戲教授的是數值色相順序與 CSS 插值,而非校正過的配對或無障礙對比。如果你需要精確的對比、感知色彩科學或印刷安全的轉換,請將此拼圖視為練習,並使用專門的色彩工具進行真正的量測。此拼圖對這項限制坦誠以對,而頁面將每片色塊的數值色相暴露給輔助科技,讓環接規則對非視覺玩家並無隱藏。
何時該改用色彩工具而非此拼圖
「色彩漸變拼圖」的範圍刻意很窄。它不會產生漸變、不會複製 CSS、不會比較對比率,也不會在色彩空間之間轉換。如果你需要真正的正式環境漸變、真正的對比檢查,或 HSL、RGB、HEX、LCH 之間的真正轉換,請改用專門的色彩工具。此拼圖最適合用作色相環接、CSS 色彩工作或視覺排序的簡短練習,特別是從 350° 經過 0° 到 10° 那段容易忽略的跳接。在狹窄的螢幕上,色塊會環繞成四欄;在較寬的螢幕上,它們會形成一排八片色塊而不會水平溢出,所以在任何裝置上,目標都是同一序列。
如果你正在權衡選擇,How to Solve Color Sudoku Using Colors, Numbers, and Symbols 對此有詳細說明。
如果你正在權衡選擇,Can a Double Click on Check End Color by Number? 對此有詳細說明。