跳至主要內容
SPCXTools

圖片選色器

點擊圖片任一處即可取得精準的 HEX、RGB 與 HSL 色碼,還能自動產生主要色彩調色盤。

本機執行 — 檔案絕不會離開您的裝置

正在載入工具…

如何使用 圖片選色器

  1. 1選擇圖片、將圖片拖曳至頁面中,或使用 Ctrl+V (Mac 為 ⌘+V) 貼上螢幕截圖。
  2. 2將游標移至圖片上方,放大鏡會顯示游標所在位置的精準像素。
  3. 3點擊選取顏色。右側會顯示該顏色的 HEX、RGB 與 HSL 色碼 — 點擊 複製 即可使用。
  4. 4透過 主要色彩 調色盤取得圖片的代表色,或在 已選顏色 中找回先前選取的色彩。

從任何圖片精確擷取顏色

您在照片、網站截圖、Logo 或設計稿中找到了喜歡的顏色,現在需要它的色碼。這款圖片選色器就像是專為圖片設計的滴管工具:開啟圖片,點擊任一像素,即可取得 HEX、RGB 和 HSL 色碼,方便直接貼上至 CSS、Figma、Photoshop、Canva 或 PowerPoint。放大鏡功能會顯示游標下方的像素,讓您精準點擊正確位置,同時還會自動產生該圖片的主要色彩調色盤。

功能特色

  • 滴管工具支援瀏覽器可開啟的任何圖片格式:JPG、PNG、WebP、GIF、SVG、AVIF 和 HEIC。
  • 放大鏡可逐像素放大游標下方的區域。
  • HEX、RGB 和 HSL 色碼提供一鍵複製按鈕。
  • 主要色彩調色盤會從整張圖片中自動擷取。
  • 選色紀錄最多可保留 16 種顏色,方便您比較與回溯。
  • 貼上截圖:支援直接從剪貼簿貼上。
  • 完全隱私:圖片絕對不會離開您的裝置。

我該使用哪種色彩格式?

格式 範例 適用範圍
HEX #1E90FF CSS、HTML、Figma、Canva 及多數設計工具
RGB rgb(30, 144, 255) CSS、Photoshop、Office 軟體、程式開發
HSL hsl(210, 100%, 56%) CSS,用於需要調整亮度或飽和度時

若要將擷取到的顏色轉換為 CMYK 或 HSV 等其他格式,或是檢查其與黑白文字的對比度,請在色彩轉換器中開啟。

應用情境

統一品牌色彩:從公司 Logo 或網站截圖中擷取精準的藍色,保持簡報視覺一致。

建立調色盤:以相片的主要色彩為基礎,作為網站、海報或簡報主題的設計起點。

網頁開發:從圖片格式(而非設計原始檔)的設計稿中擷取顏色。

數位藝術與手工藝:從參考相片中找出色碼,應用於繪圖軟體、刺繡或編織圖案。

取得精準結果

請選擇手邊尺寸最大、壓縮程度最低的圖片版本:PNG 截圖能保留精準色彩,而 JPG 相片在邊緣處可能會有些微色差。請使用放大鏡放大圖片,並避開像素會混合兩種顏色的反鋸齒邊緣。如果您只需要大圖的某個部分,可以先使用 裁切圖片 功能,後續操作會更方便。

常見問題

如何找出圖片中顏色的 HEX 色碼?
在此工具中開啟圖片,然後點擊您感興趣的位置。HEX 色碼(例如
我可以從螢幕截圖中擷取顏色嗎?
可以。像平常一樣截圖後,在此頁面按下 Ctrl+V(Mac 上為 ⌘+V)直接貼上,無須先存成檔案。
主要顏色是如何計算出來的?
本工具會對縮小後的圖片進行取樣,將相似的顏色分組並列出最常見的顏色。同時會略過幾乎相同的顏色,讓色板呈現出分明的色調。
為什麼擷取到的顏色與原始設計略有不同?
存成 JPG 格式的圖片經過壓縮,會使顏色產生些微偏移,特別是在邊緣處。螢幕截圖也可能受到顯示器色彩描述檔的影響。若要取得精確的品牌顏色,請從 PNG 圖片中擷取,或查看原始設計檔。
我的圖片會被上傳嗎?
不會。圖片完全在您的瀏覽器中開啟與讀取。沒有任何資料會傳送到伺服器,因此您可以安心用於私密截圖與未公開的設計。
可以在手機上使用嗎?
可以。輕觸圖片即可擷取顏色。當您觸碰圖片時,放大鏡會跟著您的手指移動。