Codia

從圖片中取色

選擇圖片像素,複製 HEX、RGB、HSL 或 CSS 顏色變量。

  • 免費
  • 無需登錄
  • 本地處理

使用方法

  1. 選擇設備上的文件、拖入文件,或粘貼圖片。

  2. 懸停預覽顏色,點擊儲存。使用鍵盤時,方向鍵移動(按住 Shift 每次 10 像素),Enter 儲存。

  3. 下載結果或複製顏色,無需註冊或付費。

適用情況

品牌顏色

從 Logo 或產品相片中找出準確的 HEX 色碼,保持設計一致。

從靈感圖建立配色

擷取相片或藝術作品的主色調,作為配色方案的起點。

由設計到程式碼

將顏色複製為 CSS 變數或 Tailwind 設定片段,直接貼入項目。

效果與限制

在圖片上選點,查看包含透明度的網頁顏色。放大預覽有助於選擇小細節。最多保存 10 個不同顏色,可複製單個色值或下載 CSS 變量文本。色值來自瀏覽器解碼後的圖片,不代表經過校準的印刷顏色測量。

輸入和輸出均受大小限制,不支持動畫圖片。文件僅保存在內存,刷新會清空。手機上建議使用較小批次。

從圖片中取色 · 原圖 → 處理結果
從圖片中取色 · 原圖 → 處理結果

常見問題

如何取得圖片中某種顏色的 HEX 色碼?

上載圖片後,將滑鼠移到任何像素上即可在放大鏡中預覽,點擊即可儲存。HEX、RGB、HSL 及 OKLCH 色值會顯示在圖片旁邊,點擊色值即可複製。

主色調是如何找出來的?

工具會對縮小後的圖片副本取樣,以中位切割(median-cut)演算法將相近顏色分組,並按其在圖片中所佔面積排序。透明像素不會計算在內。

可以擷取圖片以外的顏色嗎?

在 Chrome、Edge 等支援 EyeDropper API 的瀏覽器中,使用「從螢幕取色」即可擷取螢幕上任何像素的顏色。

為甚麼顏色與設計檔案略有不同?

使用 Display P3 等廣色域色彩設定檔的圖片,會轉換成網頁通用的 sRGB。色值與瀏覽器顯示一致,但可能與印刷或設計軟件中原有設定檔的效果不同。

圖片會被上傳嗎?

不會。圖片處理在瀏覽器本地完成,文件不會發送給 Codia。刷新或離開頁面後工作區會清空。獲准採集的網站統計不包含圖片內容和文件名。

支持批量處理嗎?

每次處理一張 JPG、PNG 或 WebP,最大 20 MiB、1200 萬像素。

畫質和元數據會保留嗎?

取決於操作和設置。有損壓縮會改變像素,JPG 無法保留透明背景。導出面向普通 8 位網頁圖片,不承諾保留 EXIF、HDR、原始色彩配置或 16 位色深,請檢查處理結果。

相關圖片工具