純色影像產生器是一個小巧的瀏覽器工具，它會以一個六位數十六進位色彩填滿指定大小的畫布，並將結果匯出為符合你所指定像素尺寸的 PNG、JPEG 或 WebP 檔案。輸出點陣圖中的每一個像素都帶有這單一色彩，沒有漸層、紋理、邊框、透明效果或隱藏的疊加層。由於影像是在本機透過 canvas 元素繪製而成，而非擷取自螢幕或從遠端服務取得，因此檔案永遠符合你所輸入的寬度和高度，不會經過重複取樣，也不會出現意外裁切的情形。產生器還可讓你選擇儲存格式，以及 JPEG 和 WebP 的失真品質等級，因此你可以依照用途權衡檔案大小，這是螢幕截圖或裁切色塊所無法可靠做到的。
純色影像產生器實際上做了什麼
純色影像產生器是你能打造的其中一款最簡單的影像工具，而這份簡單正是它的重點。整個工作就是把三個數值──寬度、高度和一個顏色──轉成點陣圖檔案。在這個過程中，沒有來源相片、沒有圖層堆疊、沒有字型，也沒有裁切計算。你把以像素為單位的寬度、以像素為單位的高度，以及一個六位數顏色值（例如 #2563eb）交給產生器，它就會產生一張 PNG、JPEG 或 WebP，其中每個像素都帶有那個顏色。
因為沒有來源影像，輸出結果完全可以預測。要求一張 1920 乘 1080 的桌布、一塊 512 乘 512 的色塊、一張 1200 乘 630 的連結預覽圖，或一個 1 乘 1 的追蹤用元件，都會得到一個位元組完全符合這些數字的檔案。這種確定性正是產生器在管線、自動化測試、模擬內容和設計佔位符中作為測試資料有用的原因──在後續工作流程能執行之前，需要一個已知的單色輸入。純色影像產生器能處理這種情況，並為失真格式新增一個品質滑桿，下一節將說明其用法。
純色影像產生器底層的運作方式
純色影像產生器完全在你的瀏覽器分頁中執行，因此了解這在實務上代表什麼會有所幫助。
首先，工具會解析寬度和高度。根據 MDN 上 canvas 2D 內容的參考說明，fillStyle 屬性接受 CSS 顏色字串，而 fillRect 方法會在 canvas 上繪製一個填滿的矩形。純色產生器會將 fillStyle 設定為所選的十六進位值，然後對整個 canvas 呼叫 fillRect，這樣就能以單一筆觸畫出所要求大小的一個矩形。
接著，十六進位值會被標準化為統一的小寫六位數格式。當你輸入 #2563EB 時，結果列會顯示為 #2563eb，讓你一眼就能比對輸出與輸入。產生器不會調整顏色、不會套用對比曲線，也不會把它偏移到某個調色盤上。
最後，canvas 會進行編碼。工具會呼叫瀏覽器內建的編碼器來處理所要求的 MIME 類型，在選擇 JPEG 或 WebP 時傳入品質等級，接著在編碼成功時回傳編碼後的位元組，或在瀏覽器無法產生該格式時以明確的錯誤拒絕。先前執行所產生的過期物件 URL 會在新下載連結產生之前撤銷，因此重新整理後絕不會在記憶體中留下孤立的 blob。
如何建立純色影像
- 在瀏覽器中開啟純色影像產生器。無需安裝、帳號或上傳檔案。
- 以整數像素輸入確切的輸出寬度和高度。常見的選擇有 1920 乘 1080、1200 乘 630、512 乘 512，以及 1 乘 1。
- 輸入六位數顏色。例如 #2563eb、#ffffff 或 #111827 都可以。
- 選擇輸出格式，PNG、JPEG 或 WebP。如果你選擇 JPEG 或 WebP，請設定 1 到 100 之間的整數品質；PNG 會忽略品質欄位。
- 選擇「建立影像」。結果列會顯示確切的尺寸、瀏覽器回傳的 MIME 類型、標準化後的十六進位值，以及大致的位元組大小。
- 確認尺寸、顏色和格式後，下載檔案。一張 #2563eb 的 1920 乘 1080 PNG 會儲存為 solid-2563eb-1920x1080.png，JPEG 則使用常見的 .jpg 副檔名。
工具強制執行的限制與規則
產生器有兩個互相影響的限制：每個維度上限 10,000 像素，以及 canvas 總計上限 40 百萬像素。兩者的交互作用很重要，因為單一設定可能以兩種不同的方式失敗。
一張 10,000 乘 10,000 的正方形剛好是 100,000,000 像素，遠超過 canvas 上限，所以即使每邊都在範圍內，工具仍會拒絕該要求。一個 8000 乘 5000 的矩形是 40,000,000 像素，也就是 40 百萬像素，剛好達到上限，因此被接受。只要把任一邊再加一個像素，就會超出 canvas 預算。
在按下「建立」之前親手算一下是值得的：8000 × 5000 = 40,000,000 像素，等於剛好 40 百萬像素，因此通過。8001 × 5000 = 40,005,000 像素，約為 40.005 百萬像素，一旦超過預算就會被拒絕。一個 6000 乘 6000 的正方形是 36,000,000 像素，也就是 36 百萬像素，遠低於預算。
| 設定 | 範圍或規則 |
|---|---|
| 寬度 | 整數，1 到 10,000 像素 |
| 高度 | 整數，1 到 10,000 像素 |
| Canvas 合計 | 最多 40,000,000 像素（40 百萬像素） |
| 顏色 | 一個六位數、sRGB 風格的十六進位值 |
| 格式 | PNG、JPEG、WebP |
| 品質 | 整數 1 到 100，僅套用於 JPEG 和 WebP |
格式與品質選擇
這三種格式表現不同，選擇哪一種主要是在畫質、檔案大小以及檔案使用場景之間取捨。
| 格式 | 類型 | 使用品質欄位 | 最適用於 |
|---|---|---|---|
| PNG | 無失真 | 否 | 像素精準的色塊、測試資料、設計模型 |
| JPEG | 失真 | 是，1 到 100 | 較小的投影片背景、電子郵件主視覺區塊 |
| WebP | 失真 | 是，1 到 100 | 可受惠於較小體積的現代網頁 |
對於純色的單色影像，無失真的 PNG 通常是正確的選擇。這些像素不需要任何失真壓縮，而且 PNG 完全忽略品質欄位。只有當位元組大小比像素精準度更重要時，JPEG 和 WebP 才會變得有吸引力，例如必須快速載入的網頁主視覺面板。品質等級會改變編碼器壓縮檔案的強度，但它永遠不會改變你所要求的寬度、高度，或檔名中的十六進位代碼。由於編碼器隨瀏覽器一同出貨，在某個瀏覽器中以品質 80 產生的 JPEG 或 WebP，可能與另一個瀏覽器中相同呼叫的結果在位元組層級並不完全相同，但解碼後的像素會落在相同的 RGB 值上。
純色檔案的實用場景
純色影像在許多小型工作流程中都默默地派上用場：
- 簡報與投影片背景，其中一張品牌色的 1920 乘 1080 PNG 可以取代帶有漸層的乾淨章節投影片。
- 網頁上暫時性的主視覺面板，在最終素材完成之前需要 A/B 測試版面配置。
- 影像管線中與 CSS 無關的測試資料，在進行縮放、裁切或格式轉換之前需要已知大小的輸入。
- 設計審查用的模擬內容區塊，使用純色填滿佔位符，等待實際照片或插圖到位。
- 自動化測試中的單色輸入，用來比對經過裁切、縮放或濾鏡處理的輸出與基準。
- 追蹤像素用的測試資料，例如 1 乘 1 PNG，可在不帶入真實影像資料的情況下演練傳遞管線。
- 視覺檢視用的色塊，其中 512 乘 512 的方塊比螢幕上小小的色晶片更能呈現顏色的感覺。
由於產生器會產生你所要求的確切尺寸，你可以跳過另外縮放的步驟。如果你需要 1200 乘 630 的預覽圖，可以直接要求該尺寸，避免先產生較大的 canvas 再縮小。
產生器不會做的事
了解工具的限制和了解它的功能一樣重要。純色影像產生器不會產生透明效果、漸層、圖樣、雜訊、文字、標誌、調色盤、ICC 設定檔或 CMYK 輸出。它不會產生動畫，也無法在單次執行中產生多種尺寸。它不保證 JPEG 或 WebP 在不同瀏覽器之間於位元組層級完全相同，因為這些編碼器是隨瀏覽器本身出貨的。
當上述任何功能才是你真正需要的時候，正確的工具在別處。當素材需要置中文字時，請使用佔位影像產生器；想要多種顏色時，使用漸層工具；當印刷製作和嵌入的色彩設定檔很重要時，使用支援色彩管理的編輯器。結果列也不會說明顏色在你的特定螢幕上看起來如何，因為這取決於顯示器的色彩管理與校正。下載的 PNG 會忠實帶有所要求的 RGB 值，但在校正不佳的筆記型電腦螢幕上，仍可能與經色彩管理的參考螢幕看起來不同，這正是為什麼結果欄位無法取代印刷用的色彩管理工作流程。