🎯 色彩選取器
從影像中選取任意顏色 — 點擊儲存至調色盤
✓ 永久免費 · ✓ 無需註冊 · ✓ 檔案不上傳 · ✓ 離線可用
🔒 你的影像永遠不會離開你的裝置。 所有處理都使用 Canvas getImageData 像素讀取 在你的瀏覽器中進行。不上傳、不經伺服器、不追蹤。
功能特色
- 像素級精確取色 — 將滑鼠移到影像上,放大鏡會顯示你所在的像素及周圍像素。點擊即可儲存;方向按鈕可一次移動一個像素。
- 多種格式 — 取得 HEX、RGB 和 HSL 格式的顏色,每種都有自己的複製按鈕——可直接用於 CSS、設計工具或程式碼。半透明像素會附上透明度(#rrggbbaa、rgba)。
- 儲存調色盤 — 建立最多 12 個顏色的調色盤。可複製單一顏色或整個調色盤。
- 從任何影像取色 — 從照片、螢幕截圖、設計稿中擷取顏色 — 任何影像來源都可以。
運作方式
- 上傳你的影像 — 拖放你想從中擷取顏色的任何影像。
- 懸停並取色 — 將滑鼠移到影像上(手機上輕點)——放大鏡會顯示該像素。點擊可儲存到調色盤;方向按鈕可微調取色點。
- 複製並使用 — 用按鈕複製 HEX、RGB 或 HSL,點擊已儲存的顏色複製其 HEX,或使用「全部複製」複製整個調色盤。
使用情境
- 從標誌或網站截圖中擷取品牌色彩
- 找到設計中任何元素的確切顏色
- 取得 CSS 樣式表用的 HEX/RGB 值
- 從攝影作品中建立靈感調色盤
常見問題
顏色有多精確?
精確到你指著的那個像素。無論影像以多大尺寸顯示,位置都會換算到影像本身的像素上,放大鏡會把該像素框起來並顯示周圍像素。數值是瀏覽器從檔案解碼出的 sRGB 值:廣色域(Display P3)照片會先轉換為 sRGB,壓縮很重的 JPG 本身可能就與原稿略有差異。
可以複製 RGB 或 HSL 格式嗎?
可以。面板上 HEX、RGB、HSL 各有一個複製按鈕,複製目前顯示的顏色。點擊已儲存的顏色會複製它的 HEX,並重新顯示三種格式。
手機上能用嗎?
可以。輕點影像即可取色。指尖會蓋住幾十個像素,所以可用方向按鈕一次移動一個像素——放大鏡和影像上的圓圈會顯示你的位置。
透明像素怎麼辦?
半透明像素會附上透明度(#rrggbbaa、rgba()、hsla())。完全透明的像素沒有顏色,所以無法儲存。
相關教學
- 📖 如何從任何圖片中抽出一組配色 — 從照片、螢幕截圖或 logo 裡抓出精確的顏色,是打造一組真正搭調配色最快的方法。這篇教你怎麼從圖片挑顏色,並把它們變成 HEX、RGB 和 HSL——全都在你的瀏覽器裡。
- 📖 如何取得圖片裡任何顏色的 Hex 色碼 — 直接在瀏覽器裡,不用上傳,從圖片或截圖中抓出任何顏色的精確 hex 或 RGB 色碼。步驟、真實的工具替代方案和取捨。
相關工具
💬 Bug、點子,或者就想打個招呼? 告訴 Milo 🐨 · [email protected]