很多時候你手頭只有一張截圖。你打不開那個網站的 CSS,檢查不了那個 App,也沒有設計原始檔——但螢幕上的顏色你看得見,而截圖把它們凍成了一張可以取樣的圖。下面講怎麼從裡面取出準確的顏色碼。
為什麼截圖是誠實的來源
當你對渲染好的頁面或 App 截圖時,你抓到的是顏色實際顯示出來的樣子——每一層漸層、疊加、透明度都已經作用完畢。這往往比原始碼裡的值更真實。一張卡片,原始碼寫的是 #000000 疊在灰底上、90% 不透明度,它在螢幕上並不是黑的,而是某個具體的深灰。看原始碼給你的是配方;對截圖取樣給你的是使用者真正看到的顏色。當你要還原那個觀感時,該讀的就是截圖。
三步取一個顏色
- 截圖並載入。 把螢幕(或你關心的那塊區域)截下來,把圖放進取色器。
- 懸停到畫素上。 一個放大鏡跟著游標走,把下面的區域放大,於是你能精確落點——哪怕是一條細邊框或一個小圖示。
- 點選儲存,再複製。 每次點選都把顏色留成一個色塊,帶 HEX、RGB、HSL,各配複製按鈕。複製你需要的那種格式,粘進樣式表或設計工具。
截圖特有的幾個注意點
截圖有些小毛病會帶偏取樣,知道了就很好躲:
- 存成 PNG,別用 JPEG。 JPEG 壓縮會把顏色略微抹開,尤其在邊緣和純色區,取到的值會跟真實值有偏差。PNG 是無損的,每個畫素都準——大多數系統截圖工具本來就預設存 PNG。
- 留意縮放比例。 在瀏覽器或系統縮放不是 100% 時截的圖是被縮放過的,而縮放會把相鄰畫素混在一起。想取得最乾淨,就在 100% 下截。
- 避開邊緣和文字。 抗鋸齒意味著任何邊緣上的畫素都是混色,不是真實顏色。要在純色區中間取樣——放大鏡能幫你看清自己已經離開了那圈模糊的邊界。
- 當心文字的次畫素顏色。 把渲染的文字放大,你會看到一圈不屬於文字本色的彩邊。要從填充和背景取色,別從筆畫上取。
讀 HEX、RGB 和 HSL
每個色塊同時顯示三種格式:
- HEX(
#3A7BD5)——CSS 和設計工具的預設。 - RGB(
rgb(58, 123, 213))——通道值,需要rgba透明度時順手。 - HSL(
hsl(215, 65%, 53%))——色相、飽和度、明度,想微調顏色而不是照搬時最好用。
換格式不用重新取樣——同一個顏色三種早就都在那兒了。
一趟取下整套配色
從一張截圖,你能把整套配色重建出來:點標題色、按鈕、連結、背景、灰字。每個都疊進列表,你可以一次會話裡把整套取齊,再按順序複製。
如果你要的反而是讓工具幫你概括整張圖的調色盤——那幾個主色調——那是另一件事,img.diy 的調色盤工具會自動提取。這個取色器是用來指向截圖裡某個具體畫素的;調色盤工具是用來概括整張圖的。
什麼都不離開你的機器
截圖裡常有你不太想上傳的東西——一塊內部看板、一份私密草稿、客戶還沒釋出的介面。在這裡,圖片是在你瀏覽器本地、從 canvas 上讀的:什麼都不往外發,沒有賬號,首次載入後離線也能用。你取到了顏色,而截圖從沒離開過你的裝置。
截圖,懸停到畫素,點選,複製。