NIJI FIELD GUIDE / 08
照片取色工具操作手冊：從像素到色票匯出
逐一說明選圖、座標、鍵盤取樣、代表色、HEX 編輯、文字對比與 SVG 下載；附一個不需要照片就能重現的完整流程。
先認識四個操作區
開啟照片取色工具，四個操作區依序是「1. 從照片找到顏色」、「2. 整理與套用色碼」、「3. 比較文字與背景」與「4. 保留這組色票」，下方接著是完整使用說明。它直接在 mia-and-max.com 執行，與 Niji 遊戲的七色槽和相冊分開：取出色碼不會自動填入遊戲，也沒有每日一張的限制。
- 在照片區選圖，點出你在意的像素；也可以先抽取代表色。
- 把色碼加入色票，或在 HEX 欄位直接編輯並套用。
- 挑文字與背景色，讀取對比結果，再複製色碼或下載 SVG。
照片與色碼只放在這個分頁的記憶體，沒有登入、上傳或自動儲存。不要把分頁暫時保留的內容當成備份；重新載入工具時會回到初始示例，完成後請自行複製或下載。
回本章目錄 ↑選照片、載入練習圖與清除
| 控制項 | 怎麼操作、會發生什麼 |
|---|---|
| 選擇照片 | 點檔案欄位，選 JPEG、PNG 或 WebP。每張上限 12 MB，原圖像素總數上限 6,000 萬（寬 × 高）。不接受 HEIC、GIF 或任意 SVG；手機若只有 HEIC，先轉成支援格式。 |
| 載入練習圖 | 載入本站原創的紅杯、綠葉與書本插畫。它是內建可信的 SVG，不表示使用者上傳欄位接受 SVG。適合沒有照片時練習或核對結果；成功載入新照片或練習圖會取代前一張預覽、清除前一組代表色並將座標重設為 50、50，下方已套用色票仍保留。 |
| 照片預覽 | 最長邊最多縮到 1,200 像素後取樣，不是讀取原始相機 RAW。透明區會先合成在白底上；邊緣、縮圖與透明度都可能改變讀出的 HEX。 |
| 清除照片 | 移除目前圖片、取樣結果與代表色，停用需要照片的控制項。已套用到下方色票的色碼仍保留；清除照片不等於清空色票。 |
| 格式或讀取錯誤 | 頁面顯示原因。載入失敗不會把原來成功載入的照片與色票抹掉；選擇較小且可正常開啟的支援圖片重試。 |
點選像素與精確座標
圖片成功載入後，工具會先讀取 X = 50、Y = 50 的中心位置。接著可直接點預覽中的杯身、葉片或其他區域。游標標記、座標、色塊與 HEX 會一起更新；此時還沒加入色票。
| 控制項 | 怎麼操作、會發生什麼 |
|---|---|
| 圖片點選 | 每次讀取預覽圖的一個像素，不是整個物件的平均色。想避開邊緣混色，可選較大片區域的中央。 |
| 取樣 X（%）／取樣 Y（%） | 輸入 0–100 的百分比座標，再點「讀取這個位置」。X 從左向右增加，Y 從上向下增加；50、50 是中央附近。無效值會顯示錯誤並保留上次結果。 |
| 鍵盤操作 | 用 Tab 讓圖片取得焦點，再按方向鍵移動 1 個百分點；按住 Shift 加方向鍵移動 10 個百分點。到達 0 或 100 時不再往外移。 |
| 加入目前色碼 | 將目前 HEX 加到已套用的色票末端，上限 12 色。可重複加入同一色；已有 12 色時需先在下方刪去不需要的 HEX 並套用。這個動作會以新色票更新 HEX 輸入欄；若欄位有尚未套用的手改內容，應先套用或另存再加入。 |
例如練習圖的 X = 35、Y = 50 會落在紅杯主色區，應讀到 #BB4D4D。想確認光線與取樣位置的關係，可接著讀同一杯子為什麼有三種紅。
代表色如何產生與套用
按「找出代表色」後，工具均勻抽樣最多 16,000 個預覽像素，將 RGB 各通道以 32 為一級分組並計算平均色，再按出現數量排序，略過與已選色 RGB 距離小於 40 的近似候選，最多保留七色。這是面積與像素分布的摘要，沒有辨識照片主角。
- 先看候選色，判斷是否涵蓋你真正需要的物件。
- 有至少兩個候選時，可按「以代表色取代色票」。它會取代整組已套用色票及 HEX 欄位，不是附加。
- 若重要的小物件沒出現，回到圖片手動點選，再按「加入目前色碼」補回。
純色或變化很小的圖片可能只有一色，這時不能直接用代表色取代需要至少兩色的色票。回到圖片點選想保留的色碼，再加入目前色票，或在 HEX 欄直接補上另一個對照色。代表色不是原始照片的完整色彩分析，也不是 Niji 的七色分類。
回本章目錄 ↑HEX 編輯、套用與範例
| 控制項 | 怎麼操作、會發生什麼 |
|---|---|
| HEX 色碼 | 輸入 2–12 個色碼，以空白、逗號或換行分隔。接受 3 位或 6 位 HEX，# 可省略，例如 #abc 會展開成 #AABBCC；不接受帶 alpha 的 4 位或 8 位寫法。 |
| 套用色票 | 驗證後更新色塊、文字色／背景色選單及對比預覽。只有在按下這個按鈕後，手改內容才成為目前色票；原文字色仍在新色票時保留，否則改選第一色；背景色也獨立保留，找不到時改選最後一色。格式錯誤時會指出問題，原先有效色票仍保留。 |
| 載入七色示例 | 還原工具內建的七色色票，包含深藍灰 #283044 與米白 #F4EDDD，並重新選定文字與背景。它不會清除已載入的照片。 |
| 色塊清單 | 用來檢查已套用的 HEX 和順序。色塊本身不是文字色或背景色的選取按鈕；請使用下方有標籤的選單。 |
文字色、背景色與對比結果
在「文字色」與「背景色」選單選擇目前色票中的任一色，預覽即時更新。按「交換文字與背景」可檢查反相後的實際視覺；數學對比率相同，但大面積背景的感受會不同。
工具依 sRGB 相對亮度計算，顯示比值並分開判斷一般文字 4.5:1、較大文字 3:1 門檻。顯示值捨去至小數第 2 位，判定使用未捨去的實際結果；例如 4.499:1 會顯示為 4.49:1，仍未達一般文字門檻。
選同一色當文字與背景會是 1:1；這不是錯誤，而是提醒兩者沒有亮度差。內建深藍灰 #283044 配米白 #F4EDDD 約為 11.27:1，可用來核對操作。通過單一配色比值不等於整個網站通過無障礙驗證，還要檢查字級、字重、狀態提示與實際背景。
門檻依據及完整六色比較見文字對比實作指南。不要只用紅、綠兩種顏色表示錯誤和成功，另加文字或圖示較易理解。
回本章目錄 ↑複製色碼、下載 SVG 與失敗處理
| 控制項 | 怎麼操作、會發生什麼 |
|---|---|
| 複製 HEX 色碼 | 複製目前已套用色票，不是輸入欄尚未套用的草稿。成功後可貼到筆記或設計工具；瀏覽器拒絕剪貼簿時，頁面會提供可選取文字，依提示手動複製。 |
| 手動複製目前色碼 | 自動複製失敗時才出現的唯讀欄位，會預先選取已套用的 HEX。使用裝置的複製操作（例如 Ctrl+C 或長按複製），再到目的地貼上；欄位本身不能改色。 |
| 下載色票 SVG | 產生名為 mia-and-max-palette.svg 的向量色票，包含色塊和 HEX 標籤，不會放入原照片。可用瀏覽器或支援 SVG 的設計工具開啟。 |
| 顯示已準備下載卻找不到檔案 | 檢查瀏覽器下載紀錄、下載權限或手機分享／檔案介面。網頁可建立下載，但無法得知作業系統最終把檔案存到哪裡；不要僅憑提示便關閉分頁。 |
| 儲存限制 | SVG 保存色票，沒有保存照片、取樣座標、文字／背景的用途筆記或 Niji 作品。需要這些資訊時另外記錄。 |
完整練習：從杯身取色到匯出
- 開啟工具，按「載入練習圖」。
- 輸入 X = 35、Y = 50，按「讀取這個位置」，核對
#BB4D4D。 - 在 HEX 欄輸入
#BB4D4D #F4EDDD #283044，按「套用色票」。 - 先選紅色文字、米白背景，讀對比結果；再換深藍灰文字，比較哪組適合正文。
- 按「複製 HEX 色碼」並貼到自己的筆記，寫下「米白底、深色正文、紅色點綴」。
- 按「下載色票 SVG」，實際開啟檔案確認三個色塊與 HEX，再離開分頁。
想完成更長的固定座標練習，接著看六色取樣教學。如果頁面控制項一直停用，先確認 JavaScript 可執行；重新載入前先複製仍可讀取的色碼，避免失去尚未保留的編輯內容。沒有 JavaScript 時仍能閱讀文字和靜態範例，但不能取色或匯出。
回本章目錄 ↑操作依據與更正
本章依公開程式核對控制項、數值與保存行為；來源固定在核對版本。圖鑑使用實際紙框渲染程式，照片位置採原創插畫示意；其他遊戲畫面為介面示例。內容含 AI 工具協作，維護方式見編輯說明。若新版畫面不同，請附頁面網址與重現步驟到聯絡頁回報。