若要從照片中挑選顏色，請點擊圖片中的任何一個像素，並讀取工具回傳的精確 HEX 與 RGB 值——例如像 #3b82f6 這樣的六位數代碼，以及像 rgb(59, 130, 246) 這樣的三元組——接著輕點一下即可複製 HEX，用於 CSS、設計檔或品牌規範中。一個專為此目的打造的選色器，會在你的瀏覽器內將影像繪製到 canvas 上，讀取游標下的像素，並同時顯示這兩種代碼，搭配一個即時色塊，讓你在任何地方使用前都能確認這個色調。整個流程每選一個顏色只需點擊一次，檔案會留在你的裝置上，並且可支援你的電腦或手機原本就能開啟的常見格式，包括 PNG、JPEG、WebP 和 GIF。因為影像是以原始解析度繪製到 canvas 上，你點擊的像素就是被讀取的像素，即使在手機上影像被縮小以符合螢幕大小也是如此——選色器會將你的點擊位置對應回原始影像，因此無論縮放等級或顯示尺寸為何，顏色都能保持準確。
「挑選顏色」實際上回傳的是什麼
當你從照片中挑選顏色時，你讀取的是圖片中某個精確位置的原始像素值。這個值可以用兩種常見的方式記錄下來，而一個好的選色器會同時並排顯示這兩種方式，讓你完全不需要手動轉換。
| 格式 | 範例 | 你可以貼上的地方 |
|---|---|---|
| HEX | #3b82f6 | CSS、HTML、設計工具、Figma 色票 |
| RGB | rgb(59, 130, 246) | JavaScript、設計工具、無障礙報告 |
HEX 將紅、綠、藍三個通道打包成井字號後面的六個字串，而 RGB 則在 rgb() 函式中將每個通道寫成 0 到 255 之間的十進位數字。這兩種代碼描述的是同一個顏色，只是表示方式不同。設計師通常會直接把 HEX 貼進樣式表或 Figma 色票，而開發者則常會選用 RGB，當他們想在程式碼中對顏色進行運算時——例如在 hover 時讓按鈕變暗，或計算對比度。
如果你知道公式，也可以手動在兩者之間轉換：將 HEX 拆成三對字元，把每對從 16 進位轉換成 10 進位，就能得到 RGB 三元組。以 #3b82f6 為例，計算過程為 3b = 3×16 + 11 = 59（紅）、82 = 8×16 + 2 = 130（綠）、f6 = 15×16 + 6 = 246（藍），得到 rgb(59, 130, 246)。選色器則完全省略了這個步驟——它會在同一個畫面上直接給你兩種代碼，讓你隨時可以複製。
四個點擊就能從照片中挑選顏色
從裝置上的一張圖片到一個可用的顏色代碼，最快的途徑就是使用一個在本地載入影像並讀取游標下像素的工具。圖片選色器 正是為這個時刻而設計的：打開它、放入一張照片、然後點擊。
- 點擊「瀏覽檔案」並從你的裝置中選擇一張圖片——它會立即載入，絕不會離開你的瀏覽器。
- 將游標移至圖片上以即時預覽顏色，然後點擊任何像素以鎖定你要的顏色。
- 在即時色塊旁邊讀取所顯示的精確 HEX 與 RGB 值。
- 輕點「複製」將 HEX 代碼放到你的剪貼簿，或點擊另一個像素進行比較——你最近選過的顏色會保存在歷史記錄列中。
這就是整個工作流程。沒有帳號、沒有上傳，也不需要等待遠端服務處理檔案——影像會在同一個分頁中渲染到 canvas 上，所以你可以在大約一秒鐘內就從發現一個顏色進展到取得它的代碼。當你繼續取樣更多像素時，歷史記錄列會讓你最近選過的顏色持續可見，這也正是你能從同一張圖片中建立一組相關色調的小型配色，而不會忘記已經選過的顏色。
取樣得到的顏色實際會被用在哪裡
從影像中取樣一個顏色，單獨來看很少是最終目的；這個值通常還會繼續被帶往某處。以下值得列舉幾個常見的去處，因為它們會決定你要複製哪一種格式。
| 任務 | 你取樣的內容 | 代碼最終放置的位置 |
|---|---|---|
| 比對品牌配色 | 標誌中的主色與強調色 | 樣式表、品牌規範、Figma 色票庫 |
| 在 CSS 中重建參考樣式 | 背景、按鈕、邊框與漸層停駐點 | CSS 變數或行內樣式區塊 |
| 為平面產品照片設定主題 | 布料、包裝或背景的色調 | 主題 token、宣導頁面的強調色 |
| 檢查照片編輯決策 | 膚色、天空漸層或中性灰 | 白平衡參考、修圖筆記 |
當你的剪貼簿中已經有了 hex 代碼，你可以將它放進 token 系統、貼到設計工具的顏色欄位，或在聊天中傳給同事。如果你需要的不是單一像素，而是圖片中每一個主要顏色，那麼調色盤擷取工具就是合理的下一步——請參閱我們關於在瀏覽器中從任何影像擷取調色盤的教學。選色器處理的是「我需要這個精確色調」的情境，而調色盤工具處理的則是「告訴我這張照片中所有重要的顏色」的情境。
為什麼選色器在手機上依然能讀取到正確的像素
手機或小型筆電視窗中的影像，幾乎從來不會以原生大小顯示——瀏覽器會將它們縮小，讓整張圖片符合螢幕大小。天真的選色器會讀取縮放後手指下方的任何像素，但這通常會得到錯誤的結果，因為點擊的位置可能落在原始像素之間。一個會將影像繪製到 canvas 上，並把點擊位置對應回原始影像的選色器，則能讀取到你真正想要的那個像素。這個差異正是讓你能在手機螢幕上點選一個微小的標誌符號，卻仍然能拿到正確的 hex，而不是周圍區域被平均化的色調。
同樣的邏輯也適用於任何縮放等級：無論圖片以 25% 或 200% 顯示，點擊的位置會在讀取像素之前先被轉換成原始影像中的座標。你可以在工作過程中調整瀏覽器視窗大小、捲動畫面或切換裝置，並仍然預期從圖片中的同一個位置得到相同的顏色。選色器不在乎渲染出來的影像是否小於檔案本身——它在意的是原始影像中的像素座標。
隱私、檔案格式，以及什麼會留在你的裝置上
一個會把你的影像上傳到遠端伺服器的選色器，會帶來一些值得避免的問題。上傳在網速較慢時需要時間、對非常大的檔案會失敗，並且會把一份私人資產交給一個你未必信任、不適合託付未公開產品照片或機密 mockup 的第三方。一個完全在瀏覽器中執行的選色器則能跳過這三個問題：檔案透過標準的檔案輸入開啟，在 canvas 內解碼，絕不會離開這個分頁。
圖片選色器支援你的瀏覽器本來就能讀取的格式，包括 PNG、JPEG、WebP 和 GIF。你可以丟入一張來自客戶的平面產品照片、競爭對手頁面的螢幕擷圖、從雜誌掃描的一頁，或從動態 GIF 擷取的一個影格，立即開始挑選顏色。當你關閉分頁時，canvas 也會跟著消失，遠端那一側也不會留下任何影像的痕跡——因為從未產生過雲端副本，所以不會有雲端副本。
同樣的本地處理方式也解釋了為什麼沒有檔案大小上限：影像是在你自己的硬體上解碼，所以唯一的限制就是你的裝置能渲染多大的內容。對於非常大的原始檔，canvas 可能會為了速度而顯示縮放後的畫面，但選色器仍然會把點擊位置對應回原始像素，因此你讀取到的值就是檔案中實際存在的值。這也說明了為什麼不需要登入——因為沒有任何關於這張圖片的資訊離開你的裝置，所以也不會有可供綁定這份工作的帳號。
挑選實用顏色的小技巧
幾個小習慣能讓取樣得到的顏色在實際專案中更可靠，特別是當結果會進入樣式表或品牌規格時。
- 在點擊像標誌符號或按鈕外框這種小細節之前，請先放大——你想要的像素往往只有幾個影像像素寬，在完整檢視下很容易錯過。
- 如果你打算建立漸層，請分開挑選參考圖中最亮與最暗的部分，讓每個停駐點都恰好是你預期的色調，而不是被平均化的中間值。
- 當你在比對膚色或其他細微漸層時，請至少取樣鄰近的兩到三個像素，因為壓縮失真可能會讓單一像素的數值產生明顯的偏移。
- 工作時請保持歷史記錄列可見——點擊另一個像素會新增一個色塊，而不會蓋掉前一個，這讓並列比較比重新取樣快得多。
- 請將 HEX 代碼直接貼到你的目的地——CSS 變數、Figma 顏色樣式、Notion 文件或 Slack 訊息——而不是手動抄寫，因為只要有一個數字抄錯，就會得到完全不同的顏色。
選色器正是把「我幾乎看得出這個顏色」變成「我手上已經有精確代碼」的那個步驟。一旦值到了剪貼簿，剩下的工作就是單純的設計或開發：建立色票、設定變數、貼進檔案，然後繼續處理下一個顏色。
想深入了解，請參閱在瀏覽器中為照片加上圓角。