Color Mixer（色彩混合器）將兩種顏色依照您設定的比例，透過平均紅、綠、藍三個通道來混合成一種顏色，使用的公式為 result = round(A × (1 − ratio) + B × ratio)（每個通道分別計算），其中 ratio 會被限制在 0 到 1 之間。在 50% 時，您會得到兩種顏色通道值的正中間點，而當您調整滑桿的那一刻，工具就會立即顯示混合結果的精確十六進位色碼與 RGB 值。這個工具專為設計師、開發人員，以及任何需要在兩個已知色樣之間取得可重現顏色的人所打造，它完全在您的瀏覽器中執行，無需上傳、無需註冊，也沒有使用次數限制。介面也會在您設定的兩個端點之間產生一個 11 階漸層，讓您一眼就能瀏覽整個過渡效果，只要按一下滑鼠就能將最終的十六進位色碼複製到剪貼簿。它的底層採用 sRGB 線性內插——也就是驅動 CSS 漸層與大多數設計工具的螢幕光線運算方式——這代表結果可以直接套用到樣式表、設計檔案和圖表色盤中，無需任何轉換步驟。
Color Mixer 的功能
Color Mixer 是一個免費、基於瀏覽器的工具，能接受兩種顏色，並依照您選擇的比例將它們混合成單一輸出結果。您輸入 Color A 與 Color B，將滑桿從 0% 拖曳到 100%，即可讀出結果色調的精確十六進位色碼與 RGB 值。這個工具也會在您的兩個端點之間產生一個 11 階漸層，讓您一眼就能看到所有過渡效果，而複製按鈕則會將最終的十六進位色碼放到您的剪貼簿上。所有運算都在本機進行，無需上傳、無需帳號，也沒有使用次數限制。
在底層，數學運算非常簡單：對於紅、綠、藍三個通道中的每一個，工具都會計算兩個輸入通道的加權平均。這讓結果變得可預測、可重現，並且與 CSS 漸層及大多數現代設計工具所產生的結果完全相同。如果您曾經目測兩種品牌色並希望能精確取得中間值，或者想從兩個色盤項目之間取樣一個停駐色，這個工具就是為那個時刻而打造的。若要開啟工具並開始混合，請前往瀏覽器中的 Color Mixer。
如何使用 Color Mixer
- 在 Color A 欄位中輸入您的第一個顏色。您可以輸入簡寫十六進位色碼，例如 #f00、完整十六進位色碼，例如 #3b82f6，或是 rgb() 字串，例如 rgb(59, 130, 246)。如果您偏好以視覺化方式挑選顏色，可以點擊欄位旁的色樣。
- 使用相同的方式在 Color B 欄位中輸入您的第二個顏色，可以使用十六進位色碼、rgb()，或視覺化挑選器。
- 拖曳比例滑桿，設定每種顏色在混合中所佔的比例。0% 是純 Color A，100% 是純 Color B，而 50% 則是兩種顏色通道值的正中間點。
- 在結果面板中讀取混合顏色的十六進位色碼與 RGB 值。結果上方的漸層條會顯示兩個端點之間的每一個步驟，讓您能預覽整個過渡效果。
- 點擊 Copy（複製），將結果的十六進位色碼放到您的剪貼簿，即可直接貼到 CSS、設計軟體或程式碼中使用。
混合公式詳解
Color Mixer 產生的每一次混合，都來自同一個簡單的計算，分別套用於紅、綠、藍三個通道：
result = round(A × (1 − ratio) + B × ratio)
ratio 來自滑桿，會被限制在 0 到 1 之間。通道值會四捨五入到最接近的整數，並限制在 8 位元 sRGB 使用的 0–255 範圍內。當 ratio 為 0 時，結果是純 A；當 ratio 為 1 時，結果是純 B；而當 ratio 為 0.5 時，每個通道恰好位於兩個輸入值的正中間。由於運算是針對每個通道分別進行，將暖紅色與冷藍色混合會產生一個乾淨的數位中間值，而不是混濁的顏料灰色。
舉一個實際的計算範例，將 Color A 設為 #ff0000（純紅，通道值 255, 0, 0），Color B 設為 #0000ff（純藍，通道值 0, 0, 255），比例為 0.5。對於紅色通道：round(255 × 0.5 + 0 × 0.5) = round(127.5) = 128。對於綠色通道：round(0 × 0.5 + 0 × 0.5) = 0。對於藍色通道：round(0 × 0.5 + 255 × 0.5) = round(127.5) = 128。結果為 rgb(128, 0, 128)，也就是 #800080，一個乾淨的洋紅色。您可以直接在工具中輸入這兩個端點並將滑桿設為 50% 來驗證這個結果。
為什麼紅色加藍色在這裡會變成洋紅色
如果您曾經混合過紅色和藍色的顏料，就會知道結果是混濁的深紫色或棕色，而不是洋紅色。Color Mixer 的表現刻意不同：它混合的是 sRGB 螢幕光線值，而非實體顏料。螢幕光線是加法性的，因此將紅色與藍色光以全強度結合會產生洋紅色。顏料是減法性的，因此將紅色與藍色顏料結合會吸收更多波長，產生更暗、更混濁的色調。任何基於螢幕的混合都無法模擬真實的顏料行為，而這個工具也完全沒有嘗試去模擬。
| 混合方法 | 紅色 + 藍色的結果 | 適用情境 |
|---|---|---|
| sRGB 線性內插（本工具） | 洋紅色 #800080 | 螢幕設計、CSS、UI、圖表 |
| 減法性顏料或油墨混合 | 混濁的深紫色或棕色 | 實體壓克力、油畫顏料、水粉、印刷油墨 |
| 經 Gamma 校正的光學混光 | 本工具未模擬 | 理論上的高傳真光線合成 |
實際上的結論是：對於任何數位色彩工作（包括網站、應用程式、圖示、儀表板和簡報），請使用本工具。但不要使用它來預測真實顏料或印刷油墨在紙上的呈現效果。由於背後的物理原理不同，輸出結果將無法相符。
如何閱讀結果面板
一旦您選擇了兩個端點和比例，結果面板會同時以三種形式顯示混合結果：小寫的六位數十六進位色碼（例如 #3b82f6）、相同顏色的 rgb() 字串（例如 rgb(59, 130, 246)），以及一個視覺化色樣，您可以用來對照頁面模擬圖或螢幕截圖。即使您在輸入端輸入的是簡寫十六進位色碼（例如 #f00），十六進位色碼永遠會是六位數，因此可複製的值無需展開就能直接套用到 CSS 中。比例標籤（例如「70% A / 30% B」）會顯示在數值旁邊，讓您隨時知道是什麼比例產生了這個色樣，這讓之後重現結果或將比例交接給協作者變得非常容易。
可接受的顏色格式
Color Mixer 為 Color A 與 Color B 解析三種輸入格式：
- 簡寫十六進位色碼：三位數簡寫形式，例如 #f00 或 #0af。每個數位都會展開為完整形式，因此 #f00 會變成 #ff0000。
- 完整十六進位色碼：六位數十六進位色碼，例如 #3b82f6 或 #1a2b3c。這是 CSS 和設計檔案中最常見的格式。
- rgb() 字串：例如 rgb(59, 130, 246)。當您從其他工具或樣式表複製到值時非常實用。
解析器的容錯性很高。多餘的空格會被忽略，前置井字號是可選的，字母可以大寫或小寫。這代表「#3B82F6」、「3b82f6」、「rgb(59,130,246)」和「 rgb ( 59 , 130 , 246 ) 」全都會解析為同一個顏色。如果您完全不願意打字，每個欄位都有一個原生色樣，點擊後可以開啟系統挑選器以視覺化方式選擇。
Color Mixer 的實際應用方式
以下是幾個這個工具能發揮價值的場景：
- 在兩種品牌色之間找出中間值。將 Color A 設為您的主要品牌十六進位色碼，Color B 設為次要品牌十六進位色碼，然後將滑桿拖曳到 50% 以取得平衡的中間色調。適用於懸停狀態、次要按鈕或強調色填色。
- 產生漸層停駐點。需要在兩個 CSS 漸層端點之間取得平滑的過渡嗎？使用 11 階漸層條以視覺化方式挑選令人愉悅的中間停駐點，然後將每個十六進位色碼複製到您的樣式表中。
- 建立圖表色盤。類別圖通常需要一組小型的相關顏色。以不同的比例將基礎顏色與白色或黑色混合，即可獲得乾淨的由淺至深的色階，無需另外使用產生器。
- 取樣色調或陰影。如果您想要一個從基礎色往亮色或陰影方向推進 30% 的顏色，比例滑桿以 1% 為單位遞增，讓您能精準地進行微調。
如果您希望從單一基礎顏色衍生出更廣泛的色盤（互補色、類似色或三等分配色等配色），Color Palette Generator 會根據配色法則建立這些配色。而如果您需要將完成的十六進位色碼轉換為 RGB 或 HSL 以便在程式碼中使用，RGB to HEX 轉換器可以立即處理這個來回轉換。
隱私與限制
所有混合運算都在您的瀏覽器中本機執行。您輸入的顏色、嘗試的比例以及複製的十六進位色碼，絕不會被傳送到伺服器，因此在任何環節都沒有上傳步驟。沒有註冊、沒有使用次數限制，也不會追蹤您的輸入。您可以混合任意多組顏色、關閉分頁，稍後重新開啟工具時資料也不會遺失，因為一開始就沒有任何資料被儲存在遠端。
有一個值得注意的實際限制：這是一個兩色混合工具。這個工具一次只能精確混合兩個輸入顏色，因此如果您需要結合三個或更多顏色的結果，就必須分階段進行。先將 A 與 B 混合得到 AB，然後將 AB 與 C 混合得到 ABC，依此類推。每個中間結果都只是另一個十六進位色碼，您可以貼回任一欄位以進行下一輪混合，而相同的比例標籤與複製按鈕讓整個工作流程保持一致。
如果您正在權衡選項，Color Contrast Checker for CSS Code: Pass WCAG Ratios 對此有詳細說明。
如果您正在權衡選項，Mixing Console vs Mixer: How to Blend Two Colors 對此有詳細說明。