你在照片、螢幕截圖或 Logo 裡看到一個完美的藍,想把那個顏色原封不動用在自己的設計上。這件事不必開 Photoshop——瀏覽器版的圖片取色器直接讀取像素,給你一組隨處可貼的色碼。
一個事先就知道正確答案的測試。 我們實測室那張平面插畫是腳本畫的,六個顏色寫在原始碼裡:
#fdf3e3 #f4a261 #2a9d8f #264653 #e76f51 #e9c46a。丟進我們的取色器,6/6 全部精確抓到。另外多出兩個值 ——#fcedda #f6ba88—— 那不是錯誤:那是圓形邊緣的反鋸齒混色,檔案裡真實存在的像素。同一張圖可以下載,兩個說法你都能自己驗。
HEX 和 RGB 是同一個顏色的兩種寫法
螢幕上每個像素都是紅、綠、藍三色的混合,每色從 0 到 255。取色器會用兩種常見寫法給你這個值:
- RGB——
rgb(59, 130, 246)——三個通道用十進位數字。 - HEX——
#3B82F6——同樣三個數字改用十六進位,各兩位(3B=59、82=130、F6=246)。
兩者可互換,HEX 只是在 CSS 和設計軟體裡更精簡。需要 HSL 或其他格式,把色碼丟進色彩轉換器即可。
吸單一像素 vs. 抓整組色盤
這是兩種需求,方法也不同:
- 精確的單一像素——點你在意的那一點。適合回答「那顆按鈕是什麼藍?」
- 整體配色——用萃取出的主要色盤。它取樣整張圖、把相近顏色歸併,列出最常出現的幾色。這就是你一鍵從截圖抓出品牌主色的方法。
這個色盤功能可以拿一個「已知的正確答案」去核對,那很少見。我們實測室那張平面插畫是腳本畫的,六個顏色寫在我們的原始碼裡:#fdf3e3 #f4a261 #2a9d8f #264653 #e76f51 #e9c46a。我們的取色器把 6/6 全部精確抓到。
一個調色盤擷取器很容易寫,卻很難驗證,所以我們給自己這一個「答案已知」的測試。我們測試語料庫裡的插畫是腳本畫出來的,所以它的六個顏色事先就寫下來了:#fdf3e3 #f4a261 #2a9d8f #264653 #e76f51 #e9c46a。把那個 PNG 餵給我們自己的圖片取色器回傳的是 #fdf3e3 #f4a261 #2a9d8f #264653 #e9c46a #e76f51 #fcedda #f6ba88 —— 對已知顏色的命中是 6/6,另外多出兩個色塊(#fcedda、#f6ba88),那是反鋸齒的邊緣像素,不是錯誤。這是一個可被否證的測試,不是一句宣稱:如果擷取器退步了,這一頁就會是錯的,而你可以下載同一個檔案來證明。
為什麼單一像素會讓你意外
如果圖是壓縮過的 JPG,那塊看起來單一的顏色其實布滿格式帶進的細微變化。取相鄰兩個像素,數值可能就差幾點。要一個穩定的「這就是這個顏色」,平均一整片的色盤會比單點更可靠。PNG 和向量匯出沒有這個問題,因為它們非有損。
而意外的部分是有教育意義的,不是 bug。除了那六個,取色器還回傳了 #fcedda #f6ba88 —— 那是圓形邊緣的反鋸齒混色。它們是檔案裡真實存在的像素:放大任何一條曲線邊緣,那裡的顏色既不是這邊也不是那邊。單點取色可能正好落在那上面,這也正是為什麼「抓一組色盤」比「相信一次點擊」安全。
那兩個多出來的色塊,也正好回答了「為什麼我點一個像素,回來的顏色不在設計稿裡」。反鋸齒會在一到兩個像素寬的邊界上,把圖形顏色和背景混在一起,所以 #f6ba88 真的存在於那個檔案裡,即使沒有人選過它。要取色就從平坦區域的中間取,或者直接拿整個調色盤、讓出現頻率去排序。
一切都留在你的裝置上
瀏覽器版取色器用 <canvas> 在本機讀圖——不上傳任何東西。這代表它可離線使用,你的圖片也永遠不離開你的電腦。
相關工具
從單一顏色到整組色盤
吸到的一個顏色只是起點,不是配色方案。要組出能用的一組,先抓出主色,再只改 HSL 的**亮度(L)**衍生出更亮與更暗的同系色——這樣整個色系才會和諧。實用的配置是:一個基準色、兩個較亮的淺色、兩個較暗的深色,再從圖片別處取一個強調色。
把「一個像素」變成「一個調色盤」的是出現頻率。我們的取色器回傳那六個已知顏色的順序和檔案裡不一樣 —— #fdf3e3 #f4a261 #2a9d8f #264653 #e9c46a #e76f51 #fcedda #f6ba88 —— 因為它是按「每個顏色覆蓋了多少畫面」排序,不是按出現位置。那個排序才是有用的部分:前兩個幾乎一定是背景和主要圖形,而那正好就是你做頁面配色時想要的那一對。
常見錯誤
- **吸到了抗鋸齒的邊緣。**兩色交界處的像素是混色而且半透明,吸出來會是一個混濁的中間值。請點在單色區塊的內側。
- **完全相信截圖的顏色。**作業系統截圖可能帶有顯示器的色彩描述檔,通訊軟體也可能再壓縮一次——數值可能和原始檔略有偏差。
- **在漸層上只吸一個像素。**你只會拿到那一點,完全反映不出漸變。漸層請兩端都吸。
常見問題
放大圖片會改變吸到的數值嗎? 不會。以 canvas 為基礎的取色器讀的是原始像素資料,和畫面縮放無關,放大或縮小吸到的色碼都一樣。
一組色盤該有幾個顏色? 對多數設計而言,四到六個能用的顏色就很夠——一兩個主色、幾個輔助色,加一個強調色。
我能吸螢幕上任何地方的顏色,而不只是上傳的圖嗎? 瀏覽器工具是針對你載入的圖片。要吸任何視窗裡的像素,現在多數作業系統都內建了取色滴管(部分瀏覽器也提供 EyeDropper API)。
拿到色碼後,可看HEX、RGB、HSL 全解析來轉換與調整,再用 CSS 產生器做出各種效果。