什麼是圖片取色器?
圖片取色器讓你從任何圖片上「吸」出精確的顏色:上傳圖片後,在畫面上點一下,就會顯示該像素的 HEX 與 RGB 色碼,還會自動萃取整張圖的主要色盤。全程在你的瀏覽器本機完成,圖片不會上傳。
如何使用
- 把圖片拖進上傳區,或點擊選擇檔案。
- 在圖片上點你想取色的位置,右側即顯示 HEX 與 RGB。
- 下方色盤列出圖片的主要顏色,點色塊或按鈕即可複製色碼。
使用情境
為什麼吸到的顏色和你「看到的」不一樣?
你從一張照片吸出某個像素的色碼,貼進設計稿卻覺得「怎麼有點不一樣」?這通常不是工具吸錯,而是幾個容易忽略的環節。第一,JPG 是有損壓縮:它在色塊邊緣和漸層處會產生你肉眼難察覺的雜色,單一像素的 RGB 可能就落在這種雜訊上,取相鄰幾點會發現值一直在跳。想吸「這一區的代表色」,用下方自動萃取的主要色盤會比戳單點更穩,因為它是統計一整片後的平均。第二,螢幕的色彩描述檔(sRGB / P3)與你設計軟體的設定不同,同一組 RGB 顯示出來也會有差。所以吸色最適合抓「精確的數值起點」,細部再由你微調。拿到 HEX / RGB 後,要換成 HSL 或做出漸層,接著用色彩轉換器與 CSS 產生器。
取色準不準,怎麼驗?
用一張答案已知的圖。我們測試語料庫裡的插畫是腳本畫的,六個顏色事先就寫下來:#fdf3e3 #f4a261 #2a9d8f #264653 #e76f51 #e9c46a。丟進這一頁回傳 #fdf3e3 #f4a261 #2a9d8f #264653 #e9c46a #e76f51 #fcedda #f6ba88 —— 已知顏色命中 6/6,另外多兩個色塊,那是反鋸齒的邊緣像素,不是錯誤。這也回答了「為什麼我點一個像素,回來的顏色不在設計稿裡」:邊界上圖形顏色和背景是混在一起的。