跳至主要內容
SPCXTools

色票產生器

只要挑選一個顏色,就能根據色彩學原理產生和諧的五色色票。

本機執行 — 檔案絕不會離開您的裝置

正在載入工具…

如何使用 色票產生器

  1. 1使用選色器挑選基礎色,輸入 HEX/RGB/HSL 數值,或點擊隨機。
  2. 2選擇配色方案,例如互補色、類似色或三等分配色。
  3. 3點擊任一色塊即可複製其 HEX 色碼。
  4. 4將整組色票複製為 CSS 自訂屬性或 JSON 格式。

從單一顏色建立調色盤

挑選互相搭配的顏色,往往是設計網站、App、簡報、Logo 或海報時最困難的環節之一。色彩學在色相環上歸納出經過驗證的色彩關係,而這款配色產生器能直接為您套用這些原理。只要從您喜歡的顏色(或品牌色)開始,選擇一種配色方案,就能產生五種協調的色彩,讓您輕鬆複製並應用到專案中。

功能特色

  • 七種配色方案:互補色、類似色、三角配色、分裂互補色、四方配色、單色與明暗色階。
  • 支援任意起始顏色:可輸入 HEX、RGB、HSL 或 CSS 顏色名稱,也可以隨機挑選。
  • 點擊即可複製任何色塊。
  • 匯出為 CSS 自訂屬性或 JSON 陣列。
  • 高易讀性標籤:文字會根據對比度自動切換為黑色或白色。

該使用哪種配色方案?

配色方案 視覺氛圍 適用於
互補色 大膽、高對比 行動呼籲按鈕、運動品牌、促銷活動
類似色 平靜、和諧 自然、健康養生、背景設計
三角配色 活潑、平衡 兒童產品、插畫
分裂互補色 鮮明但不突兀 需要強烈強調色的網站
四方配色 豐富、色彩繽紛 資訊圖表與統計圖
單色 優雅、極簡 企業網站、作品集
明暗色階 系統化 設計系統、UI 狀態

從配色到設計

有了配色後,您可以使用 色彩對比度檢查工具 確保文字在各種背景上都清晰易讀;透過 色彩轉換工具 將顏色轉換為 RGB、HSL 或用於印刷的 CMYK 色碼;並使用 CSS 漸層產生器 將其中兩種顏色製作成平滑的漸層背景。

常見問題

什麼是互補色配色?
互補色位於色相環的兩側相對位置,例如藍色與橘色。強烈的對比能讓點綴色與行動呼籲 (CTA) 更加醒目。建議以其中一色為主色,另一色則少量點綴使用。
類似色、三等分配色與四等分配色有什麼不同?
類似色在色相環上相鄰,給人平靜且和諧的感覺。三等分配色相隔 120°,充滿活力又保持平衡。四等分配色 (正方形) 使用相隔 90° 的四種色相,色彩最為豐富——通常搭配一種主色效果最好。
我該如何在網站上使用五色配色盤?
常見的作法是 60-30-10 法則:約 60% 的中性色背景、30% 的主色與 10% 的點綴色。將最深的顏色用於文字,並使用對比度檢查工具確認每種文字與背景的搭配。
我可以從我的品牌色開始嗎?
可以。輸入您品牌的 HEX 色碼作為基準色,所有的配色方案都會以此為基礎生成。若想從 Logo 或網站截圖中擷取品牌色,可以使用圖片選色工具。
這些顏色是如何計算出來的?
基準色會先轉換為 HSL (色相、飽和度、明度)。各種配色方案會依據色相環上的固定角度旋轉色相,而單色配色與深淺色階則是保持色相不變,僅調整明度。