圖片取色器
點選圖片取得色碼，或從主要配色挑選顏色。
靜態 JPG、PNG、WebP，單張 10 MB、1200 萬像素以內。圖片不會上傳。
如何取得圖片色碼？
- 選擇一張 JPG、PNG 或 WebP 圖片。
- 點選圖片上的位置，或輸入從 0 開始的 X、Y 像素座標。鍵盤聚焦圖片後可用方向鍵移動取色點。
- 查看 HEX、RGB、HSL 與不透明度，按對應的複製按鈕。
- 也可選取主要配色，或複製全部配色作為設計參考。
第一次想核對結果，可下載本站自製的紅色色塊 PNG，在 X＝64、Y＝64 與 X＝192、Y＝64 取色，再對照下方的完整格式範例。
色碼與配色的差別
點選取色會讀取瀏覽器解碼後的原尺寸像素。主要配色則從縮圖取樣、合併相近顏色，忽略透明及半透明像素；結果可能少於 8 色，不代表精確的像素占比。
半透明像素會以含透明度的 HEX、RGBA 與 HSL 表示。完全透明的像素沒有可見顏色，瀏覽器讀出的 RGB 可能為零。
圖片色彩描述檔、瀏覽器與螢幕顯示可能影響結果。本工具不提供印刷 CMYK、實體顏料或經校正的色彩量測。
圖片與隱私
取出的色碼沒錯，為什麼放進設計稿又不像
回到工具先選對色碼格式，再談顏色像不像
看到一張配色喜歡的圖片，想替自己的簡報挑背景，點一下就會出現 HEX、RGB、HSL。這些不是三份不同答案。像 #FF0000 是 HEX 的紅色，RGB 可寫成 255、0、0，HSL 則以色相、彩度和明度描述。先看設計軟體要哪一種格式，使用時就不必自己猜著換算。
初次使用時，可以先點一個大面積、顏色較均勻的位置，看看對應數值，再換到另一個位置比較。複製時選目標軟體需要的格式即可。若欄位要求 HEX，確認是否接受前面的井字號。若要求 RGB，則依它的欄位安排輸入各項數值，不必把不同寫法都貼進同一欄。
把色碼貼到設計稿後，先在相同背景下觀察，再判斷是否接近預期。工具讀取的是圖片中選到的位置，不會自動知道你想找的是衣服本色、光影顏色，還是原始設計指定的品牌色。
用這張紅色色塊，核對座標與透明資訊
下載下方 256 × 128 像素 PNG 後，放進上方工具。它是本站自製的固定色塊，不含色彩描述檔。左半 RGB 為 255、0、0，Alpha 通道值為 255（不透明）；右半 RGB 相同，Alpha 通道值為 128。X、Y 都從 0 起算，先輸入 X＝64、Y＝64，再換成 X＝192、Y＝64，按「依座標取色」。
左半得到不透明紅，右半則會多出透明資訊。#FF000080 最後的 80 是十六進位的 128，128 ÷ 255 約為 0.502，因此 RGBA 和 HSL 顯示 0.502，畫面上的不透明度則四捨五入為 50%。兩邊的紅色數值相同，右半看起來較淡是因為混合了底色。
這組結果用來核對格式與座標，不代表其他照片也會有相同色值。請下載原 PNG，不要另存螢幕截圖或改成 JPG，否則透明資訊或像素可能改變。主要配色會略過半透明像素，本例右半要用座標取色查看。
| X、Y 座標 | HEX | RGB／RGBA | HSL |
|---|---|---|---|
| 64、64 | #FF0000 | rgb(255, 0, 0) | hsl(0 100% 50%) |
| 192、64 | #FF000080 | rgba(255, 0, 0, 0.502) | hsl(0 100% 50% / 0.502) |
- 下載紅色色塊原 PNG（256 × 128）本站自製素材，兩個座標都在色塊內部。請以原檔測試，不使用截圖。
照片裡的一件衣服，可能有很多種藍
同一件藍色外套，靠窗那側和背光那側取出的色碼不同，很容易讓人懷疑是不是點錯了。實際上，照片把光線與陰影也記進去了，衣服並不是每個像素都相同。取樣位置越靠近邊緣，也越可能混入背景或壓縮造成的顏色。
想找能代表整體感覺的顏色，可以在幾個內部位置比較，而不是只點一次邊緣。文字、Logo 和線條的邊緣也可能和背景混色，取到的數值不一定等於中央填色。截圖經過縮放或壓縮後，顏色也可能和原始設計稿不同。
如果要做的是照片延伸配色，可以選符合畫面氣氛的色值，不必追求一個不存在的唯一答案。若任務是套用公司的正式品牌色，就回到品牌規範找指定數值。把參考圖片、取樣位置與正式色分開記錄，後續修改時比較不會混淆。
透明圖換了底色，外觀也會變
白底上看起來淡淡的灰，放到深色背景卻幾乎消失，問題可能不在 RGB，而在透明度。半透明像素會和底色共同形成外觀，只抄色碼可能漏掉重要資訊。完全透明的位置沒有可見顏色，也不能拿它來推斷原本的背景。
將同一個半透明色放到白底和深色底，看到的效果可能不同，這不一定代表軟體轉換錯誤。套用色碼時也要一併記下不透明度，避免漏掉原圖的透明資訊。
可以用預定版面的底色做一塊測試區，把色值與不透明度一起套用，再看結果。如果要做完全不透明的按鈕，就明確改成不透明並重新確認顏色。
找一個小圖示，別只看整張主要配色
假設照片大部分是天空，角落有一個你想取色的招牌。主要配色列出藍色並不意外，因為它是從縮圖取樣、合併相近色，協助看整體方向。要確認招牌某處的確切顏色，應直接使用單點取色。兩者回答的問題不同。
主要配色適合用來挑背景或整理色票靈感，單點取色則用來核對某個位置。配色清單的排序也不應拿來寫精確百分比，因為它不是逐色面積報告。
挑好幾個色票後，可以先試著分配用途：哪個作背景、哪個放標題，哪個只用在小範圍。若每個顏色都占很大面積，原本在照片裡和諧的配色也可能變得吵雜。色票清單提供起點，實際面積仍要由版面決定。
把色票放進版面，才知道合不合用
色碼貼進設計稿後，還有一個比顏色像不像更實際的問題：讀者看不看得清楚。照片中的淡色拿來做大背景可能舒服，拿來寫小字卻未必容易讀。先把它套進真正的字級和背景，再檢查對比。這個取色工具沒有提供印刷色或實體顏料校正。
交付設計時，除了色碼，也可以記下使用的位置和是否含透明度，避免對方只拿到數字卻不知道怎麼套用。螢幕顏色和印刷、布料或實體顏料不是同一種量測，需要準確實體輸出時，應依相應的設計與製作流程確認。
手機或電腦看起來有差異時，先確認兩邊使用的是相同圖片、色碼與透明度，再考慮顯示環境。不要為了讓某一台螢幕看起來相同，就隨意改掉原本已確認的正式色值。