配色方案產生器

從任意圖片擷取顏色或選取基礎色,生成和諧的色彩調色盤——100% 在瀏覽器中執行,免費且私密。

免費使用 →

功能特性

🖼️

從圖片擷取

上傳、拖曳、貼上或透過 URL 載入圖片,使用中位切割量化演算法取得主要顏色,並按佔比排名。

🎨

6 種色彩和諧方案

從任意基礎色生成單色調、類比色、互補色、分裂互補色、三角色和四角色方案。

🔢

HEX / RGB / HSL

每個色塊均顯示三種格式——點擊即可立即複製。

🖥️

即時介面預覽

查看調色盤應用於真實範例介面的效果,包括背景、文字、按鈕和強調色。

WCAG 對比度

內建 AA/AAA 對比度檢查,協助您保持文字的可讀性和無障礙合規性。

📦

隨處匯出

複製為 CSS 變數、Tailwind 設定、SCSS 變數或 JSON,或下載 PNG 色塊圖。

🔒

100% 私密

圖片透過 Canvas 在本地處理——不會上傳至任何伺服器。

使用方法

1

選擇輸入方式

切換至「圖片」分頁以上傳相片,或使用「顏色」分頁直接選取基礎色。

2

選取基礎色

點擊擷取的色塊,或使用顏色選擇器/HEX 輸入框設定配色方案的基礎色。

3

選擇和諧方案

在六種色彩理論方案間切換,即時查看調色盤和預覽的變化。

4

複製或匯出

點擊任意數值複製,或將整個方案匯出為 CSS、Tailwind、SCSS、JSON 或 PNG 圖片。

常見問題

配色方案產生器是免費的嗎?
是的,完全免費,無需註冊、無浮水印、無使用限制。
我的圖片會上傳至伺服器嗎?
不會。所有圖片分析均在瀏覽器中使用 Canvas API 在本地執行,您的圖片不會離開您的裝置。
主要顏色如何擷取?
圖片縮小至約 100px 後使用中位切割色彩量化演算法進行分析,返回最具代表性的顏色,並按覆蓋圖片的面積比例排名。
支援哪些配色方案?
單色調、類比色、互補色、分裂互補色、三角色和四角色——均基於色彩理論的色相關係推導。
有哪些匯出格式?
可將調色盤複製為 CSS 自訂屬性、Tailwind 色彩設定、SCSS 變數或 JSON,並可下載 PNG 色塊圖。
支援哪些圖片格式?
支援透過上傳、拖放、剪貼簿貼上或 URL 方式使用的 PNG、JPG、GIF、WebP 和 SVG 圖片。

← 返回 pudone! 首頁