圖片與色彩

從截圖取色後,怎麼避免顏色看起來不一致?

截圖取得 HEX 後,先排除邊緣混色、縮放、壓縮與透明疊色,再統一顏色格式並回到實際使用位置驗收。

撰文: 3sec 編輯部 3 分鐘閱讀 1365 字

從截圖取到顏色後覺得「不像原本那個藍」,先別急著重調色相。先確認取色點、截圖是否被縮放或壓縮,再把色碼統一成可比較的格式;數值一致與肉眼觀感一致是兩道不同的檢查。

先取純色區,不要從文字與圓角邊緣猜

截圖取色最常見的錯誤,是吸到已與周圍像素混合的邊緣。先用操作系統、設計軟體或瀏覽器開發者工具的吸管功能取得六位 HEX,並在平坦色塊中間連續取幾個點。ToolboxHub 這個頁面不會讀取截圖像素,也不是圖片吸管。

例如要核對網站的藍色主按鈕,截圖上同時有白字、陰影與圓角。在字體邊緣取到的像素,可能是白色與藍色的平滑混色;在圓角取色,則可能混入底下的背景。放大後改取按鈕中央,再把三個點的結果與 CSS 變數或設計稿數值對照,會比只取一點可靠。

把候選色碼放進顏色選擇器統一格式

取得候選 HEX 後,再用 HEX、RGB、HSL 顏色選擇器 把同一個顏色轉成團隊需要的表示法。頁面接受瀏覽器顏色控制項或六位 HEX,會顯示 RGB、HSL、HSV 與公式換算的 CMYK,也會產生互補、類比與三等分配色候選。

這一步解決的是「大家是否在說同一個數值」。設計師交付 #2563EB,開發者使用 rgb(37, 99, 235),換算後相等,就應把排查重點轉向截圖處理、元件狀態與顯示環境。這個工具不識別 ICC 設定檔、不計算兩色的視覺差異,也不能把公式 CMYK 當成印刷打樣結果。

數值不同時,回頭找縮放、壓縮與透明疊色

同一區域連續取色卻得到多個數值,應先比較原始檔與收到的截圖。聊天軟體重新縮放、JPEG 壓縮、瀏覽器縮放比例與二次截圖,都可能讓細字、漸層和高對比邊界出現新的像素。若只拿得經過聊天軟體的圖,記錄中就要標明「取自二次截圖」,不把它寫成設計原檔的精確色。

透明度也常被忽略。半透明藍色疊在白底與灰底上,最後截到的像素本來就不同;陰影、濾鏡、停用狀態與滑過狀態也會改變結果。若圖片曾用 圖片壓縮工具 產生新副本,要將壓縮前後分開比較;壓縮頁面不能還原已經改變的像素。

數值相同但觀感不同,到真正使用位置驗收

若 HEX 與 RGB 已對上,就不要為了追一張截圖而盲目改品牌色。先確認元件用的是正常、滑過還是停用狀態,再在目標瀏覽器、實際背景與真實亮度下查看。兩台顯示器的亮度、白點、色域與環境光不同,不能因為肉眼覺得一台偏灰,就推論 CSS 色碼錯了。

需要從整張圖找主色時,可用 圖片色票擷取器 產生一組候選色,但那是對整張圖的像素分群,不會回傳指定位置的精確單一像素。交付時應同時留下來源、色碼、使用狀態與驗收環境,而不是只貼一塊顏色。

交付前做一次可重現的顏色檢查

最後驗收要讓另一個人可以照著重做。保留原始截圖,在純色區取多點,再把候選色碼與設計變數、CSS 或原始素材對照。

  • 記錄截圖是原檔、聊天預覽還是二次截圖。
  • 避開文字、圓角、陰影、漸層與透明區邊緣。
  • 以六位 HEX 統一交接,並確認 RGB 換算對應。
  • 在實際元件、背景、狀態與目標裝置重看。
  • 印刷案另按供應商要求使用設定檔與打樣,不以網頁 CMYK 公式當定稿。

常見問題

ToolboxHub 可以直接上傳截圖取色嗎?

不可以。當前顏色選擇器只接受瀏覽器顏色控制項或六位 HEX,再換算其他格式與配色候選;截圖像素要先由外部吸管功能取得。

為什麼按鈕邊緣取到的色比較淡?

邊緣常混入抗鋸齒、圓角底色、文字或陰影。放大後在中央平坦區取多點,再與原始變數比較。

HEX 一樣,兩台電腦看起來不同正常嗎?

可能正常。先確認瀏覽器與元件狀態相同,再檢查顯示器亮度、系統設定與環境光;同一數值不代表每台裝置的肉眼觀感完全相同。

從 JPEG 截圖取色能當品牌色定稿嗎?

不適合。JPEG 壓縮與後續縮放可能改變邊界像素,應優先查 CSS、設計變數或原始素材,截圖只當核對線索。

顏色選擇器的 CMYK 可以直接送印嗎?

不可以直接當印刷定稿。頁面顯示的是公式換算,不知道紙材、油墨、印刷機與供應商設定檔;正式交付前仍要按印務規格轉換與打樣。