圖片取色線上免費
把照片拖進來，用放大鏡對準，複製 HEX、RGB 或 HSL。平面標誌用一個像素。照片可以先平均一小塊。手機上請放大，再對準手指上方。檔留在這個分頁。
拖一張照片來做圖片取色
JPG、PNG、WebP、GIF、BMP 或 AVIF. 一個檔案小於 40 MB。用 Ctrl+V 或 ⌘V 貼上截圖。
100% 隱私：像素留在這個瀏覽器。沒有上傳。
在照片上移動。放大鏡是真實像素。點一下鎖定。在手機上，對準手指上方。
這個檔裡的顏色
鎖定過的顏色
只有 Chrome 和 Edge。讀的是螢幕，不是上面那個檔。
100% 本機
取色器在這個瀏覽器跑。照片不會離開這個分頁。
不上傳
讀一個像素或組調色盤，都不會把檔送到伺服器。
免費、免帳號
不用註冊，色碼上也沒有浮水印。複製 HEX、RGB 或 HSL。
什麼是圖片取色
圖片取色做的事很窄：讀你已經有的檔裡某一個點的顏色，把色碼交出來。搜尋會寫成圖片取色器、圖片色碼查詢、線上取色器或取色器線上，工作仍是同一件事。靜態圖進來，色碼出去。它不是圖片搜尋，不會拿一個顏色去找相似的照片。它也不是濾鏡，不會把檔改成另一張圖再讓你下載。取色器就在這個分頁裡跑，不開帳號，不收費，色碼上也不蓋浮水印。你帶走的是寫法：HEX、RGB 或 HSL。三組是同一個點，只是下一個軟體要的拼法不同。CSS、HTML 或 Figma 要哪一種，就複製哪一種。點下去之前，放大鏡先讓你看見即將鎖定的那一格，以及它四周的像素。平面填色就留在 1 px。你若知道照片噪點多，就改 3×3 或 5×5。這個選擇是你的，不是模型替你配的，也沒有要先登入才能打開的色票庫。
很多人要的取色工具其實在看螢幕。取色器chrome 就是這種搜尋：想裝擴充功能，去吸螢幕上的一點。這一頁不用裝擴充功能，也不用另開 Windows 程式。Photoshop 和 Word 裡那個按鈕叫滴管，它只在已經打開的文件裡取樣。下載資料夾裡的 PNG，你沒先丟進那些軟體，它碰不到；沒有螢幕取色介面的瀏覽器也吸不到螢幕。這裡換一條路。瀏覽器把你的檔畫上畫布，取色器讀的是那塊畫布。你可以貼上截圖，也可以把檔拖進框。網址不收。別站代管的圖，這個分頁通常讀不到，而這一頁不會把檔上傳到伺服器去代抓。HEIC、TIFF、PDF 同樣拒收，因為它們不是這一頁能解的照片像素。一次一張。沒有多張一起排的清單，也不會把一整個資料夾的色碼一次匯出。要下一張，先換圖。
一個像素，在平面標誌或按鈕的填色上是對的讀法。在照片上常常是錯的。JPEG 把畫面切成區塊來存，相機雜訊讓鄰近的點彼此不合，字母和形狀的邊緣又做了防鋸齒，眼睛卻把那一小圈看成同一個顏色。3×3 與 5×5 就是把指標周圍那一塊平均，色碼才靠近你看見的。放大鏡畫的是檔案裡的真實像素，正中間那一格有標出來，指標或手指不會把那個點藏住。動畫 GIF 只取第一幀，後面的幀可以是別的顏色，頁面不會改去讀後面。檔的寬若超過 2,000 px，取樣改用一份 2,000 px 的複本，色碼對的是複本，頁面會把這件事寫出來，不會假裝你點到的是未縮小的原檔。符合、2×、4× 只改變你怎麼瞄準。放大不會把防鋸齒的邊緣變成純色，色碼仍來自檔案裡的像素。
HEX、RGB、HSL 是同一個顏色
複製下一個軟體要的寫法。下面三組色碼描述的是同一個鎖定的像素。不要混著貼。同一點的三組可以互相對照，但下一個欄位通常只收一種。
| Format | Example | Use |
|---|---|---|
| HEX | #1A73E8 | CSS、HTML、Figma，以及大多數設計工具。# 後面六位。 |
| RGB | rgb(26, 115, 232) | 同一個顏色，紅、綠、藍各從 0 到 255。 |
| HSL | hsl(214, 82%, 51%) | 色相、飽和度、亮度。要再調亮一階或暗一階時比較好改。 |
這裡做得到的事
一個檔、一個放大鏡、一段縮放、一種取樣大小，加上可以複製的色碼。調色盤同時留大面積和比較搶的顏色。
真實像素的放大鏡
格子跟著指標走，畫出檔案裡 11 乘 11 的一塊，不是預覽被拉大後的糊圖。正中間那格，就是你即將鎖定的像素。方向鍵一次移動一個像素。按住 Shift 移動十個。你要核對的是這一格的色，不是被插值抹平的預覽。11 乘 11 看得到 5×5 平均會吃進去的鄰居，還有外圈一點餘裕，鎖之前就知道那一塊乾不乾淨。
符合、2× 或 4×
符合顯示整個檔。2× 和 4× 把畫面放大，小記號比較點得到。拖已經放大的檔來移動，再點一下或放開來鎖定。放大鏡仍讀檔案自己的像素。縮放只是讓你瞄準，不會把色碼改成螢幕上被放大後的樣子。
1 px、3×3 或 5×5
1 px 是單一像素，給標誌和平面介面。3×3 和 5×5 把周圍那一塊平均，給相鄰像素不一致的照片。區塊裡的透明像素會跳過，不算進平均，所以 PNG 的空角落不會把色碼拉淡。若 5×5 吃進了陰影或高光，退回 3×3。不要一覺得不對就跳回 1 px，那只是把雜訊原樣抄出來。
HEX、RGB、HSL，和一個最接近的名稱
鎖定後可以複製 HEX、RGB 或 HSL。名稱是依 RGB 距離挑出的英文 CSS 色名，例如 steel blue 或 tomato。那不是包裝上印的中文品牌名。把名稱打進 CSS，也不會回到同一個 HEX。要交出去的是色碼。
這個檔的調色盤
最多八個色塊，把最大的平面區域和比較飽和的顏色混在一起，小標誌才不會被白底埋掉。點一個色塊就鎖定它。幾乎重複的棕色會略過。這仍不是品牌規範，也不是人工智慧配出來的調色盤。搜尋裡的調色盤 圖片，在這一頁就是這八塊，不是另一套配色教學。
怎麼做圖片取色
加上檔、對準、鎖定、複製。預覽就是檔案本身。沒有第二步轉換。
加上照片
把 JPG、PNG、WebP、GIF、BMP 或 AVIF 拖進來，或貼上截圖。像素在這個分頁裡解碼。一次一張。SVG 要先匯出成 PNG。HEIC、TIFF、PDF 和網址會被拒絕，請先存成這一頁打得開的檔。
對準並鎖定
平面填色用 1 px，照片用 3×3 或 5×5。點一下鎖定。記號小時，手機先用 2× 或 4×。取樣在手指上方。放開才鎖定。
複製色碼
複製 HEX、RGB 或 HSL。若你要的是一個檔而不是一串色碼，可以下載該顏色的平面色塊 PNG。這一頁到這裡就結束，不會順便改照片。
為什麼你看到的顏色和像素不一致
落差在檔案裡，不在那一下點擊。這一頁就是要把這些情況攤開給你看。先看邊緣、壓縮、描述檔和手指，再決定這組色碼能不能交出去。
字的邊緣不是填色
防鋸齒沿每一條邊把填色和背景混在一起。點在那圈毛邊上，會得到第三種顏色。對準平面區域的中間，並用 1 px。標誌的外圍一圈幾乎都是這種混色。
JPEG 是一塊一塊存的
JPEG 不會把平滑的天空存成一個色碼。相鄰像素會跳。1 px 的讀數會跟著你的移動改變。5×5 的平均比較接近眼睛說的那個顏色。這不是取色器算錯，是檔案本來就沒有單一色碼。
截圖早就被壓縮過
如果圖是聊天軟體或截圖工具存的，原本的品牌色可能已經不在像素裡。這一頁回報的是你加進來的那個檔。像素裡沒有的色碼，它補不回來，也不會拿別張圖來猜。
手指蓋住像素
在手機上，取樣點在手指上方，放大鏡顯示的就是那些像素。放開才鎖定。記號很小就用 2× 或 4×，把圖拖到放大鏡對上它。滑鼠太粗時，方向鍵一次移動一個像素。
色彩描述檔不是像素數字
檔案若帶著 Display P3 或印刷描述檔，Photoshop 對同一個點可能顯示另一組 HEX。這一頁讀的是瀏覽器解碼後的 sRGB 像素，也就是要貼進 CSS 和 Figma 的那個數字。它不能把這個數字變成印刷打樣，也不能把已經拍下螢幕的截圖還原成描述檔裡的原色。
先別急著信這組色碼
- 標誌請點平面形狀的中間。邊緣是混色。
- 照片先用 5×5。只有要一個精確像素，例如一顆 LED，才降到 1 px。
- 同一片天空點兩次得到兩個 HEX，那是檔案本身。用 5×5 平均，不要去找一個符合記憶的像素。
- 最接近的名稱可能把品牌藍叫成 steel blue。把 HEX 貼進設計工具。不要把這個英文名稱貼進 CSS，然後指望顏色一樣。
- 動畫 GIF 用第一幀。後面的幀可以是另一個顏色。
- iPhone 的 HEIC 在這裡打不開。先匯出 JPG 或 PNG。
- 這一頁不編一組印刷 CMYK。螢幕像素換算成油墨，不是印刷打樣。
- Photoshop 若顯示另一組 HEX，檔案可能帶著色彩描述檔。這一頁回報瀏覽器解完的 sRGB，不是描述檔裡的數字。
這一頁真正做完的三件事
每張卡片都是你已經有的檔、一種取樣設定，以及那次讀取的限度。
給樣式表用的標誌
你有一張標誌 PNG，要的是填色寫進 CSS。標誌常常有一圈發灰的邊。中間那塊穩定的填色，寫進樣式表才不會把混色當成品牌色。
檔案: 一張 PNG，或已匯出成 PNG 的 SVG，裡面是平面的品牌形狀。
設定: 1 px，對準填色的中間。
你複製的: HEX，貼進 CSS 或 Figma。
限度: 防鋸齒的外圍是另一組色碼。不要點邊緣。
某個網站的截圖
你看得到按鈕的顏色，但打不開樣式表。截圖是你僅有的來源時，把它當成螢幕上的結果，而不是設計稿裡的原始色票。
檔案: 從剪貼簿貼上的截圖。
設定: 1 px，點按鈕的平面部分，不是邊框。
你複製的: HEX 或 RGB。
限度: 截圖的壓縮，以及拍攝時的螢幕，可能已經把色碼帶偏。
一張商品照
你要一個能用的底色，不是一顆有雜訊的像素。商品照的單點會跳。平均一小塊材質，比較適合拿去做背景的淡色，而不是拿去當標誌的精確色。
檔案: 商品的 JPG。
設定: 5×5，點在材質上，避開高光和陰影。
你複製的: HSL，再到設計工具裡做亮一階。
限度: 那一塊是該點的平均。它不是量過的品牌色票。
這一頁，和桌面取色工具
這一頁
在瀏覽器裡讀一個檔
拖進來或貼上一張靜態圖。放大鏡、取樣大小、HEX 和調色盤都從那個檔來。不用擴充功能，不用 Windows 程式，也不用帳號。Chrome 和 Edge 還可以用瀏覽器自己的取色，從螢幕取一個點。那個額外按鈕標成從螢幕取色。它不讀上面的檔，也不會改寫這個檔的調色盤。取色器線上指的是這個分頁，不是一支要安裝的程式。
另一件工作
螢幕取色、編輯器和濾鏡
桌面取色工具或擴充功能盯著螢幕。Photoshop 也能取樣，但那是在一整套編輯器裡面。要從你已經存好的檔讀一組色碼，兩種都不必先開。本站的裁切照片、模糊圖片、圖片打馬賽克改的是像素，不會把 HEX 交給你。切割圖片是把照片切成小塊。改圖片顏色改的是整張的色相，不是回報一個點。那些工作要的是一張新圖，不是一組色碼。
關於圖片取色的問題
怎麼做圖片取色？ +
把照片拖到這一頁，或貼上一張截圖。在圖上移動，直到放大鏡落在你要的顏色，點一下鎖定，再複製 HEX、RGB 或 HSL。平面填色留在 1 px。照片若相鄰像素在跳，先改成 3×3 或 5×5 再鎖。預覽就是檔案，沒有另外一次轉檔。還沒按複製之前，色碼只是停在畫面上，你可以再點別的位置。
圖片取色器怎麼得到 HEX？ +
鎖定一個像素，按複製 HEX。色碼長得像 #1A73E8，# 後面六位。複製 RGB 與複製 HSL 是同一個顏色的另外兩種寫法，分別是 rgb(26, 115, 232) 和 hsl(214, 82%, 51%)。雜訊多的照片先切到 5×5 再複製，否則 HEX 會在相鄰像素之間跳。三個複製按鈕抄的是同一個鎖定點，不是三個不同的像素。
調色盤 圖片是自動生出來的嗎？ +
檔打開之後，這一頁組出最多八個色塊：面積大的平面區域，加上比較飽和的顏色，避免小標誌被白底蓋過。點一個色塊就鎖定，並可以複製它的色碼。幾乎一樣的棕色會略過。這不是人工智慧配的調色盤，也不是品牌規範。色塊的順序不是主色、輔色那種層級，只是這個檔裡比較站得住的顏色。實色太少時，框裡會直接告訴你組不出來。
線上取色器要付費或註冊嗎？ +
不用。沒有帳號，沒有試用期，色碼上也不蓋浮水印。取色就在你已經打開的分頁裡完成，前面沒有登入牆。關掉分頁，這次的檔和鎖定過的顏色就清掉，沒有一筆帳可以事後再登入取回。
取色器chrome 要先安裝嗎？ +
不用。取色器chrome 這類擴充功能，還有桌面取色程式，看的是螢幕。這一頁讀的是檔案，或你貼上的截圖，在瀏覽器裡就做完。Chrome 和 Edge 另外有從螢幕取色，那是瀏覽器自己的取色，只看得到螢幕，不讀上面那個檔。沒有這個按鈕的瀏覽器，仍可以取檔案裡的色。擴充功能讀的是你螢幕上此刻的畫面，換一台螢幕，那個讀數可以不同。
取色器線上跟從螢幕取色是同一件事嗎？ +
不是。取色器線上的主工作是讀你拖進來的檔：放大鏡、1 px 或 5×5、HEX 和調色盤都從那個檔來。從螢幕取色只在 Chrome 和 Edge，讀的是螢幕當下的像素。螢幕若已經把顏色帶偏，這條讀數不會把原檔找回來。從螢幕取到的點，不會改寫這個檔算出來的調色盤。不要把這兩種讀數當成同一組數字。
色碼查詢會解電阻色環嗎？ +
不會。色碼查詢、色碼表、色碼電阻在搜尋裡多半是電阻色環：用色環顏色換算電阻值。這一頁不解色環，不算電阻，也不提供那張表。這裡的色碼指的是圖片像素，寫成 HEX、RGB 或 HSL。要查電阻請用電子零件的對照表，不要把照片拖進來指望得到歐姆。歐姆、公差、色環有幾環，都不在這一頁。
圖片色碼查詢會把照片上傳嗎？ +
不會。瀏覽器在這台裝置上解碼，並讀像素。沒有伺服器接收這個檔，也沒有帳號綁住這次查詢。你關掉分頁，畫布上的照片就沒有了。讀一個點，或組那最多八個色塊，都不把檔送出去。調色盤也是在這台裝置上算的，不是上傳之後由伺服器配色。
可以貼上截圖再取色嗎？ +
可以。先複製截圖，點這一頁，再貼上。電腦上是 Ctrl+V 或 ⌘V。手機若沒有貼上，改用檔案選擇器把截圖選進來。貼上的仍是一個圖檔，取色方式跟拖進來一樣。聊天軟體存過的截圖可能已經壓掉原本的品牌色，頁面只回報你貼上的那些像素。要貼的是圖片。一段網址文字貼進來，沒有像素可讀。
同一塊點兩下，為什麼色碼不一樣？ +
照片和 JPEG 不會為一片天空或一件衣服只存一個平面色碼。相鄰像素本來就不同，兩下點在差一兩個像素的位置，HEX 就會變。請改用 3×3 或 5×5，把一小塊平均。標誌則維持 1 px，點平面填色的中間，不要點邊緣那圈混色。差一個像素就換一組 HEX，在 JPEG 裡很常見，不一定是你點到了別的物件。
手機上能取色嗎？ +
能。取樣點在手指上方，放大鏡顯示的是那幾個像素，手指放開才鎖定。記號小時用 2× 或 4×，再拖動照片把目標送進放大鏡。很大的照片會改從 2,000 px 的複本取樣，分頁才跑得動，發生時頁面會寫明，色碼對的是那份複本。手機沒有滑鼠懸停，按住時色碼跟著手指上方的那一點走，放開才留下。
Photoshop 的 HEX 為什麼跟這裡不一樣？ +
檔案可以帶色彩描述檔。Photoshop 可能顯示描述檔裡的數字，例如 Display P3 或一組印刷描述檔。這一頁在瀏覽器解碼之後讀 sRGB 像素，那才是要貼進 CSS 或 Figma 的值。截圖又更後面一步：它已經是螢幕上的像素。兩種讀法都不是 CMYK 印刷打樣。要跟網頁對齊時，用這一頁的 sRGB，不要把描述檔裡的數字直接貼進 CSS。
這裡可以改圖片顏色嗎？ +
不能。這個取色器不把照片重新上色，不做反色，也不把一個顏色換成另一個。要改整張的色相或色調，用本站的改圖片顏色，那是另一個網址，它交出新圖，不交出一個點的色碼。你在這裡只複製鎖定那個點的 HEX、RGB 或 HSL。反色、換成另一個品牌色、只改一件衣服，都不在這個網址。
最接近的名稱是中文品牌名嗎？ +
不是。頁面給的是最接近的英文 CSS 色名，例如 steel blue 或 tomato，依 RGB 距離挑的。它不是包裝上的中文品牌名，也不是色票廠的編號。把這個英文名稱打進 CSS，不會回到同一個 HEX。顏色很少見時，它仍會給一個最接近的 CSS 色名，距離可以很遠，所以名稱只供參考。請貼色碼，不要貼名稱。
會給印刷用的 CMYK 嗎？ +
不會。把螢幕像素換算成 CMYK，不是印刷打樣。請複製 HEX 或 RGB，到知道紙張和描述檔的軟體裡再轉換。這一頁沒有油墨配比，也沒有印刷機的校正。就算這張 JPG 在別的軟體裡曾經是 CMYK，存成照片之後像素已是 RGB，這一頁只報那個 RGB。
貼上網址就能取那張圖的色嗎？ +
不能。放在別的網站上的圖，這個分頁通常讀不到。這一頁也不會把你的檔上傳，再請伺服器代為抓那張圖。請先把圖片存到這台裝置，再把那個檔拖進來或貼上。把網址貼進瀏覽器的網址列也沒用，這一頁沒有抓遠端圖片的欄位。
