🎯 色彩選取器

從影像中選取任意顏色 — 點擊儲存至調色盤

✓ 永久免費 · ✓ 無需註冊 · ✓ 檔案不上傳 · ✓ 離線可用

🔒 你的影像永遠不會離開你的裝置。 所有處理都使用 Canvas getImageData 像素讀取 在你的瀏覽器中進行。不上傳、不經伺服器、不追蹤。

功能特色

  • 像素級精確取色 — 將滑鼠移到影像上,放大鏡會顯示你所在的像素及周圍像素。點擊即可儲存;方向按鈕可一次移動一個像素。
  • 多種格式 — 取得 HEX、RGB 和 HSL 格式的顏色,每種都有自己的複製按鈕——可直接用於 CSS、設計工具或程式碼。半透明像素會附上透明度(#rrggbbaa、rgba)。
  • 儲存調色盤 — 建立最多 12 個顏色的調色盤。可複製單一顏色或整個調色盤。
  • 從任何影像取色 — 從照片、螢幕截圖、設計稿中擷取顏色 — 任何影像來源都可以。

運作方式

  1. 上傳你的影像 — 拖放你想從中擷取顏色的任何影像。
  2. 懸停並取色 — 將滑鼠移到影像上(手機上輕點)——放大鏡會顯示該像素。點擊可儲存到調色盤;方向按鈕可微調取色點。
  3. 複製並使用 — 用按鈕複製 HEX、RGB 或 HSL,點擊已儲存的顏色複製其 HEX,或使用「全部複製」複製整個調色盤。

使用情境

  • 從標誌或網站截圖中擷取品牌色彩
  • 找到設計中任何元素的確切顏色
  • 取得 CSS 樣式表用的 HEX/RGB 值
  • 從攝影作品中建立靈感調色盤

常見問題

顏色有多精確?

精確到你指著的那個像素。無論影像以多大尺寸顯示,位置都會換算到影像本身的像素上,放大鏡會把該像素框起來並顯示周圍像素。數值是瀏覽器從檔案解碼出的 sRGB 值:廣色域(Display P3)照片會先轉換為 sRGB,壓縮很重的 JPG 本身可能就與原稿略有差異。

可以複製 RGB 或 HSL 格式嗎?

可以。面板上 HEX、RGB、HSL 各有一個複製按鈕,複製目前顯示的顏色。點擊已儲存的顏色會複製它的 HEX,並重新顯示三種格式。

手機上能用嗎?

可以。輕點影像即可取色。指尖會蓋住幾十個像素,所以可用方向按鈕一次移動一個像素——放大鏡和影像上的圓圈會顯示你的位置。

透明像素怎麼辦?

半透明像素會附上透明度(#rrggbbaa、rgba()、hsla())。完全透明的像素沒有顏色,所以無法儲存。

相關教學

相關工具

💬 Bug、點子,或者就想打個招呼? 告訴 Milo 🐨 · [email protected]