什麼是圖片取色器？

點擊圖片即可擷取精確的色值。調色盤會自動填入圖片的主色,放大鏡協助你選到正確的像素,每個顏色都同時提供 HEX、RGB、HSL、HSV、CMYK,以及最接近的色名。可將取樣顏色存入調色盤並匯出。

圖片載入後，工具會取出其中最常見的六種顏色，直接放入調色盤，讓你在點擊之前就有一組起始色。放大取色鏡會顯示游標下的單一像素，便於精準選中想要的色調，而非帶抗鋸齒的相鄰像素。你點擊的每種顏色都會給出 HEX、RGB、HSL、HSV、CMYK 數值，以及最接近的 CSS 命名顏色，並加入調色盤，可複製為 HEX 清單，或匯出為 JSON 或 CSS 變數。還有一個視覺預覽，可讓圖片透過常見的色盲濾鏡顯示，方便你在使用過程中檢查無障礙效果。

使用方法

1. 步驟一 — 上傳任意圖片（PNG、JPEG、WebP、GIF），圖片將載入帶縮放放大鏡的互動式畫布。
2. 步驟二 — 點擊圖片上的任意位置進行取色，放大鏡會放大游標下方區域以便精準選色。
3. 步驟 3 — 任意複製 HEX、RGB、HSL、HSV 或 CMYK 的數值,亦可參考色塊下方的最接近色名。調色盤會保留每次點擊,再加上六種自動辨識的起始色,一鍵即可匯出。

何時使用

• 從截圖或設計稿中取出品牌色,精準還原配色。
• 對著參考照片建立調色盤,用於設計專案的配色。
• 辨識競爭對手 Logo 或網站主視覺的確切顏色值。

結果

一位設計師上傳一張自然風光照片，擷取山間湖泊的精確藍綠色。他點擊水面，取得 #2E8B8C，並將其與同一張照片中的另外三種顏色一同加入色盤。

常見問題

為什麼取出來的顏色跟 Photoshop 顯示的有些微差距?

多數瀏覽器在載入圖片時會轉成 sRGB。若原圖標記為 Adobe RGB 或 Display P3,這裡取到的值就是 sRGB 等價。若要完全一致,請先把原圖匯出成 sRGB 再上傳。

放大鏡顯示的是單一像素還是整片區域的平均?

放大鏡採樣的是十字游標正下方那一個像素,周圍像素只是讓你看清前後關係。在放大鏡內點擊即可鎖定該像素值,邊緣抗鋸齒過渡色就不會誤導你。

PNG 透明區域也能取色嗎?

可以。透明像素會回傳它原本的 RGB 值,並另外顯示透明度。完全透明的點會落在畫布底色(預設白色)上,因此建議點不透明區域以取到正確顏色。

HEX、RGB、HSL、HSV 與 CMYK 有什麼差別——該用哪一個?

HEX(#2E8B8C)是 CSS 與設計工具中最短的寫法。RGB 提供 0–255 的三通道數值,適合在程式中需要原始數字時使用。HSL 用色相、飽和度、亮度描述顏色,想讓色彩稍微變亮或更飽和時最直觀。HSV 與 HSL 相近,但用 value(明度)取代亮度,多數設計軟體的取色器較偏好 HSV。CMYK 給出印刷四色百分比,正是印刷廠或設計師所需的格式。

一次可以取多種顏色嗎?

每次上傳都會用圖片的六種主色預先填入調色盤，之後每次點擊都會在集合中再加入一個取樣。調色盤面板會顯示所有取樣的顏色，並讓你複製任意色塊、一次複製全部 HEX 代碼、刪除個別項目，或將整組匯出為 JSON 檔案或可直接貼上的 CSS 自訂屬性。

相關工具