一個給初學者用的顏色調色盤產生器，能用三個步驟，把一個基礎顏色，變成一組平衡、可直接使用的調色盤：選擇一個起始顏色、選擇一種配色方案，再複製每一個色票的 HEX、RGB，或 HSL 數值。這個工具建立在 HSL 色彩理論之上，會依照固定的角度，繞著色環旋轉你基礎顏色的色相，產生設計師世世代代以來手動運用的色彩關係——互補色在 180°、三分色在 120°、類比色在 ±30°，還有更多。初學者經常會跳過色彩理論，因為那些數學看起來很嚇人，但這個產生器會替你完成這些計算，同時維持關係在數學上正確，包括正確的色相環繞處理（因此 350° + 30° 會落在 20°，而不是 380°）。結果就是一組情境氛圍維持一致的調色盤，因為色相、飽和度與明度是分開處理的。你可以把這些顏色直接放進 CSS、Figma，或品牌風格指南裡，並透過調整每個色票下方顯示的 HSL 數值，微調任何一種色調。整個過程都在你的瀏覽器中執行，因此不需要註冊，也不會上傳任何內容。
為什麼初學者會用顏色調色盤產生器
初學者通常都會卡在同樣三個問題上：如何選出一個起始顏色、如何知道哪些次要顏色與它搭配起來好看，以及如何在不失去和諧感的前提下，找出足夠的變化。一個顏色調色盤產生器，能一次解決這三個問題。基礎顏色的問題，靠一個顏色選擇器與一個 HEX 輸入欄位解決，讓你可以從你已經有的品牌顏色、你喜歡的一張截圖，或從另一個設計中複製來的數值開始。搭配的問題，靠六種內建的配色方案解決，這些方案把設計師最常使用的色彩關係都編碼進去了。變化的問題，則靠單色調解決，它會在維持同一種色相的情況下，逐步改變明度，給你一個乾淨的色調刻度，適合用在介面中的陰影、邊框，與 hover 狀態上。
沒有產生器的話，初學者經常會選到色相太接近、太飽和，或對比太強烈的顏色，結果看起來就很隨機。有了產生器，每一組調色盤，都是建立在一個可預測的數學關係上，因此這些顏色，會給人一種刻意安排過的感覺。這也是為什麼設計師在正式選定色票之前，仍然會在色環上打草稿的原因：這些關係是誠實的，而肉眼能看出哪裡不對勁。根據 color theory 的基本原理，這些關係已經被系統化了好幾個世紀，一個產生器，只是讓你不需要親手畫圓，就能運用這些原理。
六種配色方案說明
一個建立在 HSL 色相旋轉之上的顏色調色盤產生器，提供六種配色方案，每一種都有不同的氛圍。下表整理了每一種方案的作用，以及對初學者來說，它通常最適合用在哪裡。
| 方案 | 色相旋轉 | 感覺如何 | 常見用途 |
|---|---|---|---|
| 互補色 | +180° | 強烈、高對比 | 行動呼籲按鈕、主視覺文字、強調文字 |
| 類比色 | ±30° | 平靜、協調、自然 | 背景、情境板、插畫 |
| 三分色 | ±120°（3 種顏色） | 平衡、鮮明 | 品牌調色盤、海報、資料視覺化 |
| 四分色 | 90°（4 種顏色） | 豐富、多變 | 編輯排版、儀表板、複雜介面 |
| 分裂互補色 | 180° ± 30° | 較柔和的對比 | 需要變化但不想有張力的強調色 |
| 單色調 | 同一色相，明度不同 | 乾淨、層次分明 | 陰影、邊框、hover 狀態、層次感 |
每一種方案的色相旋轉角度都是固定的，因此輸出結果是可預測的。舉例來說，一個色相為 217° 的基礎顏色，套用互補色方案，會產生一個色相為 37° 的搭配顏色，因為 217° + 180° = 397°，而在 0 到 360° 的色相環上，這會環繞回 37°。這種環繞處理是刻意設計的——不論你的基礎顏色落在色環的哪個位置，它都能讓調色盤在數學上維持正確。
如何在 Color Palette Generator 中建立你的第一組調色盤
對初學者來說，最快得到一組可用調色盤的方式，就是三個步驟。Color Palette Generator 完全在你的瀏覽器中執行，因此你不需要註冊，就能跟著操作。
- 用顏色選擇器選一個基礎顏色，或直接在輸入欄位中輸入像 #3b82f6 這樣的 HEX 值。
- 從六個選項中選擇一種配色方案——互補色、類比色、三分色、四分色、分裂互補色，或單色調。
- 點擊調色盤中的任何一個色票，把它的 HEX 值複製到剪貼簿，並閱讀每個色票下方的 RGB 與 HSL 數值。
這就是完整的工作流程。當你改變基礎顏色或配色方案時，調色盤會立即更新，因此你可以不斷實驗，而不需要重新載入頁面。如果你想從一張截圖，或另一個設計中，取得一個起始的 HEX 值，可以先透過 HEX to RGB Converter 處理，再把數值貼回這個產生器裡。
如何為你的專案選擇合適的配色方案
你選擇的配色方案，會改變整個專案的調性，因此在開始亂猜之前，值得先停下來想想。對於介面與網頁設計來說，互補色或分裂互補色的組合，通常是最安全的起點——你能為按鈕與標題取得強烈的對比，同時讓你的基礎顏色，維持品牌的主要聲音。對於編輯類作品、海報，或想要活力感的行銷圖像來說，三分色與四分色，能給你更多可以運用的顏色，而不需要隨便亂抓色票。
對於情境板、插畫，或任何顏色應該要感覺協調、而不是對比強烈的作品來說，類比色是正確的選擇。這些顏色，在色環上彼此相鄰，因此它們共享相近的底色調，看起來就像屬於同一個場景。單色調，很難單獨當成一組完整的調色盤來使用，但它與其他任何一種方案搭配起來，效果都很好：先選一個基礎顏色，產生一組三分色作為強調色，再切換到單色調，圍繞著那些強調色，建立出中性的淺色調與深色調。
初學者從頭到尾的完整工作流程
初學者典型的流程大致是這樣的。從你的品牌顏色開始——也就是你已經在標誌或風格指南中使用的 HEX 值。把它輸入到顏色調色盤產生器裡。先試試互補色方案，看看你的強調色會是什麼樣子，接著切換到三分色，看看你的品牌顏色，與兩個間隔均勻的輔助顏色搭配起來的效果。把你喜歡的 HEX 值記下來，再切換到單色調，為陰影、邊框，與停用狀態，產生一組色調刻度。
你可以一次坐下來完成這一切，不需要上傳任何內容。這個產生器在瀏覽器中執行，因此你實驗過的顏色，絕不會離開你的裝置。當你有了一組想要定案的調色盤時，把這些 HEX 值貼進你的 CSS 變數、Figma 樣式，或品牌風格指南裡。因為每一個色票都會顯示 HEX、RGB 與 HSL，你可以選擇適合你工作流程的格式：HEX 適合快速複製貼上、RGB 適合需要通道層級控制的時候，而 HSL 則適合你想微調明度、而不想重新推導色相的時候。
發布之前先檢查顏色對比
一組和諧的調色盤，並不會自動變成一組具無障礙性的調色盤。兩個和諧度相同的顏色，仍然可能無法通過 WCAG 對比度要求，尤其是在文字很小或很細的時候。當你有了一組喜歡的調色盤之後，把任何文字與背景的搭配，拿去用 Color Contrast Checker 測試，確認它符合 WCAG AA（一般文字 4.5:1）或 AAA（7:1）的比例。這個對比度檢查工具，測試的正是你從產生器裡點出來的確切 HEX 值，因此你可以透過調整每個色票下方的 HSL 明度，逐步調整，直到和諧感與無障礙性都滿足為止。
想更深入了解如何建立符合 WCAG 標準的調色盤，可以參考 Color Palette Generator for Accessibility Contrast。
給第一次建立調色盤的人的顏色小技巧
有幾個習慣，能幫初學者避開最常見的調色盤錯誤。第一，讓整組調色盤的飽和度維持一致——一個高飽和度的顏色，放在一個柔和的顏色旁邊，通常會讓人感覺不平衡。第二，中性色盡量依靠單色調來產生，而不要手動發明灰色；這樣算出來的階層，在數學上是均勻的，看起來也會像是屬於這個品牌的一部分。第三，剛開始的時候，每個專案限制自己只用一種配色方案。在同一件作品中，把互補色與三分色混在一起，經常會產生視覺上的雜訊，等你更了解顏色之間如何互動之後，再打破這條規則也不遲。
最後，在正式定案之前，多輪換幾個基礎顏色試試看。如果你還不確定自己的品牌顏色，可以試試五到十個起始色相，看看每一個搭配哪一種方案感覺最對。學習各種方案之間差異最快的方法，就是在同一個基礎顏色上，快速切換過一遍——正是這種一致性，讓這些色彩關係變得容易理解，一旦你能預測輸出結果，你不只能在工具裡建立調色盤，也能在腦中直接建立。
如果你正在權衡選項，Pick the Right Approach to Generate a CSS Cubic Bezier 詳細涵蓋了這個主題。