什麼是圖片取色器?
上傳任意圖片,工具會自動擷取其中的主色調,生成可直接使用的調色盤。每種顏色都附帶 HEX、RGB 和 HSL 色值,方便直接用於設計。
工具讀取圖片的像素資料,用中位切分演算法把顏色分群(早期 GIF 調色盤用的也是這個方法)。一次可以抓 3 到 12 個色塊,每個都附 HEX、RGB、HSL 三種格式。支援 JPG、PNG、WebP。
使用方法
- 將任意圖片(JPG、PNG、WebP)上傳或拖放到工具區域。
- 工具會即時擷取主要顏色,並以色板和色塊的形式展示。
- 點擊任意色塊,即可將其 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、設計稿、客戶照片這類無法外流的圖也安心。