如何從任何圖片中抽出一組配色
2026-06-25
有些最棒的配色早就存在了——在一張夕陽照片裡、一格電影劇照裡、一個品牌 logo 裡、一張你喜歡的設計截圖裡。與其猜十六進位色碼，你其實可以直接從圖片裡把顏色挑出來。以下是做法，以及怎麼把它們變成可以用在你 CSS 或設計工具裡的數值。
為什麼要從圖片抽顏色
從零開始建一組配色很難；借用一組本來就行得通的則很容易。一張照片天生就有和諧感，因為場景裡的光線把那些顏色綁在了一起。一個品牌的 logo 直接把它精確的顏色交到你手上。從一張真實的圖片起步，你會得到一組感覺上就協調的配色，然後再去微調。
滴管工具的原理
一張圖片是一格一格的像素，而每個像素都有一個顏色。取色器（滴管）會讀取你指到的那個像素的精確顏色，並以色碼回報——通常是 HEX（#f59563），也就是同一組紅／綠／藍數值用十六進位寫出來。滑過去預覽、點一下把喜歡的存起來，你就有了一組配色。
ToolKoala 的取色器在你的瀏覽器裡做的正是這件事：
- 丟進任何圖片——照片、螢幕截圖、logo 都行。
- 滑過去預覽顏色；點一下把它存起來。想存多少就存多少。
- 每個存下的顏色都給你 HEX 和 RGB，可以直接複製貼進你的程式碼。
它在本機執行，所以你取樣的那張圖片絕不會被上傳。
HEX、RGB、HSL——你需要哪一個？
同一個顏色，不同的表示法：
- HEX（
#f59563）——網頁的預設；最常貼進 CSS 的那一種。 - RGB（
245, 149, 99）——當你需要透明度的 alpha 通道（rgba(...)）時很方便。 - HSL（色相、飽和度、亮度）——設計師拿來調整顏色時最愛的那一種：推一下亮度做出淺色調、移一下色相找到互補色。
如果你手上有某個格式的顏色、需要換成另一種，顏色轉換器能把 HEX 瞬間變成 RGB、HSL、HSV 和 CMYK。
把挑出來的色變成一組真正的配色
有幾個習慣能讓挑出來的配色真正好用：
- 抓一個色域範圍，而不是五個幾乎一樣的色階——一個深色、一個淺色、幾個中間調，再加一個強調色。
- 任何上面要放文字的，都要檢查對比。一組漂亮的低對比配色是讀不清的。
- 用 HSL 來做變化——一旦你有了一個基礎色，就調整亮度來做 hover 狀態、邊框和背景，而不是另外挑一堆不相關的新顏色。
常見問題
我要怎麼從圖片取得色碼？ 用取色器：載入圖片、滑過去預覽，然後點你想要那個顏色的像素。它會把顏色以你可以複製的 HEX（通常還有 RGB）色碼回報出來。ToolKoala 的取色器就在瀏覽器裡做這件事。
HEX、RGB 和 HSL 有什麼差別？ 它們是寫同一個顏色的三種方式。HEX 是網頁標準，RGB 對透明度（rgba）很有用，而 HSL 最方便手動調整顏色——改變亮度或色相。
我可以從螢幕截圖或 logo 挑顏色嗎？ 可以——任何圖片都行，包括螢幕截圖和 logo。那通常是配上一個品牌精確顏色最快的方法。
取色器會上傳我的圖片嗎？ 不會。ToolKoala 在你的瀏覽器裡讀取像素，所以圖片從不離開你的裝置。
我要怎麼把 HEX 顏色轉成 RGB 或 HSL？ 把它貼進顏色轉換器。ToolKoala 的顏色轉換器能一次把任何 HEX 變成 RGB、HSL、HSV 和 CMYK。
— Milo 🐨