會產生哪些和諧類型？

互補色（+180°）、類似色（±30°）、三色（±120°）、分裂互補色（±150°），飽和度與亮度與基色相同。

可以匯出 CSS 變數嗎？

可以。複製 `:root` 自訂屬性區塊，或點色塊複製 HEX。

能取代品牌色規範嗎？

不能。這只是色相環探索起點；角色命名、對比度與深淺模式仍需另外驗證。

灰色基色為何色塊都一樣？

飽和度接近 0 時旋轉色相不會改變顏色，黑白灰會讓所有和諧落到同一 HEX。

Utill.net

配色與主題產生

從任意基色產生互補色、類似色、三色組等和諧配色方案。可直接用於設計和開發。

此轉換僅在您的瀏覽器中執行，不會上傳任何內容。

色彩

十六進位

基色#3b82f6
互補色#f6af3b

僅不透明色彩（HEX / RGB / HSL），無 alpha。可貼上 #rgb 簡寫或完整 #rrggbb。

基色

#3b82f6

互補色

#f6af3b

類似色

#3bdff6

#523bf6

三色

#f63b82

#82f63b

分裂互補色

#f6523b

#dff63b

CSS 變數

:root {
  --color-base: #3b82f6;
  --color-complementary: #f6af3b;
  --color-analogous-1: #3bdff6;
  --color-analogous-2: #523bf6;
  --color-triadic-1: #f63b82;
  --color-triadic-2: #82f63b;
  --color-split-1: #f6523b;
  --color-split-2: #dff63b;
}

這個工具是什麼？

從基準 HEX（#rgb 或 #rrggbb）透過 HSL 色相旋轉產生互補色、類似色、三色與分裂互補色板，並可複製色塊或 CSS 變數區塊。

不能取代品牌色規範或對比度檢查器。上線前請另外驗證文字對比與語意角色。

常見用途

用產品主色 HEX 起草介面強調色
匯出原型用的 --color-* CSS 變數
評審前快速比較互補色與分裂互補色

如何使用

用取色器或輸入 HEX 設定基色。
查看基色 / 互補 / 類似 / 三色 / 分裂互補分組。
點色塊複製 HEX，或複製 CSS 變數區塊。
上線前在本工具外驗證對比度與品牌契合度。

範例

輸入 / 設定	輸出	說明
`#3b82f6`	互補 `#f6af3b`；類似 `#3bdff6`, `#523bf6`	範例藍
`#ff0000`	互補 `#00ffff`；三色 `#00ff00`, `#0000ff`	純紅 → 青互補
`#808080`	全部 `#808080`	飽和度 0 — 色相旋轉無效

實務上常見陷阱

產生色板不是已核准的品牌指南。
HSL 等角度在感知上不均勻（與 OKLCH 不同）。
無彩色基色會讓所有分組落到同一 HEX。

參考資料

最後審閱: 2026-07-27

常見問題

會產生哪些和諧類型？: 互補色（+180°）、類似色（±30°）、三色（±120°）、分裂互補色（±150°），飽和度與亮度與基色相同。
可以匯出 CSS 變數嗎？: 可以。複製 `:root` 自訂屬性區塊，或點色塊複製 HEX。
能取代品牌色規範嗎？: 不能。這只是色相環探索起點；角色命名、對比度與深淺模式仍需另外驗證。
灰色基色為何色塊都一樣？: 飽和度接近 0 時旋轉色相不會改變顏色，黑白灰會讓所有和諧落到同一 HEX。