🌈 圖片取色盤

使用步驟

1. 選一張圖 照片、插畫、截圖、設計稿都可以。載入之後立刻就會列出顏色，不用按開始處理。
2. 調整要幾個顏色 5–6 個是最實用的數量 — 夠做一組完整配色（主色、輔色、強調色、背景、文字），又不會多到難以取捨。做心情板可以拉到 10–12。
3. 選取色方式 主色按照面積排序，反映照片實際看起來的樣子。鮮明會把飽和度高的顏色排前面 — 風景照裡那一點紅色的花，主色模式會忽略它，鮮明模式會抓出來。
4. 點色塊直接複製 按一下任何一個色塊就會複製它的 HEX 到剪貼簿。下面另外有一整段 CSS 變數，可以直接貼進樣式表。
5. 按開始處理輸出色卡（選填） 會產生一張 PNG 色卡，上面有原圖縮圖與每個顏色的 HEX、RGB。存起來當專案的配色參考，或直接貼給客戶看。

什麼時候用得到

為什麼從圖片取色比自己挑好用

從零開始配色很難，因為顏色之間的協調不是單看每個顏色好不好看，而是看它們放在一起怎麼樣。從一張你覺得好看的照片取色，等於直接繼承了一組已經被驗證過能共存的顏色 — 那些顏色本來就在同一個畫面裡和諧地待著。

這也是為什麼設計師常從照片、電影劇照、包裝上取色。不是偷懶，是因為現實世界的光線與材質本身就會產生協調的色彩關係。

取幾個顏色比較好用

5–6 個通常剛好，足以組成一套完整的介面配色：

• 一個主色（按鈕、連結、重點）
• 一到兩個輔色（次要元素）
• 一個強調色（警告、標籤、少量點綴）
• 一個深色（文字）與一個淺色（背景）

超過 8 個之後通常會開始出現彼此太接近、難以分辨用途的顏色。做心情板或想看整體色調分佈時才拉到 10 以上。

取出來之後還要做什麼

直接拿去用通常還差一步。從照片取的顏色飽和度與明度常常不適合當介面色 — 太暗的文字色讀起來吃力、太鮮豔的背景會讓人眼睛累。實務上的做法是把取到的顏色當色相的來源，再各自調整明暗與飽和度做出一整套色階。

另外記得檢查對比度。文字與背景的對比不足是無障礙上最常見的問題，而從照片取的兩個顏色恰好對比夠的機率並不高。

常見問題

接下來可能會用到

圖片處理很少一步到位。這幾個是跟「圖片取色盤」最常搭著用的：

• 🔗 圖片轉 Base64 — 產生 Data URI、CSS、HTML
• 💧 加浮水印 — 文字水印，可調位置透明度
• 🗜️ 壓縮圖片 — 縮小檔案並保持畫質

處理完想直接分享？上傳媒體可以把圖片、照片或影片轉成一組短網址，還能設密碼、有效期限與瀏覽次數上限。也可以回到工具總覽看全部 12 個工具。