如何取得圖片裡任何顏色的 Hex 色碼
2026-05-15
簡短回答： 把圖片丟進 ToolKoala 的取色器、點你想要的那個像素、複製 hex（和 RGB）值——全部在你的瀏覽器裡，什麼都不上傳到伺服器。這是從截圖、照片或設計稿裡抓出精確顏色、又不用安裝任何東西的最快方法。
怎麼抓 hex 色碼
- 開啟 取色器，把你的圖片或截圖拖進去（PNG、JPG、WebP 都行）。
- 把游標移到圖片上。一個放大鏡會顯示你即將取樣的那個像素，讓你不會差一個像素。
- 點下那個精確的像素。工具會直接從記憶體中的畫布讀出那個像素的 RGB 值。
- 複製 hex 色碼（像
#3B82F6）或 RGB 字串。想取幾個像素就取幾個。
因為它是在本機讀取像素資料，所以沒有來回伺服器、也不用等。使用的同時打開瀏覽器的開發者工具 Network 分頁——你會看到零個上傳請求。這就是整個重點。
我實際上拿這個來做什麼
- 比對品牌色。 客戶傳來一個沒有品牌指南的扁平 PNG logo。取那個藍色、得到
#1D4ED8，搞定。 - 建立調色盤。 從一張你喜歡的照片或截圖上取五六個顏色，不用猜就有了一組起始調色盤。
- 修正色差。 「這個按鈕的色調稍微不對」——兩邊都取樣、比對 hex、找出那個差一點點的值。
如果你的瀏覽器夠新（Chrome、Edge），還有原生的 EyeDropper API 能取樣螢幕上任何像素，不只是上傳圖片裡的。ToolKoala 的取色器則靠畫布，所以它在各種瀏覽器、以及你還沒在別處打開過的檔案上，運作方式都一樣。
老實跟其他工具比較
- macOS 數位色彩計量器 — 免費、macOS 內建。取樣螢幕上任何東西都很棒，但它預設用一個奇怪的色彩空間，而且複製成 hex 的流程很麻煩（你得鑽進設定）。沒有 Windows 版。
- Chrome 開發者工具滴管 — 免費、你瀏覽器裡就有。打開 Styles 面板、點一個顏色色塊、按下滴管。運作得不錯，但它埋在開發工具裡，而且只能取樣渲染好的頁面。
- Photoshop（約 $23/月）— 滴管很出色又精準，但為了讀一個像素去啟動一個一個月 $20 以上的 app，太超過了。
- 瀏覽器取色器擴充功能 — 方便，但這裡有個取捨：一個能在任何頁面取色的擴充功能，通常會要求讀取你造訪的每一個頁面的權限。對一個取色器來說，這是很大的信任。我寧可把檔案丟進一個什麼都不上傳的分頁，也不想交給背景擴充功能全面的讀取權限。
常見問題
怎麼從截圖取得 hex 色碼？ 截圖、把它丟進像 ToolKoala 這種瀏覽器取色器、點你想要的像素。你會立刻拿到 hex 和 RGB，而且不用上傳圖片。
hex 和 RGB 有什麼差別？
它們描述的是同一個顏色。Hex（#3B82F6）是 CSS 和設計工具用的精簡六位數形式；RGB（59, 130, 246）把紅/綠/藍通道列成數字。大多數工具，包括這一個，兩種都給你。
我可以從一個線上的網站取色，而不是檔案嗎？
可以——用 Chrome 開發者工具的滴管，或瀏覽器原生的 EyeDropper API 來做螢幕取樣。要從一個你已經有的圖片檔取樣，免上傳的取色器更簡單。
它精準到單一像素嗎？ 是的，只要你取樣的是原始圖片。如果圖片被壓縮過（重度 JPG）或縮放過，你看到的顏色可能已經跟來源稍有偏移——那是檔案的問題，不是取色器的問題。
— Milo 🐨