Color Palette Generator
使用方法
- 1
選擇配色方案
選擇相似色、互補色等配色規則，定義顏色之間的關係。
- 2
選擇風格
通過風格選擇器設定氛圍，從柔和、鮮豔或暗色中選擇最適合品牌的風格。
- 3
生成
點選生成按鈕建立獨特調色盤。鎖定喜歡的顏色，重新生成其餘顏色。
- 4
匯出
複製單個Hex色碼，或點選匯出獲取完整的Tailwind CSS配置。
色彩理論指南
理解配色和諧
- 相似色
色輪上相鄰的顏色。營造寧靜舒適的設計，適合自然或平靜的主題。
- 互補色
色輪上相對的顏色。產生高對比和強烈視覺衝擊，適合行動號召。
- 三色配色
色輪上均勻分佈的三種顏色。保持和諧的同時提供高對比度。
- 分裂互補
互補配色的變體。使用基礎色及其互補色兩側的顏色。
- 單色
單一顏色的明度和飽和度變化。簡潔優雅、舒緩平靜。
- 隨機混搭
完全隨機的顏色，無固定規則。適合激發意想不到的靈感。
探索風格情調
- 標準
平衡的飽和度和亮度。適合通用網頁設計和UI元件。
- 柔和夢幻
高亮度低飽和度。柔和舒緩，適合生活方式或春季主題。
- 霓虹鮮豔
高飽和度中等亮度。充滿活力、引人注目，適合科技或運動品牌。
- 暗色模式
低亮度去飽和色調。深邃神秘，現代感十足，減少OLED螢幕耗電。
- 復古懷舊
低飽和度略帶暖色調。懷舊經典，適合手工藝或咖啡店品牌。
推薦工具
精心挑選的實用工具
選擇和諧的顏色
Overview
色彩理論積累了幾個世紀,但網頁設計師只需幾分鐘就需要「能用」的調色盤。基於補色、類似、三色、四色等已建立的配色規則,此工具從一個基礎色數學生成和諧調色盤。支援無障礙(WCAG對比度)、深淺變體、匯出(CSS變數、Tailwind config、Figma)。
How It Works
選擇基礎色(可輸入HEX、RGB、HSL),選配色方案。工具在HSL空間計算生成調色盤。每個顏色顯示WCAG對比度,提示對正文、標題、強調的適用性。
When to Use This
新品牌/Logo設計。網站主題色選擇。演示/海報/社交圖配色。設計系統初期。營銷人員尋找「適配品牌」色。
Frequently Asked Questions
實用上3-5色是標準。主色、輔色、強調、背景、前景。再多就難以區分使用。