顏色混合器

線上工具，按您想要的比例混合2-5種顏色建立新顏色。提供RGB加色混合、漸層預覽、中間色生成和配色調和推薦功能。一鍵複製HEX和RGB值。

最後更新: 2026/01/17

混合顏色

混合結果

#000000

rgb(0, 0, 0)

漸層預覽

中間色

步數:

配色調和推薦

混合歷史

尚無儲存的歷史記錄

什麼是顏色混合器？

顏色混合器是一款線上工具，可以按照您想要的比例混合兩種或更多顏色來建立新顏色。您可以同時混合最多5種顏色，並使用滑桿精細調整每種顏色的比例。使用RGB加色混合方式，為數位環境提供準確的顏色混合結果。

它可以用於網頁設計、UI/UX工作、品牌顏色開發等各種領域。您可以立即查看並複製混合顏色的HEX代碼和RGB值，以便在專案中直接使用。透過漸層預覽、中間色生成和配色調和推薦功能，可以實現更具創意的色彩工作。

適用場景

品牌顏色開發 – 基於現有的品牌顏色建立輔助色或強調色，構建統一的調色盤。
UI/UX設計 – 以精確的混合比例從基礎顏色生成按鈕懸停狀態、停用狀態等變體顏色。
網頁開發 – 在建立CSS漸層之前預覽中間色的效果，找到和諧的配色組合。
插畫創作 – 當需要兩種顏色之間的自然過渡色時，使用中間色生成功能建立平滑的色譜。
室內設計 – 數位化模擬油漆和配飾的顏色，預測混合兩種顏色的結果。
色彩學習 – 直觀地理解顏色混合原理，並實驗互補色、類似色、三元色等配色調和理論。

主要功能

多顏色混合 – 可同時混合2到5種顏色。自由調整顏色數量，從簡單的雙色混合到複雜的多色混合都能實現。
比例調節滑桿 – 使用滑桿將每種顏色的混合比例從0%精確調整到100%。結果即時更新，輕鬆找到理想的顏色。
漸層預覽 – 以漸層形式查看混合中使用的顏色如何自然地連接在一起。作為CSS漸層工作的參考非常有用。
中間色生成 – 選擇3到9步來自動生成到混合結果之間的中間色。對於擴展調色盤或建立平滑過渡很有幫助。
配色調和推薦 – 根據混合結果顏色，基於配色調和理論提供推薦顏色：互補色、類似色、三元色和分裂互補色。
混合歷史 – 之前建立的混合結果會自動儲存。方便找到或比較您喜歡的顏色。
一鍵複製 – 只需單擊即可將HEX代碼或RGB值複製到剪貼簿，立即在專案中使用。

使用方法

選擇顏色數量 – 使用頂部的下拉選單選擇要混合的顏色數量（2-5個）。預設設定為3種顏色。
輸入顏色 – 點擊每個顏色選擇器選擇顏色，或直接在HEX輸入框中輸入顏色代碼。您也可以使用「隨機顏色」按鈕生成隨機顏色。
調整比例 – 移動每種顏色下方的滑桿來調整混合比例。比例變化時，混合結果會即時更新。
查看結果 – 在混合結果部分查看最終顏色和HEX/RGB代碼。使用複製按鈕將代碼儲存到剪貼簿。
使用附加功能 – 透過漸層預覽查看顏色流動，調整中間色步數找到所需顏色，並在配色調和標籤中探索和諧的顏色組合。

顏色混合原理

什麼是RGB加色混合？

RGB加色混合（Additive Color Mixing）是透過添加光的三原色——紅色（Red）、綠色（Green）和藍色（Blue）來建立新顏色的方法。這是數位螢幕、顯示器和電視等發光裝置使用的顏色混合方式。

紅 + 綠 = 黃色（Yellow）
綠 + 藍 = 青色（Cyan）
藍 + 紅 = 洋紅色（Magenta）
紅 + 綠 + 藍 = 白色（White）

與混合顏料或油墨時使用的減色混合（顏色組合後變暗）不同，加色混合在添加顏色時會變亮。本工具使用RGB加色混合，為數位環境提供準確的顏色混合結果。

加權平均計算

混合多種顏色時，透過對每種顏色的RGB值應用比例（權重）來計算平均值。例如，以50:50的比例混合紅色（#FF0000）和藍色（#0000FF）：

R = (255 × 0.5) + (0 × 0.5) = 127
G = (0 × 0.5) + (0 × 0.5) = 0
B = (0 × 0.5) + (255 × 0.5) = 127
結果：RGB(127, 0, 127) = #7F007F（紫色）

配色調和理論

配色調和（Color Harmony）是建立視覺上令人愉悅且平衡的顏色組合的理論。根據色輪（Color Wheel）上的位置關係，有幾種調和類型。

互補色（Complementary）

在色輪上正對面（180°）位置的兩種顏色。它們產生最強烈的對比效果，使每種顏色都更加突出。例如：紅色和青綠色，黃色和紫色。常用於需要吸引注意力的設計。

類似色（Analogous）

色輪上相鄰（約30°間隔）的顏色。這是自然界中常見的和諧組合，給人柔和舒適的感覺。例如：紅-橙-黃，藍-青-綠。適合統一感的設計。

三元色調和（Triadic）

在色輪上形成等邊三角形（120°間隔）的三種顏色。創造出多彩而平衡的配色組合。例如：紅-黃-藍，橙-綠-紫。用於既有活力又穩定的設計。

分裂互補色（Split-Complementary）

使用基準色及其互補色兩側的相鄰色（150°和210°位置）。保持互補調和的強度，同時允許使用更多樣的顏色。即使是初學者也能輕鬆建立和諧調色盤的方法。

常見問題

為什麼RGB混合和顏料混合的結果不同？

RGB混合是添加光的加色混合，而顏料混合是吸收光的減色混合。在加色混合中，顏色組合後變亮，混合所有顏色會產生白色。在減色混合中，顏色組合後變暗，混合所有顏色會接近黑色。本工具使用適合數位環境的RGB加色混合。

混合比例是如何計算的？

每種顏色的滑桿值用作其權重。例如，如果顏色A是60%，顏色B是40%，則最終RGB值按每個通道計算為（A值 × 0.6）+（B值 × 0.4）。如果所有比例都是0%，則平均分配。

配色調和推薦使用什麼標準？

混合結果顏色被轉換為HSL（色相-飽和度-明度）色彩空間，然後根據色輪上的角度關係計算和諧的顏色。互補色在180°對面位置，類似色在±30°相鄰位置，三元色在120°間隔，分裂互補色在150°/210°位置。

混合歷史儲存在哪裡？

混合歷史儲存在瀏覽器的本機存儲（localStorage）中。使用同一瀏覽器再次造訪時，之前的記錄會保留。如果刪除瀏覽器資料或使用無痕模式，歷史記錄將被重設。

中間色是如何計算的？

使用線性插值（Linear Interpolation）從第一個輸入顏色到混合結果顏色生成中間色。根據選擇的步數，將每個通道的RGB值均勻分割，建立自然的顏色過渡。

可以在手機上使用嗎？

是的，在行動裝置上完美運作。採用響應式設計製作，在智慧型手機和平板電腦上透過觸控進行顏色選擇和比例調整都可以使用。無需安裝任何應用程式，直接在網頁瀏覽器中使用即可。