一個完全在瀏覽器中運作的純色圖片產生器,在線上使用是安全的,因為它從不上傳來源圖片、不建立帳號,也不會將產生的檔案傳送到遠端伺服器。整個工作流程——輸入尺寸、以單一十六進位色填滿畫布、編碼像素、預覽結果、下載檔案——全都發生在你自己的瀏覽器分頁中,使用內建的 canvas API。因為一開始就沒有任何東西需要上傳(沒有照片、沒有草圖、沒有標誌),所以也不會有來源檔案可能洩漏、被建立索引,或出現在別人的雲端儲存空間中。在這個情境下,安全性比較不是關於防毒掃描,而是一個乾淨的架構承諾:輸入是一個顏色和一組像素尺寸,輸出則是一個新編碼好的點陣圖檔案,由你的瀏覽器直接交還給你。
這個 純色圖片產生器遵循了該承諾。根據其記載的行為,畫布建立、顏色填滿、編碼、預覽與下載全都本地發生在瀏覽器中,結果列會回報精確的尺寸、MIME 類型、標準化十六進位顏色,以及大致的位元組大小,讓你在儲存前可以驗證內容。瀏覽器畫布會以標準化的六位數值填滿一次,編碼器透過瀏覽器內建的 canvas.toBlob 管線執行,下載則透過一個暫存物件 URL 觸發,該 URL 在不再需要時會立即被撤銷。沒有任何東西會離開這個頁面。

為何基於瀏覽器的工具能保持隱私
人們對線上圖片工具的大多數安全疑慮,最終都歸結到同一個根本問題:我的檔案跑到哪裡去了?一個典型的雲端轉檔工具會接收檔案上傳、在伺服器上處理、將結果儲存幾分鐘(或更久),然後回傳一個下載連結。那種模式帶來了幾種風險,包括透過公共網際網路傳輸、儲存在你無法掌控的基礎架構上,以及檔案可能在超過其公告保留期限後仍被建立索引或留存的風險。
基於瀏覽器的純色產生器幾乎短路了上述所有風險,因為它一開始就沒有來源圖片。你唯一提供的資料是寬度、高度,以及一個六位數的顏色(例如 #2563eb)。這些值只是簡單的數字和一個字串。它們不含任何個人資料、裝置指紋或可識別的中繼資料。它們無法透露你原始照片的樣貌,因為你從頭就不需要提供照片。就連輸出檔案也是從在你分頁中全新繪製的畫布即時產生,因此該檔案存在的唯一複本,就是當你點擊下載時瀏覽器所儲存的那一份。
這種架構選擇對法規遵循也很重要。因為沒有來源圖片跨越網路,所以沒有 GDPR 相關的個人資料被處理、沒有需要清除的 EXIF 中繼資料,也不需要信任廠商的保留政策。這個工具不會儲存你的尺寸、顏色選擇或下載紀錄,因為根本沒有遠端服務在接收這些資料。
這個產生器如何在不傳送資料的情況下運作
底層機制相當直接,使用的是公開記載的標準瀏覽器 API。當你輸入寬度、高度與一個十六進位顏色時,工具會以精確的像素尺寸建立一個離螢幕的 HTML 畫布。它將填滿樣式設定為標準化的十六進位值,並以單一的填滿操作繪製整個畫布,使每個像素都完全相同。接著瀏覽器會使用其內建編碼器,將該畫布編碼為你所要求的格式——PNG、JPEG 或 WebP——並回傳一個二進位 blob。
根據 MDN 對於 canvas fillStyle 的參考資料,該屬性接受一個 CSS 顏色字串,這正好就是六位數十六進位值的解讀方式。結合在自然畫布尺寸下的單一矩形填滿,這會產生一個完全均勻的影像,沒有漸層、沒有邊框、沒有 alpha 通道處理,也沒有隱藏的覆蓋圖層。沒有第二次處理、沒有伺服器往返、沒有中介儲存。該 blob 會被包裝在一個暫存物件 URL 中,以預覽和下載的形式呈現,而該 URL 在互動結束後就會被撤銷。
三個步驟產生安全的純色圖片
- 以整數像素輸入精確的輸出寬度與高度。有效值為每邊 1 到 10,000 的整數,且總像素數必須維持在 40 百萬像素的畫布預算內。例如,1920 × 1080 會產生 2,073,600 像素,遠低於該上限。
- 選擇一個六位數的顏色、輸出格式,以及適用的 JPEG 或 WebP 品質。顏色請使用 #RRGGBB 格式。若要無失真輸出請選 PNG;若你想要較小的檔案且願意設定 1 到 100 之間的品質值,則可選 JPEG 或 WebP。
- 選擇 Create image,檢查尺寸、MIME 類型與顏色,然後下載檔案。結果列會回報精確的尺寸、瀏覽器回傳的 MIME 類型、標準化的十六進位顏色,以及大致的位元組大小。當一切都符合你的預期時,即可儲存檔案。下載檔案的命名會包含所選的顏色與尺寸,例如 solid-2563eb-1920x1080.png。
值得了解的安全限制
即使架構本身是私密的,了解明確的限制仍有助於避開可能讓瀏覽器變慢或導致編碼失敗的邊界情況。
- 僅限整數像素尺寸。小數值會被拒絕,且每個尺寸都必須是正整數。
- 每邊 1 到 10,000 像素。超出此範圍不予支援,而輸入非常大的畫布可能在任何錯誤訊息出現之前就用盡瀏覽器記憶體。
- 總計 40 百萬像素的預算。一個 10,000 × 10,000 的請求會是 100 百萬像素,因此會被拒絕,以將一般分頁中的記憶體用量控制在合理範圍。實務上的範例——例如 1920 × 1080 的背景(約 2.07 MP)、1200 × 630 的社群卡片(約 0.76 MP),或 1 × 1 的追蹤用固定圖(幾乎為零)——都遠低於該上限。
- 單一六位數十六進位顏色。工具只會繪製一個標準化值,沒有漸層、沒有透明度,也沒有第二種色調。
- WebP 支援與否取決於瀏覽器。由於 WebP 編碼是由瀏覽器提供,不支援的瀏覽器會顯示明確的錯誤,而不是產生出損毀的檔案。
- JPEG 與 WebP 並非逐位元組完全決定性。不同的瀏覽器在相同品質設定下可能會產生略有不同的檔案大小,因為編碼器的實作會自行決定壓縮方式。
比較輸出格式與品質
你選擇的格式會影響哪些項目可控制、哪些項目是固定的,以及最終檔案能縮到多小。下表整理了工具所記載的行為,讓你在按下 create 之前能依用途挑選合適的格式。
| 格式 | 使用品質滑桿? | 壓縮行為 | 最適合用途 |
|---|---|---|---|
| PNG | 否 | 對平面像素為無失真;完全忽略品質欄位 | 測試固定圖、精確顏色參考、不以位元組大小為優先的色塊 |
| JPEG | 是 (1-100) | 有失真;品質越低檔案越小,但無法保留精確的像素值 | 背景佔位圖、模擬內容區塊、檔案大小比像素精確度更重要的社群預覽 |
| WebP | 是 (1-100) | 低品質下為有失真;在瀏覽器支援時,通常在相近視覺品質下比 JPEG 更小 | 現代網頁素材、影片遮色片、影像管線中作為顏色比較的輸入 |
何時純色圖片是正確的起點
每當你需要一個可預期的輸入時,本地產生一個乾淨的單色點陣圖都很有用。常見的用途包括需要精準對應品牌色的簡報背景、之後會被替換的暫時主視覺區塊、與 CSS 無關的版面測試固定圖、影片遮色片與遮色片底圖、設計審稿用的模擬內容區塊、必須在多台機器間可重現產出的顏色比較素材,以及給下游影像管線(用於縮放、裁切、濾鏡或轉檔)的輸入。由於該檔案是產生的而非螢幕擷圖,因此避免了壓縮失真、顏色偏移和意外縮放,而檔名也能讓你在同一個資料夾中輕鬆分辨不同的測試固定圖。
若是從既有照片而非十六進位色碼開始的相關工作流程,從圖片中取得顏色並輸出為純色檔案指南會逐步說明如何先萃取單一色調,再從中產生平面素材。當你想要使用的顏色已經存在於一張照片中(而非事先從品牌色票中選定)時,這是一個很有用的搭配作法。
這個工具不會做的事
了解工具的界線也是安全使用它的一部分。這個產生器不會產生透明度、漸層、圖樣、雜訊、文字或標誌,也無法在單次執行中產生多種尺寸。它不會嵌入 ICC 描述檔、不會輸出 CMYK,也無法產生動畫檔。對於在彩色背景上置中的標籤,獨立的 Placeholder Image Generator 會更合適。對於多停點漸層,專用的漸層工具才是正確選擇。對於需要嵌入描述檔的印刷生產,具備色彩管理的桌面編輯器仍是合適的環境。這些限制都不是安全疑慮;它們只是讓工具行為可預期、並讓本地檔案產生保持快速的範圍界線。
最安全的模式,是把這個產生器視為一個單一且定義明確的基本元件:挑選顏色、挑選尺寸、挑選格式,然後下載一份乾淨的點陣圖,全程不將任何來源圖片暴露於網路。以這種方式使用時,基於瀏覽器的純色圖片產生器會是你可選擇的最安全類別的線上圖片工具之一。
想進一步了解,請參閱 SVG 轉 PNG 轉檔器在線上使用安全嗎?。