單色影像是一種點陣圖檔,其中每個像素都帶有相同的 RGB 值,通常以六位數十六進位代碼表示,例如 #2563eb,而檔案的像素尺寸(例如 1920 by 1080)則決定其在螢幕上的實際大小。在 Adobe Photoshop 中,「單色」通常指的是「純色填色圖層」,這是一個非破壞性的調整圖層,會在整個畫布上塗上一個單一平坦的顏色,之後可以變更其不透明度、混合模式和遮罩。這是一個實用的編輯結構,但它與完成品的平坦顏色檔案並不相同。如果目標只是為了簡報、CSS 測試工具、社群預覽底圖或預留位置,產生一個精確尺寸的單色點陣圖,那麼啟動 Photoshop 並儲存一個多層 PSD 檔,往往超出工作所需的範圍。瀏覽器端的產生器可以直接、在本機、一次完成地產生該平坦顏色檔案。

Photoshop 中的單色:這個詞的真正含義
Photoshop 有兩個不同的功能符合「單色」這兩個字,而且它們會產生不同的成品。第一個是「純色填色圖層」,可在圖層面板的調整圖層選單中找到。「純色填色圖層」是一個調整物件,會以一種 sRGB 顏色覆蓋整個畫布,位於其下方圖層之上,並且可以加上遮罩、進行混合或降低不透明度,而不會動到底層像素。第二個是「Edit > Fill」指令,它會以前景顏色、背景顏色、黑色、50% 灰色或白色預設值,或從顏色選擇器中選擇的自訂顏色,塗滿目前選取的像素或圖層。
這兩種方法都在 Photoshop 文件中執行。單獨使用任何一種,都無法自行產生特定格式、特定像素尺寸的已下載平坦顏色影像檔。若要取得該檔案,您通常還需要選擇「File > Save a Copy」或「File > Export > Export As」,然後選擇 PNG、JPEG 或其他格式。對許多工作而言,包含圖層和對話方塊步驟所需的流程比實際交付物所需的更多。
如何在 Photoshop 中新增純色填色圖層
以下是建立非破壞性「純色填色圖層」的標準應用程式內步驟,這也是「Photoshop 中的單色」最常指的意思:
- 開啟文件,或透過「File > New」以目標像素尺寸建立新文件。
- 在「圖層」面板中,點選標示為 Create new fill or adjustment layer 的半填滿圓圈圖示。
- 從彈出式選單中選擇「Solid Color」。Photoshop 會在新圖層之上開啟「Color Picker (拾色器)」。
- 輸入或選擇所需的六位數十六進位值,例如 #2563eb,然後點選「確定」。
- 如果填色只需要覆蓋畫布的一部分,請新增圖層遮罩並以黑色塗抹以隱藏其餘部分。
- 如果需要半透明或混合的效果,請在「圖層」面板中調整「不透明度」和「混合模式」。
- 使用「File > Export > Export As」匯出結果,選擇 PNG、JPEG 或其他格式,以及確切的寬度和高度。
對於現有選取範圍或圖層的一次性填色,「Edit > Fill」會開啟一個對話方塊,提供相同的顏色選項,直接套用至像素,且具有破壞性。兩種方法都會產生相同的十六進位值作為平坦填色,但只有填色圖層方法在套用後仍可編輯。
當工作只需要平坦顏色檔案而非圖層時
許多日常工作根本不需要填色圖層、遮罩、混合模式或 PSD 檔。它們只需要常見格式下、精確像素尺寸的平坦點陣圖。常見情況包括:
- 用於簡報模型製作的 1920 by 1080 背景面板。
- 用於社群分享預覽的 1200 by 630 底圖,在真正的美術作品完成前使用。
- 由渲染或管線測試使用的 1 by 1 像素追蹤測試工具。
- 用於顏色比較網格的 512 by 512 色塊圖磚。
- 將由編輯指令碼稍後覆寫的平坦背景或遮罩板。
對於上述每種情況,Photoshop 路線仍然可行,但至少需要七次選單點擊、一個「儲存」或「匯出」對話方塊,以及在多層文件中往返一次。能直接產生相同平坦檔案的瀏覽器工具則可跳過所有這些步驟。單色影像產生器正是為此情況所設計:輸入寬度、輸入高度、選擇十六進位顏色、選擇格式、點選建立,然後下載。如需完整的應用程式內 Photoshop 專用路徑逐步說明(包括遮罩和「Export As」對話方塊),請參閱如何在 Photoshop 中將影像變成單色;本指南的其餘部分則聚焦於平坦檔案的替代方案。
在瀏覽器中產生相同的平坦顏色檔案
這個瀏覽器工具遵循嚴格且明確的契約:一種顏色、精確尺寸、三種格式之一,以及本地下載。沒有上傳、沒有帳號、沒有遠端渲染,也沒有預設長寬比。這些步驟反映了在略過圖層後,應用程式內 Photoshop 流程所會產生的結果。
- 以整數像素輸入確切的輸出寬度和高度。兩個欄位都接受 1 到 10,000 之間的整數,且合併的畫布上限為 40 百萬像素,以便一般的瀏覽器分頁能容納產生的點陣圖。1920 by 1080 背景、1200 by 630 社群預覽底圖、512 by 512 色塊,以及 1 by 1 測試工具,全都遠低於此上限,且該工具不會假裝這些尺寸中的任何一個是特定平台的建議尺寸。
- 選擇六位數顏色、輸出格式,以及適用時的 JPEG 或 WebP 品質。顏色控制項會正規化為六位數 sRGB 風格的十六進位值,例如 #2563eb。PNG 是無損的預設格式;JPEG 和 WebP 則提供 1% 到 100% 的整數品質控制,由瀏覽器的編碼器解譯為壓縮設定。PNG 完全忽略品質欄位,這是無損格式的預期行為。
- 選擇「Create image」,檢查尺寸、MIME 類型和顏色,然後下載檔案。結果行會重複顯示正規化後的十六進位值,並回報確切尺寸、瀏覽器傳回的 MIME 類型,以及大致位元組大小。請比對重複顯示的十六進位值與輸入值,以確認沒有隱藏的調色盤偏移。頁面上顯示的預覽僅為縮放以符合版面;它絕不是下載檔案的來源,因此儲存的 PNG、JPEG 或 WebP 始終具有所要求的原始尺寸。
下載檔案會以所選顏色代碼和確切的寬度乘高度命名,例如 solid-2563eb-1920x1080.png。JPEG 使用 .jpg 副檔名,而 WebP 和 PNG 則保留其標準副檔名。當許多平坦顏色工具檔案儲存在同一個資料夾中時,這種命名慣例讓檔案日後易於查找。
設定、限制以及結果行所告訴您的內容
下表總結了該工具接受什麼、忽略什麼,以及結果行如何構成。每個項目都由該工具的記錄契約所定義,而非從類別慣例推斷而來。
| 控制項 | 接受範圍 | 行為 |
|---|---|---|
| 寬度 | 1 到 10,000 像素,整數 | 與高度合併後,必須符合 40 MP 畫布預算 |
| 高度 | 1 到 10,000 像素,整數 | 與寬度合併後,必須符合 40 MP 畫布預算 |
| 顏色 | 六位數 sRGB 風格十六進位值(例如 #2563eb) | 經正規化處理;不套用對比、漸層或調色盤調整 |
| 格式 | PNG、JPEG、WebP | WebP 的可用性取決於瀏覽器的編碼器 |
| 品質 | 1% 到 100%,整數 | 僅用於 JPEG 和 WebP;PNG 忽略此欄位 |
| 結果行 | 正規化後的十六進位值、精確尺寸、MIME 類型、位元組大小 | 重複顯示所選顏色,以便在下載前進行驗證 |
| 檔名 | solid-XXXXXX-WIDTHxHEIGHT.ext | JPEG 使用 .jpg,WebP 和 PNG 使用其標準副檔名 |
有兩個後果值得提前說明。首先,畫布僅以正規化後的十六進位值填滿一次,沒有漸層、紋理、Alpha 控制、邊框、顏色校正或疊加層;實作方式是使用瀏覽器的canvas fillStyle 和 fillRect,以完全不透明度塗抹原始尺寸畫布上的每個像素。如果需要上述任何額外效果,這就是不適合的工具。其次,JPEG 和 WebP 由瀏覽器編碼,不同瀏覽器在相同品質下可能會產生不同的位元組大小。編碼失敗或不支援時,會產生明確的錯誤,而非靜默的空檔案。
瀏覽器畫布的顏色管理與顯示器校色仍會影響顏色在特定螢幕上的呈現方式,因此所產生的檔案無法取代使用內嵌 ICC 設定檔或 CMYK 輸出的印刷色彩管理工作流程。此工具專為以螢幕為主的單色點陣圖需求而打造。
單色影像檔案的適用之處
一旦下載了平坦檔案,它通常會用於一組反覆出現的工作流程中:
- 簡報背景。1920 by 1080 的 PNG 或 JPEG,使用品牌顏色,可成為投影片的底層,而不會因擷取填色圖層而產生任何可見的條紋。
- 獨立於 CSS 的測試工具。1 by 1 或 800 by 600 的單色檔案,可讓渲染、剖析器或管線測試在無需依賴 CSS 顏色值或螢幕擷取的情況下執行。
- 社群預覽底圖。使用正確十六進位值的 1200 by 630 背景,可在最終創意作品交付前作為預留位置。
- 顏色比較素材。可以並排開啟兩個或三個具有相鄰十六進位值的平坦檔案,而不會有單一 Photoshop 文件中兩個圖層所造成的偏差。
- 影像管線輸入。當起始點陣圖為已知的單色時,裁剪、調整大小、濾鏡和格式轉換步驟的表現會更加可預測。
對於需要置中文字、漸層、多種顏色、透明度、可列印的 CMYK 檔案,或跨瀏覽器位元組層級一致的 JPEG 輸出的工作,單色影像產生器並非合適的工具;它只做一件事,並且持續做好這件事。當交付物是已知像素尺寸的完成平坦顏色點陣圖時,瀏覽器工作流程可取代 Photoshop 工作階段為該單一步驟所做的大部分工作。
相關閱讀:影像顏色萃取器替代方案:本機瀏覽器工具。