調色板生成器
基於色彩理論自動生成和諧的調色板。支援4種配色類型：互補色、類似色、三色組、單色調。可儲存調色板並下載為PNG圖片。
調色板生成器
生成的調色板
已儲存的調色板
0 / 20儲存您喜歡的調色板吧。
什麼是調色板生成器？
調色板生成器是一款基於色彩理論（Color Theory）自動生成和諧色彩組合的工具。選擇一個基準顏色，根據所選的配色類型，即可立即生成5種協調的顏色。
可用於網頁設計、品牌形象建構、UI/UX設計、室內色彩選擇等多個領域，快速找到專業的配色方案。即使沒有色彩專業知識，也能創建視覺上美觀的調色板。
推薦人群
- 網頁/應用設計師 – 在決定網站或應用整體色彩主題時，想要找到和諧配色的人
- 品牌策劃者 – 為標誌、名片、行銷材料選擇品牌色彩的人
- 插畫師/藝術家 – 尋找作品配色方案的創作者
- 前端開發者 – 需要CSS變數或設計令牌顏色值的人
- 室內/時尚從業者 – 規劃空間或服裝配色的人
- 社群媒體經營者 – 想要保持一致的內容色調的創作者
主要功能
- 4種配色類型 – 支援基於色彩理論的互補色、類似色、三色組、單色調等配色類型。
- 即時調色板生成 – 更改基準顏色或配色類型時，立即生成新的調色板。
- 顏色鎖定 – 鎖定喜歡的顏色，只重新生成其餘部分。
- 隨機調色板 – 需要靈感時，一鍵生成全新的調色板。
- 調色板儲存 – 在瀏覽器中儲存最多20個調色板，隨時調用。
- HEX代碼複製 – 將單個顏色或整個調色板的HEX代碼複製到剪貼簿。
- 圖片下載 – 將生成的調色板儲存為PNG圖片，便於分享或參考。
使用方法
- 選擇基準顏色 – 點擊顏色選擇器選擇所需顏色，或直接輸入HEX代碼。調色板將以此顏色為中心生成。
- 選擇配色類型 – 從下拉選單中選擇所需的配色類型。每種類型根據不同的顏色關係生成調色板。
- 查看和調整調色板 – 查看生成的5種顏色。如果想保留特定顏色，點擊鎖定按鈕固定，然後用隨機按鈕重新生成其餘顏色。
- 使用顏色 – 用每個顏色的複製按鈕複製HEX代碼，或用全部複製按鈕一次複製所有顏色。
- 儲存和匯出 – 用儲存按鈕儲存喜歡的調色板，用圖片按鈕下載為PNG檔案。
配色類型詳解
互補色 (Complementary)
色輪上正對面（180度）位置顏色的組合。產生強烈對比，具有吸引視線的效果，常用於CTA按鈕、強調元素、體育品牌。紅-綠、藍-橙是典型的互補色關係。
類似色 (Analogous)
色輪上相鄰顏色的組合。給人自然界常見的柔和、和諧感覺。適用於自然主題設計、平靜的網站、背景漸層。例如：藍-青-綠。
三色組 (Triadic)
色輪上120度間隔的三種顏色組合。給人多樣而平衡的感覺，適用於兒童品牌、遊戲UI、充滿活力的行銷材料。紅-黃-藍是基本的三原色。
單色調 (Monochromatic)
只改變單一顏色的明度和飽和度的組合。給人最安全、最精緻的感覺，廣泛用於極簡設計、企業品牌、高端UI。可實現統一而有深度的設計。
色彩理論基礎
什麼是色輪（Color Wheel）？
色輪自1666年艾薩克·牛頓首次開發以來，一直是理解顏色間關係和尋找和諧組合的基本工具。由圓形排列的12種顏色（原色、二次色、三次色）組成，根據顏色的位置關係定義各種配色類型。
HSL顏色模型
該工具內部使用HSL（色相、飽和度、明度）顏色模型計算和諧的顏色：
- 色相（Hue） – 用0~360度角度表示的顏色類型（紅=0°、綠=120°、藍=240°）
- 飽和度（Saturation） – 顏色的鮮豔程度（0%=灰色、100%=純色）
- 明度（Lightness） – 顏色的亮度（0%=黑色、100%=白色）
好的調色板原則
- 60-30-10法則 – 主色60%、輔助色30%、強調色10%的比例使用，可獲得平衡的設計。
- 考慮對比度 – 確保文字與背景之間有足夠的明度對比，以提高可讀性。
- 語境適配 – 顏色傳遞情感和資訊。選擇適合品牌或目的的顏色。
常見問題
如何在CSS中使用生成的顏色？
點擊每個顏色卡片的複製按鈕，HEX代碼（如#D4AF37）將複製到剪貼簿。可以在CSS中直接使用該值，如color: #D4AF37;或background-color: #D4AF37;。定義為CSS變數更便於管理：--primary-color: #D4AF37;
儲存的調色板存放在哪裡？
調色板儲存在瀏覽器的本地儲存（localStorage）中。使用同一瀏覽器重新訪問時可以查看已儲存的調色板。但是，清除瀏覽器快取或使用其他裝置/瀏覽器時將不顯示已儲存的調色板，請將重要的調色板下載為圖片。
我想保留特定顏色，只更改其餘顏色。
點擊每個顏色卡片上的鎖定按鈕，該顏色將被鎖定。鎖定的顏色在按隨機按鈕時不會改變。可以同時鎖定多個顏色，再次點擊即可解鎖。
如何檢查網頁無障礙的顏色對比度？
該工具專注於調色板生成。要檢查文字與背景之間的對比度（WCAG標準），請使用單獨的對比度檢查器工具。一般建議普通文字對比度為4.5:1以上，大文字為3:1以上。
我不知道該選擇哪種配色類型。
根據目的推薦：單色調最安全、最精緻，推薦給初學者。類似色適合需要自然舒適感覺時使用。互補色適合需要強烈對比的CTA或強調元素。需要活潑多樣感覺時選擇三色組。
我已經有品牌色，但想找到搭配的顏色。
在輸入框中直接輸入現有品牌色的HEX代碼。將以該顏色為基準，根據各配色類型生成調色板。通常選擇類似色或單色調可以在保持品牌感覺的同時獲得擴展的調色板，選擇互補色可以找到對比的強調色。