適合使用
- 從商品圖、截圖或設計稿中擷取主色。
- 在圖片預覽上懸停讀取即時顏色。
- 複製 HEX、RGB、HSL 或 CSS 變數格式。
TUXIA 圖匣工具
圖片配色擷取工具
從圖片中擷取主色，並在預覽圖上懸停讀取即時 HEX、RGB、HSL 顏色值，適合設計取色、品牌配色和前端開發。
主色擷取
懸停取色
複製格式
色彩分析
擷取配色並即時取色
上傳圖片後查看 6 色配色，移動滑鼠即可讀取並複製即時顏色值。
拖曳圖片到這裡，或 點擊選擇檔案
PNG、JPG、WebP
懸停取色
移動滑鼠查看顏色
圖片取色板
從上傳圖片中擷取主色，點擊色塊即可複製。
點擊色塊或複製按鈕即可複製目前格式。
工具指南
圖片配色擷取工具指南與常見問題
從圖片中擷取主色，並在預覽圖上懸停讀取即時 HEX、RGB、HSL 顏色值，適合設計取色、品牌配色和前端開發。
圖片取色圖片配色擷取HEX取色RGB取色HSL取色線上取色器TUXIA
色彩是視覺設計中最具力量的元素之一，從圖片中擷取合適的顏色可以啟發整個品牌配色、網站主題或 UI 元件庫。TUXIA 的圖片取色器提供兩種功能：透過分析主導色調和色彩分佈，從上傳的圖片中擷取一組 6 色的代表性配色板；以及在圖片預覽上提供即時懸停取色功能，讀取游標所在位置的精確像素顏色。顏色以四種格式顯示——HEX（如 #3B82F6）、RGB（rgb(59, 130, 246)）、HSL（hsl(217, 91%, 60%)）和 CSS 自訂屬性（--color: #3B82F6）——每種格式皆可一鍵複製。配色板和取色功能完全在瀏覽器中執行，你的圖片永遠不會被上傳。
使用場景
品牌顏色擷取
上傳標誌、主視覺圖片或情緒板照片，擷取定義品牌視覺識別的主導顏色，將 HEX 值直接複製到品牌指南文件或 CSS 變數檔案中。
UI 與網頁設計
從主視覺圖片、插圖或產品照片中擷取顏色，建立和諧的 UI 色彩方案。將擷取的配色用於按鈕、重點元素、背景和文字顏色，自然地與主要圖像互相呼應。
藝術與攝影分析
透過擷取和比較配色板，研究藝術作品、攝影或設計參考圖的色彩構成，了解專業圖片如何平衡冷暖色調、飽和度和對比度。
與其他方案比較
瀏覽器擴充功能和專用取色器應用程式可從螢幕上任意位置取樣顏色，在跨應用程式工作流程中功能更強大。然而，TUXIA 的工具在單一整合工作區中同時提供配色板擷取和即時像素取色，無需安裝任何軟體。對於詳細的色彩分級、ICC 設定檔管理或印刷色彩空間（CMYK），專業工具如 Adobe Color 或 Capture One 更為合適。
技術說明
- HEX 格式（#RRGGBB）是網頁和 CSS 中最廣泛使用的顏色格式，每對字元分別代表紅、綠、藍的十六進位值。
- RGB 格式以 0-255 的紅、綠、藍色值指定顏色，適合 JavaScript 和 Canvas 操作中的程式化顏色處理。
- HSL 格式（色相、飽和度、亮度）對設計師來說更直覺，色相是色輪上的角度（0-360），飽和度是色彩強度（0-100%），亮度是明暗程度（0-100%）。
- 如果圖片的色彩範圍較窄，擷取出的配色板可能包含看起來相似的顏色。若要取得多元的配色，請使用色彩內容豐富的圖片。
最佳實踐
- 依照工作流程在 HEX、RGB 和 HSL 格式間切換。網頁開發者通常使用 HEX，UI 設計師偏好 HSL，Canvas/JavaScript 開發者使用 RGB。
- 建立完整色彩方案時，使用「全部複製」按鈕一次複製全部六個配色。
- 為確保準確的顏色取樣，請確認你的瀏覽器和顯示器已校色，顏色在不同螢幕上看起來可能有所差異。
- 在擷取配色板之前，先在感興趣的區域上使用懸停取色器，這讓你可以直接驗證特定像素的顏色。
使用方式
- 上傳圖片並產生配色板。
- 在預覽圖上移動滑鼠，查看目前位置顏色。
- 切換顏色格式，複製單個顏色或整組配色。
常見問題
支援哪些色彩格式？
支援 HEX、RGB、HSL 和 CSS 變數格式。
可以讀取滑鼠位置的顏色嗎？
可以。上傳圖片後在預覽區域懸停即可看到目前位置顏色。