已提取調色盤
點擊色塊複製 HEX，或複製整套調色盤的 CSS 變數和 JSON。
已複製到剪貼簿。
上傳一張圖片來提取調色盤。
:root 本地運行的圖片色彩工具
圖片調色盤提取器 從任意圖片提取顏色
上傳照片、Logo、截圖或插畫，提取可用於專案的 HEX、RGB、HSB、OKLCH、CSS 變數和 JSON 調色盤。
圖片會透過瀏覽器 Canvas API 在本地處理，不會上傳到 Palette Lab。
圖片調色盤提取器工作區
把圖片拖進調色盤提取器，選擇 5-10 個主色，然後複製適合設計或前端工作流的輸出格式。
為什麼圖片調色盤提取器對設計師有幫助
圖片調色盤提取器最有價值的地方，是把一張圖快速轉成可以立刻複用的顏色格式。
如何使用圖片調色盤提取器
圖片調色盤提取器的流程很短：上傳、檢查、複製，如果需要，再到你的設計工具中繼續微調。
01
02
選擇圖片調色盤提取器的顏色數量
品牌調色盤可以用 5 個顏色；如果照片、插畫或 UI 截圖變化更多，可以選擇 8-10 個顏色。
MVP 使用輕量的瀏覽器聚類演算法，讓工具保持快速和私密。
03
複製圖片調色盤提取器輸出
點擊任意色塊複製 HEX；當你需要結構化輸出時，可以複製整套 CSS 變數和 JSON。
如果你在現代 CSS 工作流裡調整感知亮度和色度，可以參考 OKLCH 值。
複製調色盤圖片調色盤提取器輸出格式
Palette Lab 圖片調色盤提取器關注設計師和開發者真正會複製到專案裡的顏色格式。
圖片調色盤提取器 HEX 值
複製 CSS、Figma、設計工具和品牌規範中最常見的六位 HEX 值。
圖片調色盤提取器 RGB 值
當你需要 Canvas、JavaScript 色彩計算或 CSS rgb() 時，RGB 輸出更方便。
圖片調色盤提取器 HSB 值
透過色相、飽和度和亮度理解每個提取顏色的視覺特徵。
圖片調色盤提取器 OKLCH 值
OKLCH 可以作為現代顏色參考，用來觀察感知亮度、色度和色相。
圖片調色盤提取器 CSS 變數
複製一段現成的 :root 變數，快速用於網站原型和設計 token 實驗。
圖片調色盤提取器 JSON
當你想在建構工具或應用程式碼中繼續處理調色盤時，可以使用結構化 JSON。
圖片調色盤提取器 FAQ
為使用 Palette Lab 圖片調色盤提取器的設計師、藝術創作者和前端開發者準備的常見問題。
圖片調色盤提取器如何運作？
Palette Lab 圖片調色盤提取器會在瀏覽器中取樣可見像素，把相似顏色聚類，然後回傳最主要的調色盤顏色。
圖片調色盤提取器會上傳圖片嗎？
不會。圖片調色盤提取器使用瀏覽器 Canvas API 在本地運行，你選擇的圖片不會上傳到 Palette Lab 伺服器。
圖片調色盤提取器支援哪些格式？
工具支援瀏覽器常見可解碼圖片，例如 JPG、PNG、WebP 和 GIF。不同裝置的瀏覽器支援可能略有差異。
圖片調色盤提取器的輸出可以用於 CSS 嗎？
可以。Palette Lab 會產生可複製的 CSS 變數，並提供每個顏色的 HEX、RGB、HSB、OKLCH 和 JSON。
用圖片調色盤提取器處理你的下一張圖
把截圖、Logo、插畫或照片拖進來，快速轉成實用調色盤。
然後複製 HEX、CSS 變數或 JSON，繼續你的設計和開發工作。
圖片調色盤提取器免費、私密，並且在瀏覽器中運行。