從單一顏色建立調色盤
挑選互相搭配的顏色,往往是設計網站、App、簡報、Logo 或海報時最困難的環節之一。色彩學在色相環上歸納出經過驗證的色彩關係,而這款配色產生器能直接為您套用這些原理。只要從您喜歡的顏色(或品牌色)開始,選擇一種配色方案,就能產生五種協調的色彩,讓您輕鬆複製並應用到專案中。
功能特色
- 七種配色方案:互補色、類似色、三角配色、分裂互補色、四方配色、單色與明暗色階。
- 支援任意起始顏色:可輸入 HEX、RGB、HSL 或 CSS 顏色名稱,也可以隨機挑選。
- 點擊即可複製任何色塊。
- 匯出為 CSS 自訂屬性或 JSON 陣列。
- 高易讀性標籤:文字會根據對比度自動切換為黑色或白色。
該使用哪種配色方案?
| 配色方案 | 視覺氛圍 | 適用於 |
|---|---|---|
| 互補色 | 大膽、高對比 | 行動呼籲按鈕、運動品牌、促銷活動 |
| 類似色 | 平靜、和諧 | 自然、健康養生、背景設計 |
| 三角配色 | 活潑、平衡 | 兒童產品、插畫 |
| 分裂互補色 | 鮮明但不突兀 | 需要強烈強調色的網站 |
| 四方配色 | 豐富、色彩繽紛 | 資訊圖表與統計圖 |
| 單色 | 優雅、極簡 | 企業網站、作品集 |
| 明暗色階 | 系統化 | 設計系統、UI 狀態 |
從配色到設計
有了配色後,您可以使用 色彩對比度檢查工具 確保文字在各種背景上都清晰易讀;透過 色彩轉換工具 將顏色轉換為 RGB、HSL 或用於印刷的 CMYK 色碼;並使用 CSS 漸層產生器 將其中兩種顏色製作成平滑的漸層背景。