圖片取色器

在此上傳或貼上圖片，然後點擊您想要的像素 — 工具會透過 HTML Canvas 讀取該像素並即時顯示 HEX、RGB 和 HSL 數值，同時將 HEX 色碼複製到剪貼簿。放大鏡會顯示游標周圍的個別像素，讓您精準點擊目標像素。整個過程不會上傳至伺服器；所有操作均使用 HTML5 Canvas API 在瀏覽器中執行，因此速度快、隱私安全，且頁面載入後可離線使用。對於難以點擊的區域（如反鋸齒文字或 Logo 邊緣），可先用瀏覽器內建的縮放功能放大後再點擊。

使用這款免費的瀏覽器滴管工具：放入圖片，點擊像素，複製色碼。無需安裝，無需註冊。不像 Adobe Photoshop 或 Illustrator — 兩者訂閱費用約從 NT$600/月起 — 本工具完全免費。不像 macOS 數位色彩測量儀或 Windows PowerToys 色彩選擇器，它還能自動提取圖片的主要調色盤，讓您一次獲得所有主要顏色，而不必逐一點擊。imagecolorpicker.com 是最熱門的專用替代方案，但它會將您的檔案上傳至伺服器；本工具則不會。

兩者以不同方式表示同一種顏色。HEX 將紅/綠/藍以三個十六進位數對表示（#FF5733），是 CSS 和網頁設計的標準格式；RGB 使用三個 0-255 的十進位數字 — rgb(255, 87, 51) — 在圖片編輯器和程式碼中較為常見。兩者之間的轉換是無損的，本工具對您點擊的每個像素都會同時顯示兩種格式。在撰寫 CSS 或 Tailwind 類別時使用 HEX；在使用 Canvas、WebGL 或需要數字通道的圖片處理程式碼時使用 RGB。兩種格式都描述相同的 sRGB 色彩點。

HSL 通過色相（0-360°）、飽和度和亮度來描述顏色 — 這在調整顏色時更為直觀。您可以在不改變色相的情況下讓顏色更亮或降低飽和度。CSS 原生支援 hsl()，因此設計師在建立調色盤時常用 HSL：調高亮度得到淡色調，調低亮度得到深色調。取色器對每個像素都會顯示 HEX、RGB 和 HSL，讓您複製最適合工作流程的格式。對於 Figma、Sketch 或 Adobe XD，HEX 通常是最快的貼上格式；對於 Tailwind 或 CSS 自訂屬性，HEX 或 HSL 都適用。

只需載入照片 — 主要調色盤會自動顯示。工具將圖片的像素量化為色群並按出現頻率排列，返回八個最主要的顏色色票及其 HEX 色碼。點擊任意色票即可複製，或一次複製整個調色盤。Adobe Color 和 Canva 的調色盤生成器也提供相同功能，但需要帳號；Coolors.co 可以從照片生成調色盤，但會將圖片傳送至其伺服器。這裡的調色盤提取完全在瀏覽器中執行 — 不上傳任何內容，不需帳號，工作流程中也不會有廣告打擾。

圖片被繪製到瀏覽器中的 HTML Canvas 元素上；點擊時透過 getImageData API 讀取該像素的紅、綠、藍數值，並將其轉換為 HEX、RGB 和 HSL。由於 Canvas 在本機執行，完全不涉及伺服器。放大鏡使用第二個 Canvas 元素放大游標周圍的像素區域，即使在含有精細細節（如反鋸齒文字、Logo 邊緣或照片漸層）的圖片上，也能讓您精準點擊到正確的像素。

使用本工具是安全的 — 圖片只會載入到瀏覽器記憶體中，不會傳輸到任何地方。您可以在瀏覽器的「網路」標籤中驗證：頁面載入後不會發出任何請求。這對於未發布的設計稿、客戶 Logo 和私人照片非常重要。許多基於上傳的取色器 — 包括 imagecolorpicker.com 和部分 Canva 功能 — 都會將您的檔案傳送至伺服器並暫時儲存。本工具在本機處理所有內容，因此您的檔案保留在裝置上，關閉標籤頁後即消失。

可以 — 「從螢幕取色」按鈕使用 EyeDropper API（Chrome 和 Edge 支援），可取樣螢幕上任何位置的像素，包括其他視窗、應用程式和瀏覽器標籤頁。取樣到的顏色會與圖片取色結果一同顯示在 HEX/RGB/HSL 面板和記錄中。對於不支援此 API 的瀏覽器（Safari、Firefox），截圖工作流程可彌補這個不足：按 PrtScn 或 Mac 上的 Cmd+Shift+4 截圖，然後直接以 Ctrl+V 貼入取色器 — 無需先儲存檔案。此方式同樣適用於瀏覽器中的影片畫面、PDF 和任何直播網頁。

儲存或截圖 Logo 並拖入此處，然後點擊品牌顏色並複製 HEX 色碼。或者完全跳過截圖步驟：使用螢幕滴管按鈕，在另一個標籤頁開啟網站時直接取樣。這比使用瀏覽器 DevTools 檢查計算樣式更快，特別是當顏色嵌入在 SVG 或圖片資源而非 CSS 屬性中時。取色記錄會保存最近 16 個顏色，讓您在切換到設計工具之前，可從多個來源收集完整的品牌調色盤。

大多數實用的調色盤包含 3–6 種顏色：一個主色、一兩個輔助色和強調色。提取器返回八個主要色票，讓您選出最合適的子集 — 複製單個色票或取得完整集合用於情緒板。實際上，四種顏色是很好的起點：一個主色、一個輔助色、一個中性色和一個強調色。Stripe 和 Linear 等公司的設計系統使用精簡的調色盤，以相同色相的多種亮度和飽和度變體為主，而非使用多種截然不同的顏色。

HEX 用於 CSS 和網頁工作（在程式碼庫和設計工具中最常見），RGB/RGBA 用於螢幕和 Canvas 程式碼，HSL 用於調色盤建立和系統性微調，CMYK 用於印刷輸出。Figma、Sketch 和 Adobe XD 都支援 HEX、RGB 和 HSL。本取色器對每個像素都會顯示 HEX、RGB 和 HSL，讓您無需手動轉換即可複製所需格式。如果您還需要用於印刷的 CMYK，可將 HEX 貼入免費的線上轉換器 — Canvas API 本身不直接輸出 CMYK。

點擊像素後，其 HEX 色碼會自動複製到剪貼簿。每個數值列、記錄色票和調色盤色片都支援點擊複製 — 只需點擊數值或色票即可複製。取色記錄會保存最近 16 個顏色，讓您在切換到另一張圖片之前，可依序從一張圖片收集多個色調。懸停在色票上可在點擊前預覽其數值。如果您需要完整調色盤的清單，使用「全部複製」即可取得所有八個 HEX 色碼（逗號分隔），可直接貼入 CSS 變數或設計文件。

可以 — 截圖畫面或頁面後以 Ctrl+V 貼入取色器（無需儲存檔案），或使用螢幕滴管在 PDF 或影片播放時直接取樣。對於在瀏覽器中開啟的 PDF，螢幕滴管通常是最快的方式：在 Chrome 中開啟 PDF，點擊「從螢幕取色」，然後點擊您想要的顏色。對於影片，請先暫停在目標畫面以取得最準確的取樣。

瀏覽器在渲染圖片時可能會套用色彩設定檔（ICC）轉換，而截圖會繼承您顯示器的色彩設定檔。取色器報告的是瀏覽器渲染後的實際 sRGB 像素值 — 即您在 CSS 中使用的數值 — 這對網頁工作是正確的。如果您發現與 Photoshop 或 Figma 的結果不一致，請確認您的顯示器已校準至 sRGB，且圖片檔案內嵌的色彩設定檔與其相符。對於 Logo 資源，設計師理想上應直接提供品牌 HEX 數值，而不是依賴提取。

imagecolorpicker.com 是使用最廣泛的替代方案 — 它提供單像素取色和調色盤提取功能，但會將圖片上傳至伺服器並顯示廣告。Adobe Color 可從照片提取調色盤，但需要 Adobe 帳號，會將圖片傳送至 Adobe 伺服器，且不提供附放大鏡的單像素取色；它是調色盤工具，而非滴管。Canva 的取色器內建於 Canva 編輯器，僅適用於 Canva 專案內的圖片。macOS 數位色彩測量儀和 Windows PowerToys 色彩選擇器適用於螢幕取樣，但無法從檔案提取調色盤。本工具是唯一集放大鏡、螢幕滴管、16 色記錄和調色盤提取於一身的免費全客戶端工具 — 無需帳號、無廣告、不上傳檔案。