跳至主要內容

實用工具

圖片取色器・配色擷取

從圖片擷取5~10個主色,顯示各色占比%、HEX/RGB/HSL色碼與最接近的顏色名稱。

把圖片拖曳到這裡

JPG、PNG、HEIC、WebP · 也能用Ctrl+V貼上

圖片不會上傳到伺服器,全程在瀏覽器內處理。

這個線上圖片取色器只要一張照片:自動擷取5、6、8或10個主色,標出每個顏色在畫面中的占比(%),並列出HEX、RGB、HSL色碼。所有處理都在瀏覽器內完成,圖片不會傳到伺服器。支援JPG、PNG、HEIC、WebP,可選擇檔案、拖曳進來或用Ctrl+V貼上。

只想查某個點的顏色?直接點一下圖片上的位置,就像滴管一樣取色,而且會取周圍3×3像素的平均值,不會被單一雜色像素干擾。取到的顏色同樣顯示HEX、RGB、HSL,點色碼就能複製;也能一次複製整組配色的HEX,查詢Logo或螢幕截圖的色碼很方便。

和只給色碼的工具不同,這裡會替每個顏色對應色碼表52種命名顏色中最接近的一個,一眼看出那抹藍比較像海軍藍還是藍綠色,還能點進該顏色的頁面看相近色。占比%讓你分辨哪個是主色、哪個是點綴色,做網頁、簡報或情緒板時,連配色比例都能參考。

主色怎麼算?先把圖片長邊縮小到200像素,再用中位數切割法(median cut)的變體把相近顏色分群,每一群的平均色就是一個主色。結果可存成1200×630的PNG配色卡,含色帶、HEX色碼與占比,方便分享或貼進設計稿。

常見問題

  • Q. 怎麼擷取圖片裡的顏色?

    A. 把照片拖曳到本頁或點選檔案,再從5、6、8、10個中選擇主色數量,配色立刻產生。每個顏色都會顯示占比%與HEX、RGB、HSL色碼,點一下就能複製。支援JPG、PNG、HEIC、WebP。

  • Q. 圖片會上傳到伺服器嗎?

    A. 不會。圖片的讀取與分析全部在瀏覽器內完成,不會傳送到任何伺服器。用Ctrl+V貼上的螢幕截圖也不會離開你的裝置。

  • Q. 怎麼查詢圖片中某一點的顏色?

    A. 點一下想查的位置即可。工具會取該點周圍3×3像素的平均色,顯示HEX、RGB、HSL色碼與最接近的顏色名稱,即使是有壓縮雜訊的圖片,數值也很穩定。

  • Q. 顏色旁邊的百分比代表什麼?

    A. 代表這一群顏色在圖片中所占的比例。工具先把圖片長邊縮到200像素,用中位數切割法的變體把相近顏色分群,再依每群大小換算成%。數字越大就是越主要的顏色。PNG Logo的透明背景等透明像素不列入計算,所以占比只依可見部分計算。

  • Q. 擷取的配色可以存成圖片嗎?

    A. 可以。存檔後會得到1200×630的PNG,包含色帶、HEX色碼與占比,尺寸適合社群分享圖和簡報。也能一次複製全部HEX色碼。