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