像素色彩選擇器是一個工具,能讀取數位影像中任何單一像素的精確紅、綠、藍 (RGB) 值,然後將這些值轉換成 HEX 代碼,讓你可以複製並貼到設計軟體、CSS 或品牌指南中。要找出影像或圖片中使用了哪些顏色,你只要把圖片載入瀏覽器型的色彩選擇器,把游標移到你感興趣的區域,點擊你想取樣的像素;工具就會立即顯示該位置的 HEX 和 RGB 值。Image Color Picker 完全在你的瀏覽器中執行,所以你上傳的檔案絕不會離開你的電腦,而且它提供一鍵複製的 HEX 代碼,以及最近取樣色彩的歷史紀錄。
設計師、開發者和業餘愛好者都需要識別圖片中的顏色,原因都一樣:符合品牌、重現氛圍,或取得自己喜歡的色調。一張夕陽照片肉眼可能看起來只有三種顏色,但實際上包含數萬個獨特的像素,每個像素都有自己的 RGB 值。知道如何從影像中取出這些值是一個小但強大的技巧,而且不管圖片是 JPEG 照片、PNG 標誌,還是 WebP 圖檔,操作方式都完全相同。如果你在取樣前還需要調整影像尺寸,Image Resizer 可以在幾秒內準備好一個工作副本,而 Image Compressor 則可以縮小原本載入選擇器時會很慢的大檔案。
「影像中的顏色」實際上代表什麼
每張數位影像都是由稱為像素的小方塊組成的格狀結構,每個像素儲存一種顏色。該顏色由三個數字描述:包含多少紅、多少綠、多少藍光。每個值的範圍是 0 到 255,所以純紅像素是 R255 G0 B0,純綠像素是 R0 G255 B0,純黑是 R0 G0 B0。白色則是 R255 G255 B255,所有通道都達到最大值。
HEX 代碼其實就是同一組 RGB 值的簡寫,以 16 進位表示並加上井字號前綴。HEX #FF0000 與 R255 G0 B0 是同一個顏色,#2E86AB 與 R46 G134 B171 也是同一個顏色。井字號後的前兩個字元代表紅色,接下來兩個代表綠色,最後兩個代表藍色,這也是 HEX 在網頁設計中如此受歡迎的原因:它簡潔、容易從樣式表複製,而且一看就懂。當設計師談論「圖片中使用的顏色」時,通常指的是從影像中最重要的像素取出的一小組 HEX 代碼。
數位圖片如何儲存色彩
大多數照片、標誌和網頁圖形都以三種格式之一儲存:JPEG、PNG 或 WebP。這些格式都能表示相同的 RGB 像素資料,但在背後處理資料的方式各不相同。JPEG 是破壞性格式,代表它透過四捨五入細微的色彩差異來壓縮像素以節省空間,所以 JPEG 包含的獨特色彩可能會比原始影像略少一些。PNG 是無損格式,代表它完整保留每個像素的原始資料,而且支援透明背景。WebP 是現代化的格式,可以是有損或無損,通常能在相近的品質下產生比 JPEG 或 PNG 更小的檔案。你可以使用像 JPG to PNG 轉檔器或 WebP Converter 這類工具在這些格式之間自由轉換,而不會改變任何像素的色彩值。
另一個影響影像「使用」多少顏色的因素是色彩深度。標準的 8 位元影像可以顯示約 1670 萬種獨特顏色 (每個通道 256 階,三個通道相乘),這已經超過人眼能分辨的能力。有些專業影像以每通道 10 位元或 12 位元儲存,進一步擴展了色彩範圍,但大多數螢幕和瀏覽器仍然只顯示 8 位元色彩,所以多出來的資料主要用於編輯時的餘裕。
為什麼設計師和開發者要取樣像素色彩
對任何處理品牌素材、網頁模板或社群媒體圖片的人來說,取樣像素色彩是日常任務。最常見的原因包括:
- 品牌對色: 從客戶標誌中取出精確的藍色,讓新的版面與他們既有的素材保持一致。
- CSS 與程式碼: 設計師直接把 HEX 值複製到樣式表,確保各頁面的色彩完全相同。
- 建立色調板: 從照片中萃取 5–8 個主要色,用於激發情緒板、簡報或行銷活動的靈感。
- 色彩驗證: 檢查印刷打樣、廠商模型或競爭對手的網站是否使用了某個特定色調。
- 尋找參考色: 在圖庫照片中看到喜歡的顏色,儲存其 HEX 值,以後可以找到相符的油漆、布料或縫線。
因為色彩值是精確的,取樣可以消除用肉眼猜測色調時的不確定感。如果你曾試著憑記憶重現一個顏色,結果出來「很接近但不太對」,像素取樣就是解決方案。
如何使用 Image Color Picker 找出影像中的顏色
Image Color Picker 設計用來做好一件事:讀取你點擊的任何像素的精確顏色。整個工作流程都在你的瀏覽器中執行,影像是在本地端處理,而不是上傳到伺服器。
- 點擊 Browse files 按鈕,從電腦中選擇一張影像。常見的 JPG、PNG 和 WebP 格式都支援,檔案幾乎會立即出現在預覽區域中。
- 把游標移到圖片上,即可即時預覽色彩。當你移動游標時,色塊會即時更新,顯示十字線下方的顏色,以及對應的 HEX 和 RGB 值。
- 點擊任何像素來鎖定你想要的顏色。色塊會停止跟隨游標,並固定顯示該單一位置的精確 RGB 和 HEX 值。
- 讀取鎖定色塊旁顯示的 HEX 和 RGB 值。把它們記下來,或點擊 Copy 按鈕,直接把 HEX 代碼放到剪貼簿。
- 點擊另一個像素以比較第二個顏色,或移到新區域繼續取樣。你最近的選擇會儲存在預覽下方的歷史紀錄列中,讓你可以往回捲動查看最近選過的好幾個顏色。
為了獲得最佳效果,建議在取樣非常細小的細節前先放大影像。在放大後的圖片中,將滑鼠穩穩地停在一個像素區域上會更容易,而且當游標置於清晰可見的特徵中央,而不是兩個對比形狀的邊緣時,色彩讀數會更可靠。
主要色彩調色盤看起來像什麼
大多數影像包含的獨特顏色遠多於設計師實際所需。一張 4000 像素寬的照片,理論上可能包含數十萬種不同的色調,但實用的調色盤通常來自主要色彩:佔據最大面積或具有最大視覺份量的顏色。取樣單一像素的工具是第一步;對大區域進行平均的工具則是第二步。
| 調色盤類型 | 包含內容 | 典型用途 |
|---|---|---|
| 重點色 | 從特定特徵 (標誌、按鈕、強調色) 取樣的一個像素 | CSS 變數、品牌手冊、印刷打樣 |
| 主要色調色盤 | 涵蓋圖片最大區域的 5–8 個平均區域 | 網站主題、情緒板、簡報模板 |
| 完整光譜 | 每個獨特的像素顏色,通常多達數萬筆 | 統計分析、色彩描述檔稽核 |
Image Color Picker 專注於重點色,這是最常見的需求。如果你想要完整的主要色調色盤,你手動收集的同一組 HEX 代碼可以在試算表或專門的調色盤產生器中進行排序、計數和分組。
精準取樣色彩的訣竅
養成幾個習慣可以讓你的色彩取樣更可靠。首先,避免取樣在物件的邊緣,因為反鋸齒會將兩種顏色混合成一個在圖片中其他地方都不存在的第三種顏色。其次,盡量從平坦、光線均勻的區域取樣;同一個物件上的亮部與陰影,即使實際上是相同的顏料,讀數也可能呈現兩種不同的顏色。第三,當需要精確度時,不僅要核對 HEX,還要再次確認 RGB 三元組,因為兩個看起來幾乎相同的 HEX 代碼,在某個通道上仍然可能相差幾個值。
想更深入了解 HEX、RGB 和 HSL 如何以不同方式描述同一個顏色,Mozilla Developer Network 維護了一份清晰的 CSS 色彩值參考。如果你仍在選擇最適合儲存色彩準確影像的檔案格式,我們的 JPEG vs PNG vs WebP 指南會詳細說明其中的權衡。
找到顏色後該怎麼用
一旦你有了 HEX 代碼清單,你可以直接貼到 CSS 樣式表中作為 color: #2E86AB;,放進 Figma 或 Canva 的色票面板,或導入到設計系統中。開發者通常會把這些值轉換成 CSS 自訂屬性,這樣同一個顏色就能透過一次修改在整個網站重複使用。行銷人員有時會把這份清單整理成品牌調色盤文件,業餘愛好者則會用它們在手工藝店比對油漆色卡、繡線或布料樣本。
如果你需要把圖片裁切到只保留你取樣的那個區域,Image Cropper 可以幫你隔離出影像的該部分;如果你想翻轉或鏡像原始影像,讓顏色在情境中更容易辨識,Image Flipper 只需一鍵即可完成。這些小巧的瀏覽器工具合在一起,涵蓋了從任何圖片中找出、擷取並重複使用精確顏色的完整流程。
如果你正在權衡各種選項,Compress Image File Size: A Simple Browser Method 對此有詳細說明。
如果你正在權衡各種選項,PNG or JPG for Printing: Which Format Wins and How to Convert 對此有詳細說明。
如果你正在權衡各種選項,Flip an Image Online: Horizontal and Vertical Mirror Guide 對此有詳細說明。