產生🔒 在瀏覽器中運行

顏色混合器

混合兩種顏色並產生漸層色盤

顏色A

#6366f1

顏色B

#ec4899

混合: 50% 顏色B#a857c5

#a857c5

漸層步驟

#6366f1

#7a61e2

#915cd4

#a857c5

#be52b6

#d54da8

#ec4899

使用案例

為行銷網站在兩個品牌色之間找一個有質感的分隔色。
為按鈕的 hover 狀態挑選介於預設色與按下色中間的顏色。
設計一組在兩個品牌主色之間平滑過渡的圖表色票。
為兩個相鄰的 UI 區塊挑選作為過渡的背景色調。
為 Figma 中手繪的漸層稿產生中間色票。

關於顏色混合器

顏色混合器可以將兩種顏色混合在一起，並產生它們之間的平滑漸層調色盤。它免費、在瀏覽器中執行，不會在任何伺服器上儲存資料。非常適合探索顏色過渡和尋找中間色調的設計師。

常見問題

如何混合兩種顏色？

使用顏色選取器選取兩種顏色，工具會立即顯示混合結果以及它們之間的漸層中間色。你可以複製調色盤中任何顏色的HEX代碼。

是否會有資料傳送到伺服器？

不會，所有顏色混合計算都在瀏覽器中進行。不會有顏色值或偏好傳送到任何伺服器。所有操作都在你的裝置上本機執行，完全私密。

混合器支援哪些顏色格式？

你可以輸入HEX格式的顏色，工具以HEX和RGB值顯示結果。產生的漸層調色盤提供多種中間色，讓你在設計中輕鬆找到完美的過渡色。

為什麼在 RGB 中混色有時會得到偏濁的中間色？

RGB 內插會經過兩色的幾何平均值，對互補色（例如紅 + 綠）而言，結果會落在灰色附近。這在數學上正確，但視覺上沉悶。若想得到更鮮明的中間色，可改用 gradient-gen 工具自行擺放多個色標，或挑選色相較接近的兩個顏色。

可以將色階匯出為 CSS 漸層嗎？

本工具不行——Color Mixer 產生的是離散色票，而非連續漸層。若需要 CSS 的 linear-gradient 或 radial-gradient 字串，請使用專屬的 gradient-gen 工具，可放置多個色標並直接匯出 CSS。你可以把 Color Mixer 起點與終點的 hex 值貼入該工具。

使用案例

為行銷網站在兩個品牌色之間找一個有質感的分隔色。

為按鈕的 hover 狀態挑選介於預設色與按下色中間的顏色。

設計一組在兩個品牌主色之間平滑過渡的圖表色票。

為兩個相鄰的 UI 區塊挑選作為過渡的背景色調。

為 Figma 中手繪的漸層稿產生中間色票。