你有一張圖,想從裡面取出一個數值:某個具體顏色的 hex 色碼。也許是一張品牌規範早就找不著的 logo,也許是一張網站截圖、你想對上它那個藍,也許是一張照片裡有個你想複用的顏色。憑感覺打出你以為的顏色是行不通的——眼睛沒法從螢幕上讀出 #3A7BD5,看著對的那個顏色往往差幾位數。下面講怎麼直接從畫素裡讀出真實的值。
為什麼靠猜總是差一點
螢幕上一個"藍",其實是一堆幾乎一樣的藍鋪開的,而顯示器的亮度和校準還會把它們再往偏裡帶。靠眼睛挑,你會落得很近但不對——近到那點色差既惱人又不明顯,於是你花十分鐘納悶按鈕怎麼跟標題對不上。解法就是別再猜,讀出畫素真正存著的那個數。
三步取到色碼
可靠的辦法是用取色器直接對畫素取樣。
- 載入圖片。 把你要取色的 logo、截圖或照片放進去。
- 懸停到那個確切的畫素。 一個放大鏡跟著游標走,把下面的區域放大,於是在硬邊上你能看清哪個畫素是純正的品牌色,哪個是兩色抗鋸齒後的混色。
- 點選儲存,再複製。 每次點選都把顏色留成一個色塊,顯示它的 HEX、RGB 和 HSL,各配一個複製按鈕。點 HEX,它就進了剪貼簿。
落在對的畫素上
放大鏡比聽起來重要。當一個顏色跟另一個相接時——文字壓在背景上、圖示的邊緣——中間這些畫素是抗鋸齒的:兩色平滑過渡出來的混色,哪個都不是。在那兒取樣,你會得到一個跟誰都對不上的渾濁值。要瞄準形狀內側幾畫素處的純色區,那裡顏色是實的,放大檢視讓你在點選前確認自己確實停在上面。
在乾淨的 logo 或純色介面上,這很容易——顏色在一大片區域裡是均勻的。在照片上就得多留心,因為噪點和壓縮會讓相鄰畫素真的不一樣。挑一塊平靜、受光均勻的區域,多取兩次看看是否一致。
HEX、RGB 還是 HSL——按需取用
每個色塊同時給你三種,你要哪個就複製哪個:
- HEX(
#3A7BD5)——網頁預設。CSS、Figma、Canva、品牌文件都認。沒特別理由就用它。 - RGB(
rgb(58, 123, 213))——通道值,當某個工具要它、或你要用rgba加透明度時有用。 - HSL(
hsl(215, 65%, 53%))——色相、飽和度、明度。想調整顏色時最好用:提亮做 hover 態、壓暗做一個變體、或從它推出一整條色階。
因為每個色塊三種都帶著,你永遠不用為了換格式重新取一次色。
一次取好幾個顏色
一個 logo 很少只有一種顏色。一趟就把主色、輔色、文字色都點下來——每個都疊進列表,你能對比、能一個接一個複製,而不用把圖重新載入三遍。
如果你要的是整張圖的顏色概覽、而不是具體畫素——一張照片是由哪些顏色構成的——那是另一件事,img.diy 上單獨有個調色盤工具會自動幫你提取主色。知道自己要哪個確切的點,用這個取色器;想讓工具幫你概括整張圖,用調色盤工具。
一切留在你的裝置上
圖片是在你瀏覽器本地、從 canvas 上讀的——什麼都不上傳,不用註冊,首次載入後斷網也能用。所以一份還沒釋出的設計稿、或客戶的私密素材,不會僅僅因為你要取一個 hex 色碼就離開你的機器。
載入圖片,懸停到畫素,點選,複製色碼。