🎨
免費配色方案產生器
從任意基礎顏色產生互補色、類似色、三角色和單色配色方案。一鍵複製十六進位制色值。
載入後可離線使用
輸入十六進位制色值、teal 或 tomato 這樣的顏色名，或 rgb(20, 184, 166) / hsl(174, 80%, 40%)，然後按回車鍵。
品牌配色 · 7 種顏色
複製格式
匯出:
基礎色
白底 2.5未通過
黑底 8.4AAA
強調色
白底 2.9未通過
黑底 7.2AAA
淺色調
白底 1.1未通過
黑底 19.4AAA
深色調
白底 9.0AAA
黑底 2.3未通過
淺中性色
白底 1.1未通過
黑底 19.3AAA
中性色
白底 4.1AA 大字
黑底 5.1AA
深中性色
白底 16.1AAA
黑底 1.3未通過
文字與背景對比檢查
大標題範例
這組配色的正文範例
8.44:1普通文字 AAA大號文字 AAA
試試這些
工作原理
此工具不使用任何外部庫——所有顏色計算都以手寫 JavaScript 直接在你的瀏覽器中執行。它在十六進位制和 HSL 之間轉換你選擇的顏色，然後透過色相環上的算術應用經典色彩理論的和諧規則（互補、三等分、類似色等），產生每個調色盤。
- 1十六進位制轉 HSL選擇顏色後，工具將十六進位制字串解析為 RGB 分量，再轉換為 HSL（色相、飽和度、亮度）。色相是色環上 0–360 度的位置；調色盤的計算都在這個空間中進行。
- 2色相算術實現和諧配色每種調色盤型別都是應用於基礎色相的固定旋轉公式。互補色加 180°，三等分加 120° 和 240°，四等分每步 90°，分裂互補使用 150° 和 210°。單色和明暗色階保持色相和飽和度不變，逐步調高和調低亮度。
- 3HSL 轉十六進位制輸出每個計算出的 HSL 三元組都用標準色度公式轉換回十六進位制顏色。結果顯示為色條，標籤顏色根據簡單的亮度閾值自動對比（淺色塊上用深色文字，深色塊上用淺色文字）。
- 4以你喜歡的格式匯出調色盤可以複製為十六進位制字串，或匯出為 CSS 變數檔案（:root { --color-1: … }）、SCSS 變數、Tailwind 設定片段、JSON 物件或 PNG 色條。PNG 匯出使用瀏覽器的 Canvas API（toDataURL）繪製每個色塊及其十六進位制標籤——點選時全部在本地產生。