🎭

配色方案產生器

以基礎色為基準,依色相環角度推算補色、近似、三角、四角四種和諧配色。
色板 📂 設計 👤 ToolWorld 🏷️ v1.1.12
載入中...
以基礎色的色相為基準,依色相環角度推算四種和諧配色

使用說明

📖 工具介紹


配色方案產生器是一款幫助設計師、開發者與品牌營運者快速找到和諧配色的線上工具。很多人選色時憑感覺東挑西選,結果常常顧此失彼;這款工具把經典的色彩和諧理論固化為可計算的色相環偏移:您只需選定一個基礎色,工具便取出它的色相,再在同一個飽和度與明度水準上,沿色相環分別旋轉 180°、±30°、120°、90°,一次給出補色、近似色、三角與四角四組成套配色。補色對比強烈、適合強調;近似色柔和統一、適合大面積鋪陳;三角配色平衡活潑;四角配色層次豐富。每一組都以色板卡片呈現,帶星號的那一塊就是您選的基礎色,點擊任意色塊即可複製它的 HEX 值,也可以一鍵複製全部 HEX 或下載色板檔案。所有換算基於標準 RGB↔HSL 公式,色相環繞週期 360° 自動正規化,顏色越界自動夾取,全程離線執行。

✨ 功能特點


  • 補色配色:基礎色相對色相環旋轉 180°,對比鮮明,適合按鈕與強調色
  • 近似配色:色相偏移 ±30°,過渡自然,適合背景漸層與同色系搭配
  • 三角配色:三個色相各差 120°,平衡中帶活潑,適合品牌主輔色組合
  • 四角配色:四個色相各差 90°,層次豐富,適合多區塊頁面配色
  • 點按即複製:任意色塊一鍵複製 HEX,也可一鍵複製全部色值清單
  • 色板下載:整套配色可匯出為文字檔案歸檔,方便團隊共享

📝 使用方式


  1. 用頂部取色器或直接輸入 HEX,選定一個基礎色
  2. 頁面會自動產生四組和諧配色卡片,每張卡片頂部標註偏移角度
  3. 瀏覽四組方案,找到最符合專案氣質的那一組
  4. 點擊其中任意色塊,即可複製該色的 HEX 值到剪貼簿
  5. 需要整套時點「複製全部 HEX」或「下載色板」匯出完整清單

⚠️ 注意事項


  • 配色邏輯:本工具固定保持基礎色的飽和度與明度不變,僅旋轉色相,屬經典色相環配色法
  • HEX 格式:僅接受 #RRGGBB,非法輸入會提示而不會產生亂色
  • 角度正規化:色相以 360° 為週期,偏移後自動環繞取模,不會越界
  • 對比度:和諧配色保證色相關係美觀,但內文可讀性請另用對比度工具校驗
  • 本機運算:所有換算在瀏覽器內完成,不發送網路請求,隱私安全

相關推薦

⏫︎