調色板
Image Palette Extractor

✨ 特色

  • 自動從圖片提取主要顏色，支援寫真氛圍（Median Cut）和UI/Logo（K-Means）兩種模式
  • 一鍵複製HEX、RGB、HSL，自動產生Tailwind CSS設定程式碼
  • 在UI預覽中將調色板套用至背景、文字和按鈕，即時查看效果
  • 無需上傳，完全本地處理，不向任何伺服器傳送資料

🪄 適用場景

從照片提取配色

從風景或產品照片中即時產生符合氛圍的調色板。

品牌色彩識別

從Logo或參考圖片提取品牌色彩，立即複製HEX值。

Web設計工作流

在UI預覽中確認配色效果，並匯出CSS或Tailwind設定程式碼。

顏色代碼轉換

在HEX、RGB、HSL格式之間互相轉換，用於開發和設計工具。

🔒 隱私

本工具完全於瀏覽器中執行，圖片不會上傳至任何外部伺服器。

❓ 常見問題

支援哪些圖片格式？

支援瀏覽器可顯示的所有主要格式，包括JPEG、PNG、WebP、GIF、BMP和SVG。

可以更改提取的顏色數量嗎？

可以。最多可提取16種顏色，數量可自由設定。

可以產生Tailwind CSS程式碼嗎？

可以。提取的調色板可自動匯出為Tailwind CSS設定檔（tailwind.config.js）程式碼片段。

圖片會傳送到伺服器嗎？

不會。所有處理在瀏覽器內完成，圖片資料不會傳送至任何外部伺服器。
等待圖片
圖片僅在瀏覽器內處理 · 不會上傳至任何地方
拖放圖片到此處
點擊選擇檔案，或直接貼上到此頁面。所有分析均在瀏覽器內完成。
點擊選擇 ⌘ / Ctrl + V 貼上
JPEGPNGWEBPGIFSVG
已載入圖片的預覽
#000000
—
提取模式Algorithm
提取顏色數量Swatches
6色
調色板 Palette
0 色
color.omikuji.dev
// 載入圖片後將生成程式碼
Aurora 產品定價公司
New release
用你的配色，
馬上試試看。
將提取的顏色分配給背景、文字和按鈕，即時查看在真實 UI 中的效果。
配色預覽
拖放即可套用顏色
選擇角色後點擊調色板顏色，或將顏色卡片拖曳到此處。
背景—
文字—
按鈕—
tools.omikuji.dev
使用 Median Cut / K-Means 提取顏色 · 完全在客戶端執行
拖放到此處進行分析
圖片不會被上傳