Windows 上的配色產生器是一個瀏覽器型工具，可從單一基準色彩建立協調的配色方案 — 無需安裝、無需註冊、無需上傳。您可以挑選一個基準 HEX（例如 #3b82f6）或使用色彩選擇器，在色相環上選擇一種關係，例如互補色、類似色或三角配色，工具便會回傳一組小色票，以 HEX、RGB 與 HSL 格式呈現。由於每個現代 Windows 瀏覽器 — Microsoft Edge、Chrome 與 Firefox — 皆已支援呈現與複製色彩所需的 HTML、CSS 與 JavaScript，因此同一個產生器可在 Windows 11、Windows 10 與更舊的版本上執行，無需額外軟體。您可以在一個視窗中開啟像 Figma 這樣的設計應用，在另一個視窗的瀏覽器分頁中產生配色，點擊任一色票複製其 HEX，然後直接貼到您的樣式表、品牌對照表或設計 token 檔。配色產生器完全遵循這個流程 — 挑選、選擇配色、複製 — 所有資料皆保留在您的本機上。
為何瀏覽器型產生器在 Windows 上運作良好
現代 Windows 電腦預設搭載 Microsoft Edge，多數使用者也另外安裝了 Chrome 或 Firefox。這些瀏覽器皆能執行完整的配色產生器而無需安裝任何東西，因為工具所需的一切 — 色彩選擇器、HSL 運算與剪貼簿存取 — 都由標準網頁技術處理。配色產生器正符合此模式：它在您的瀏覽器中使用用戶端 JavaScript 執行，無需註冊，並將您的色彩保留在裝置上。對於 Windows 專用工作流程來說，這消除了尋找、下載、更新並信任另一個桌面應用的麻煩。這也意味著同一個配色產生器在 Windows 11、Windows 10 與更舊的版本上行為一致，因為執行工作的是瀏覽器層，而非作業系統本身。
對於已在 Figma、VS Code 或 Affinity 等 Windows 應用中工作的設計師來說，瀏覽器型配色工具可巧妙地穿插其中。您可以保持編輯器開啟，在瀏覽器分頁中產生配色，點擊複製每個 HEX，然後直接貼到樣式表或設計檔中。工具同時顯示 RGB 與 HSL 與 HEX 並列，因此您可以用當前應用所期望的任何格式貼上數值，無需開啟第二個轉換工具。
如何在 Windows 上產生配色
- 選擇基準色彩。 在瀏覽器中開啟配色產生器。使用色票選擇器或在輸入欄位中輸入 HEX 值，例如 #3b82f6。選擇器涵蓋整個色彩空間，而輸入 HEX 是從現有品牌色彩或您已核准的色彩開始作業的最快方式。
- 選擇配色方案。 點擊其中一個配色按鈕 — 互補色、類似色、三角配色、四角配色、分裂互補色或單色。配色會立即更新。每個配色都在 HSL 色彩空間中透過繞 0–360° 圓旋轉色相來計算，因此切換時運算結果保持可預測。
- 複製您的色票。 點擊結果中的任一色票即可將其 HEX 複製到剪貼簿。您也可以在每個色票下方讀取其 RGB 與 HSL 值，當您想在 CSS 中手動微調飽和度或亮度而不離開編輯器時，這非常實用。
六種配色方案說明
每種配色方案都是 HSL 色相圓上的固定旋轉，了解每個的作用正是將單一色彩轉化為刻意配色的關鍵。下表摘要列出您在 Windows 上可挑選的六種關係。
| 方案 | 從基準色的色相旋轉 | 視覺效果 | 最適用於 |
|---|---|---|---|
| 互補色 | +180° | 高對比，一個大膽的強調色 | 行動呼籲按鈕、英雄區強調色 |
| 類似色 | ±30° | 平靜、和諧、低張力 | 背景、插圖、情緒板 |
| 三角配色 | ±120°（三個點相距 120°） | 平衡、活潑、間距均勻 | 資訊圖表、俏皮的品牌組合 |
| 四角配色 | ±90°（兩對） | 豐富的雙對配色，變化多端 | 儀表板、複雜版面配置 |
| 分裂互補色 | 180° ±30° | 比直接互補更柔和的對比 | 彈性的強調色系統 |
| 單色 | 0° 色相，變化的亮度 | 單一色相的色階 | 陰影、邊框、懸停狀態、深度 |
每種配色背後的運算方式相同 — 從一個色相（例如 #3b82f6 的 217°）開始並加以旋轉。互補色在 +180° 給出 397°，會在 360° 圓上迴繞回 37°。類似色在 ±30° 分別落在 187° 與 247°。三角配色在 ±120° 分別落在 97° 與 337°。由於產生器會為您處理迴繞（例如 350° 的色相加上 30° 會落在 20°，而非 380°），即使接近色相輪邊緣，結果在數學上仍保持正確。其背後的關係源自古典色彩理論，這是設計師數十年來手動使用的相同邏輯。
在配色中讀取 HEX、RGB 與 HSL 值
配色產生器中的每個色票都以三種方式顯示，讓您能貼到任何您正在使用的工具中。HEX 是以 # 為前綴的六位數代碼，直接對應到 CSS 色彩屬性與大多數設計工具。RGB 將紅、綠、藍三個通道列出於 0–255 刻度上，當工具僅接受數值輸入時很實用。HSL 將色彩拆分為色相、飽和度與亮度，這是最容易手動調整色彩的格式：微調亮度以獲得較深的懸停狀態，或降低飽和度以獲得柔和的背景。
在 Windows 上這點很重要，因為不同應用接受不同格式。CSS、VS Code 與大多數網頁工具偏好 HEX。Figma 與 Adobe 應用通常接受 HEX 或 RGB。設計系統與 token 檔案常使用 HSL，因為它讓程式化的變體 — 更亮、更暗、更透明 — 變得簡單明瞭。透過同時顯示三種格式，產生器讓您無需自行轉換即可挑選正確格式。如果您確實需要轉換單一值，本站的 RGB 轉 HEX 或 HEX 轉 RGB 工具可在相同的純瀏覽器工作流程中處理單一色彩。
Windows 上常見的配色工作流程
一個典型的起點是將您現有的品牌 HEX 作為基準輸入，然後產生互補色或三角配色組合，以找出符合品牌的強調色。接著，切換至單色配色即可建立背景、分隔線與停用狀態所需的中性色調與陰影 — 全部來自同一個起始色相。這個單色工作流程涵蓋了小型產品或行銷頁面的大部分需求，無論您的畫布是 PowerPoint 中的簡報、Canva 中的海報，還是 Figma 中的網頁 mockup，皆同樣適用。
對於資料密集的 Windows 工作 — 儀表板、報表、圖表 — 四角配色與三角配色提供足夠不同的色相來區分資料序列，無需迫使閱讀者追蹤過多相似的色彩。對於 UI 工作，單色配色可從一個色相提供色階，這是以最簡潔方式表達懸停狀態、聚焦環、陰影與海拔圖層的方法。從事情緒板工作的設計師常從類似色模式開始，因為 ±30° 的旋轉可給您感覺彼此相屬的色彩 — 接近您在照片或布料色樣中看到的樣貌。
由於此工具在使用者端執行，您可以同時開啟多個瀏覽器分頁並列顯示不同配色方案，視覺化地比較它們，並選定最符合需求的一個，而不會遺失任何一個。
Windows 設計的無障礙性與對比
和諧的配色解決的是色彩之間的關係問題，而非文字與背景之間的對比問題。建立配色後，請在出貨前將前景與背景組合透過對比檢查器檢查。根據 WCAG 2.2，內文與標準 UI 元件在正常文字下需要至少 4.5:1 的對比度，在大字與 UI 元素下則需 3:1。本站的色彩對比檢查器可讓您在同一個瀏覽器分頁中貼上新配色的任何 HEX，並對照 AA 與 AAA 門檻進行驗證。
就更廣泛的無障礙工作而言，單色配色通常是最安全的起點，因為它提供一個色階供您微調，直到每個文字與背景配對皆通過測試。互補色與三角配色提供強烈的色彩識別度，但任何用作文字的色彩都需要額外的對比檢查。將配色產生器視為第一步 — 色彩關係 — 而將對比檢查器視為第二步 — 可讀性 — 您的 Windows 設計便能在兩方面皆站得住腳。
如果您正在權衡選項，配色產生器：色階與變化詳解對此有詳細說明。
如果您正在權衡選項，Windows 上的色彩對比檢查器：在瀏覽器中執行對此有詳細說明。