調色遊戲是一個專為初學者設計的五輪瀏覽器挑戰，透過數值匹配來教導兩種色彩模型，並使用真實的 sRGB-to-CIELAB Delta E 1976 公式，在 Delta E ≤ 3.0 的接受門檻下為每一輪計分。每一輪都會以十六進位 sRGB 值、一組 CIELAB 座標，以及當下的模型名稱來呈現目標色彩，因此同一個螢幕上的色塊可以用三種獨立方式讀取。初學者會先透過將紅、綠或藍的顯示光源通道從 0 調高到 255 來學習加法 RGB，接著切換到理想化的減法 CMY 模式，其中青色去除紅、洋紅去除綠、黃色去除藍，使用 0% 到 100% 的比例。計分完全忽略 RGB 通道距離。每個滑桿設定都會先經過標準 sRGB 傳遞函數、已公布的 D65 linear-sRGB 對 XYZ 矩陣，以及標準 XYZ 對 CIELAB 轉換，再測量歐幾里得距離。當 Delta E ≤ 3.0 時即匹配成功，恰好獲得 200 分，因此完美的五個目標回合總共恰好產生 1,000 分。

調色遊戲完全以用戶端 L1 體驗方式執行，無需帳號，也無需上傳任何資料進行處理。滑桿數值、嘗試記錄、色彩轉換與分數都只保留在使用者正在使用的同一台裝置上。

color mixing game for beginners
初學者調色遊戲：從 RGB 與 CMY 開始

五輪初學者挑戰中的兩種色彩模型

這個遊戲的核心教學手法是把兩種相反的色彩概念放進同一個關卡中。加法 RGB 回合將三個控制項視為編碼後的 sRGB 顯示光源通道。調高紅色會增加更多紅光，調高綠色會增加更多綠光，調高藍色會增加更多藍光；螢幕僅顯示三者合併後的發光結果。0 到 255 的範圍對應到每個網頁色彩都已使用的編碼 sRGB 位元組範圍。

減法 CMY 回合則被框架為一種課堂上的抽象概念。青色去除紅、洋紅去除綠、黃色去除藍。控制值維持在 0% 到 100% 的比例，因此當滑桿設在 100% 時會完全抑制對應的互補顯示通道，設在 0% 時則完全不影響該通道。介面會將此模式標示為一種理想化模型，避免初學者誤把它當作油漆模擬器。

這個標示之所以重要，是因為合約明確說明 CMY 計算並非對真實油漆、印刷油墨、紙張、光照、黏結劑或顏料化學的反應預測。實體混合物的光譜特性在此並未被呈現，因此表現方式截然不同。及早內化這項區別的初學者，可以避免一項常見的初學者錯誤：以為螢幕上的滑桿和真實的油漆會產生完全相同的色相。

固定的五個目標順序依序為訊號橙、理想綠、電子青、理想紫，以及螢幕洋紅。這個順序刻意混合 RGB 與 CMY 任務，而非把所有 RGB 回合排在前面，讓初學者能在同一段短時間內接觸兩種模型，而不是先讀一種再讀另一種。

解讀每一輪所顯示的內容

每一輪顯示的內容超過兩個色塊。目標色與當前混合色都會以多項不同的資訊標示，當兩個色樣看起來相同、顯示器未經校色，或兩位玩家對色彩的感知不同時，仍能保持回合的可讀性。可見的元素包括：

  • 目標十六進位 sRGB 值，寫成像 #RRGGBB 的格式。
  • 以三個數值通道表示的目標 CIELAB 座標：L、a 與 b。
  • 當下模型名稱，顯示該回合為 RGB 或 CMY。
  • 當前混合色的十六進位值與即時的 RGB 通道數值。
  • 三個大型範圍輸入框，依當下模式標示正確的滑桿範圍。

由於十六進位、RGB 通道數值與 Lab 座標都會即時更新，因此可以透過三項獨立的數值檢查來確認當前混合色是否符合目標。如果色樣看起來略有偏差，Lab 數值會說明原因；如果 Lab 數值看似接近但十六進位不一致，則以滑桿讀數為唯一依據。這種冗餘設計讓使用廉價螢幕、在明亮房間中，或對色彩辨識能力較弱的玩家都能順利遊玩。

用三個動作玩調色遊戲

這個遊戲將每一回合濃縮為三個可重複的動作。遵循同樣的順序能讓注意力集中在讀色，而非摸索介面。

  1. 讀取當下的模型名稱、目標十六進位值與目標 Lab 數值於該回合頂端，接著與直接顯示在目標旁的當前混合色進行比較。請注意該回合是 RGB (0–255) 或 CMY (0%–100%)，並判斷哪個滑桿方向最有可能將當前混合色推向目標。
  2. 調整三個滑桿直到當前混合色的十六進位值、即時 RGB 讀數與 Lab 數值都收斂至目標。觸控使用者同樣可使用這三個控制項，互動高度至少有 44 像素；滑鼠使用者可以點擊並拖曳；鍵盤使用者可以使用 Tab 鍵聚焦滑桿，再用方向鍵進行一單位調整。
  3. 按下「檢查混合」來評估該回合。當 Delta E 1976 為 3.0 或更低時即視為匹配並獲得 200 分，接著進入下一個目標。失敗時則會記錄該滑桿組合，並在回合鎖定前再給一次機會。

對初學者而言，第三步是色彩科學變得可見的環節。「檢查」按鈕並非將一組 RGB 三元組減去另一組，而是執行完整的轉換鏈，並回傳任何色彩測量學參考資料都能識別的 Delta E 距離。

以 Delta E 1976 與兩次失誤規則計分

Delta E 1976 是兩個 CIELAB 三元組之間的歐幾里得距離，寫作：

ΔE*ab = √((L1 − L2)2 + (a1 − a2)2 + (b1 − b2)2)

對初學者來說，一個有用的健全性檢查是該公式能產生的最大值。純黑 (L=0, a=0, b=0) 與純白 (L=100, a=0, b=0) 之間的 Delta E 恰好為 100，因為只有 L 通道不同，且 √((100 − 0)2 + 0 + 0) = 100。因此 3.0 的接受門檻大約是該最大範圍的百分之三，穩穩落在色彩科學家用來標記「感知上接近的實體匹配」的範圍之內。

產生 Delta E 數值的完整管線記載於實作合約中。每一個編碼後的 sRGB 通道都會先進行標準化，接著以標準分段式 sRGB 傳遞函數解碼為線性光源，乘上針對 D65 光源 (x=0.3127, y=0.3290) 所公布的 linear-sRGB 對 XYZ 矩陣，依 D65 白點進行標準化，再以標準 epsilon (216/24389) 與 kappa (24389/27) 分支轉換為 CIELAB 座標。只有在這之後才會計算 Delta E。RGB 通道距離永遠不會被標示或當作 Delta E 使用。

失誤的結構同樣嚴格。第一次出現的不同錯誤混合會記錄其 Delta E 並保留一次機會。再次檢查同一個錯誤的滑桿組合會被去重，不會消耗第二次機會；只有當第二次出現不同的錯誤組合時，該回合才會鎖定。一旦鎖定，三個滑桿與「檢查」按鈕都會停用，因此分數與嘗試歷史都不會再變動。重新開始是唯一的恢復方式，它會還原相同的確定性第一個目標、歸零的滑桿、零分，以及空白的組合紀錄。

無效輸入為不可分割的整體操作。空陣列、缺少通道、非整數的滑桿值、NaN、超出當下模式範圍的值、死鎖狀態，以及已完成的回合，都會被視為無操作而非錯誤，因此初學者可以自由實驗而不會污染該輪紀錄。

為什麼數值提示比目測更適合初學者

目測色彩在未校色的螢幕上、充滿強烈環境光的房間中，以及對色彩感知有差異的玩家身上並不可靠。數值回饋能同時解決這三個問題。當兩個色塊在某位玩家眼中看起來相同，但 Lab 座標仍有差異時，數值會揭露出這個差距。當螢幕以錯誤的伽馬值顯示色彩時，十六進位值仍維持正確，因為它是編碼後的文字而非像素量測結果。

這個遊戲的色彩科學是引用而來，並非憑空發明。轉換鏈取自 W3C CSS Color Module Level 4 轉換程式碼，而 sRGB 編碼定義、2.4 傳遞指數與 D65 色度座標，則另外交叉比對 國際色彩聯盟 sRGB 三元件色彩編碼註冊表。在準備此工具時，兩個參考頁面皆已成功擷取。一個獨立的測試 oracle 從頭重新實作了相同的解碼、相同的有理數 XYZ D65 矩陣、相同的 Lab 轉換，以及相同的 Delta E 公式，而不呼叫產品本身的函式，並驗證了五個測試案例中的每個目標解答、預期的十六進位值、預期的 Lab 座標，以及接近零的解答 Delta E。

這代表一位仔細讀取數值的初學者，正在從事與印刷廠或顯示器校色實驗室相同類型的色彩匹配，只是規模較小，而且容錯門檻寬鬆地設在 3.0。

RGB 與 CMY 並列比較

屬性 RGB 模式 CMY 模式
滑桿範圍 每通道 0 到 255 每通道 0% 到 100%
色彩模型 加法式顯示光源 理想化的減法式通道去除
調高滑桿的效果 增加更多編碼後的 sRGB 分量 去除對應的互補顯示通道
實體擬真度 對應螢幕發光方式 明確不是油漆、油墨或顏料模擬
計分方式 同樣的 Delta E 1976 ≤ 3.0 接受門檻 同樣的 Delta E 1976 ≤ 3.0 接受門檻
每回合正確得分 200 200

研究這個對比的初學者，往往會內化一個有用的習慣：調高滑桿未必總是「增加更多該色彩」。在 RGB 模式下通常是如此；在 CMY 模式下則更接近「減少對立通道」，這是一種相反的心智動作，也是遊戲會在同一段體驗中交替切換模式的主要原因。

成功一輪的樣貌

一次乾淨的遊戲會從確定性的第一個目標開始，依序走完所有五個固定目標，且不觸發「失誤兩次即鎖定」的限制，並以剛好 1,000 分作收，因為五場配對各可獲得 200 分。遊戲外殼也會把最佳分數儲存在裝置上，因此初學者可以在不同場次之間追蹤進步幅度，完全不需要上傳任何資料。滑桿數值、嘗試次數、顏色轉換與分數全都保留在瀏覽器中。

若讀者希望針對「先讀再調整」的迴圈另外進行練習，調酒遊戲提供了一種不同的配對挑戰，會顯示百分比點數的偏差，並同樣以 1,000 分作為結束。

當你對這兩種模式都熟悉之後，五目標的格式很短，可以連續重複好幾次。每次走過同一組測試項目，都會再次強化同一條 Delta E 流程，於是初學者會開始能預測哪個滑桿的調整會改變 Lab L，而不是 Lab a 或 Lab b。這個習慣才是這個遊戲真正要帶給你的獎勵：不是高分，而是對 sRGB 與 CIELAB 彼此如何對話的實用直覺。

相關閱讀：初學者連數字遊戲攻略：你的第一次 1,000 分。

相關閱讀：初學者數方塊拼圖攻略：你的第一次 1,000 分。