什麼是圖片取色器?

上傳任意圖片,工具會自動擷取其中的主色調,生成可直接使用的調色盤。每種顏色都附帶 HEX、RGB 和 HSL 色值,方便直接用於設計。

工具讀取圖片的像素資料,用中位切分演算法把顏色分群(早期 GIF 調色盤用的也是這個方法)。一次可以抓 3 到 12 個色塊,每個都附 HEX、RGB、HSL 三種格式。支援 JPG、PNG、WebP。

使用方法

  1. 將任意圖片(JPG、PNG、WebP)上傳或拖放到工具區域。
  2. 工具會即時擷取主要顏色,並以色板和色塊的形式展示。
  3. 點擊任意色塊,即可將其 HEX、RGB 或 HSL 格式的色值複製到剪貼簿。

何時使用

  • 做設計前,從靈感圖裡撈配色,直接套用到網頁或印刷稿。
  • 客戶沒給品牌色票時,用既有圖片反推主色調。
  • 從主視覺照片裡挑出 PPT 或報告的點綴色。

結果

一位網頁設計師上傳了一張日落照片,擷取出 6 種顏色的調色盤:深橘色 #E8751A、珊瑚粉 #F2937C、天藍色 #6BA3C7、金色 #D4A843、暖奶油色 #FFF0D4 和深紫色 #3B2156。這些精確色值隨後直接用到了網站設計中。

常見問題

工具是怎麼判斷「主色」的?
它把所有像素歸到顏色桶裡,保留像素數最多的幾個桶。所以小而鮮豔的高光會輸給大片但暗沉的背景。想改抓這些亮點,把提取模式切到「鮮豔」就行。
同一張圖每次抓出來的顏色為什麼會略有不同?
為了速度,聚類做了少量隨機抽樣,複雜照片上挑中的像素會偏移。重複執行通常結果接近。色塊數量設少一點結果也會更穩定。
可以抓多於或少於 6 個顏色嗎?
可以。用數量按鈕在 3 到 12 之間切換。色塊少看整體氛圍;色塊多能看到細微變化,適合多色插畫或還原漸層。
HEX、RGB、HSL 三種格式我該選哪一個?
寫 CSS 或開設計軟體用 HEX;需要精確通道值(SVG、canvas)選 RGB;想做數學化調色——例如把 L 值拉高得到淺色——用 HSL。
圖片會被上傳到伺服器嗎?
不會。圖片在你的瀏覽器裡解碼分析,完全不上傳。分析 logo、設計稿、客戶照片這類無法外流的圖也安心。

相關工具