你看到一個想複用的顏色——在一張照片裡、在你喜歡的某個網站截圖裡、在一個原始檔早就丟了的老 logo 裡——你需要的是真實的十六進位制色值，而不是靠猜。用眼睛估從來都不太準；顯示器會騙人，"那個藍"其實是六種略有差別的藍。直接從畫素裡把配色取出來，你拿到的色值可以直接粘進 CSS、設計工具或品牌文件。
下面講怎麼做，以及怎麼得到一份真正能用的配色，而不是隨手抓一把畫素。
"提取配色"到底做了什麼
工具會掃描圖片，找出最能代表它的顏色——主色調加上顯眼的點綴色——再把每一個給你，作為可複製的十六進位制碼。你拿到的不是上百萬個單獨的畫素色，而是一組整齊的集合（比如 5 個或 8 個），概括了這張圖。
它對幾個常見活兒是真有用的：
- 在沒有原始規範時，從 logo 或老素材裡找回品牌色。
- 從一張你想匹配其氛圍的照片裡搭一份設計配色——風景、產品圖、一幅畫。
- 匹配一個已有網站或圖形，而你手頭只有一張截圖。
- 為你正在用的某張圖挑一個協調的背景或點綴色。
丟一張圖進去，把色值讀出來：
用數量控制拿到有用的配色
最重要的一個設定，是你摳出多少個顏色。它會徹底改變結果。
- 少一點（3–5 個）給你的是核心配色——定義這張圖的那幾種色調。這通常正是品牌或設計系統想要的，一個精簡的集合是優點，不是侷限。
- 多一點（8–12 個）能捕捉細微的點綴色和漸層。當圖片豐富多變、你也想要次要色調時有用，或者當你要研究一張照片究竟怎麼構成時。
如果第一次的結果感覺不對——某個色調壓了全場，或你想要的點綴色被合併掉了——調一下數量再讀。一張 80% 是天空的照片，在低數量下會給你一大堆藍；把數量往上加，才能讓那些小面積的亮色冒出來。
點選複製——真正重要的工作流
讀一個十六進位制碼再手打出來，是錯誤鑽空子的地方（#3A7BD5 和 #3A7BD6，你花十分鐘納悶它為什麼看著不對）。在配色工具裡，每個色塊點一下就複製它的十六進位制碼，你從圖片到剪貼簿到樣式表，一路不用碰鍵盤。
一個實用流程：
- 載入圖片。
- 把數量設成匹配活兒——品牌配色調低，抓點綴色調高。
- 點你要的每個色塊；粘到它要去的地方。
- 色域不夠？微調數量，把多的抓出來。
用設計的眼光讀結果
有幾件事值得知道，好讓配色落得穩：
- 主色不一定是有用的那個。 白底上的產品圖會報出一大堆白或接近白。這沒錯，但你真正在意的顏色是產品——把數量往高調把它取出來，或者先裁到主體。
- 照片的顏色比看上去多。 皮膚、陰影、反光都會加進你沒自覺注意到的色調。高數量把它們揭出來；低數量把它們藏進平均值裡。
- 十六進位制是通用的。 你複製的每個碼都能直接用在 CSS、Figma、Photoshop、Canva 或品牌文件裡，無需轉換。
為什麼它留在你的瀏覽器裡
整個提取在本地執行——圖片用 Canvas 在你的瀏覽器裡讀取和分析，從不上傳到伺服器。當這張"圖"是一份沒釋出的樣稿、客戶的私密品牌素材，或一張不該發到隨便某個網頁工具上的內部截圖時，這一點很重要。它免費、無需註冊，第一次訪問後也能離線用。
抓顏色、點選複製、粘到它該去的地方。