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