要混合兩種 HEX 顏色，請將每個顏色以 HEX 或 rgb() 字串形式輸入到 Color Mixer 中，拖曳比例滑桿以選擇每個顏色在混合中的佔比，然後從結果面板讀取精確的十六進位和 RGB 數值。整個工作流程都在您的瀏覽器中本機執行，首次使用只需不到一分鐘，並產生可複製到 CSS、設計檔或色彩權杖中的可重現結果。您首先決定要組合哪兩種顏色——例如品牌藍和品牌橘——以及混合的哪一側較重要。Color Mixer 接著會在 sRGB 中進行逐通道加權平均，將每個紅、綠、藍值計算為 round(A * (1 - ratio) + B * ratio)，並顯示產生的六位數小寫十六進位值以及平行的 rgb() 字串。在結果下方，一條漸層長條顯示十一個等距的混合步驟，讓您一目了然地查看每個過渡並挑選看起來合適的步驟。當您找到想要的顏色時，點擊一鍵複製按鈕即可將十六進位值放入剪貼簿。不需要上傳任何內容、不需要註冊，也沒有使用次數限制。
在瀏覽器中開啟 Color Mixer
Color Mixer 是一個基於覽器的工具，因此開始使用只需片刻。在任何現代桌面或行動瀏覽器中開啟 Color Mixer，頁面會立即載入並準備好兩個顏色欄位供使用。不需要安裝軟體、不需要建立帳號，也不需要新增擴充功能——頁面本身就是工具。您可以將它加入書籤以便日後快速存取，或在設計過程中需要反覆使用時釘選分頁。由於一切都使用純粹的色彩運算在本機執行，該工具在慢速連線或頁面載入後離線時都能正常運作，而且您的輸入永遠不會離開裝置。
您的第一次 HEX 顏色混合
如果您從未使用過 HEX 顏色混合器，以下工作流程就是您首次嘗試就能產生可用結果所需的一切。每個步都很短且可逆，因此您可以來回拖動滑桿直到結果看起來合適為止。
- 在瀏器中開啟 Color Mixer，並在工具頂部找到 Color A 和 Color B 欄位。
- 將您的第一個顏色輸入到 Color A 欄位，可以是短十六進位 (#f00)、完整十六進位 (#3b82f6)、rgb() 字串 (rgb(59, 130, 246))，或點擊色塊以視覺方式挑選。
- 以相同方式將您的第二個顏色輸入到 Color B 欄位——任何接受的格式組合在任一側都能使用。
- 將比例滑桿從 0% 拖曳到 100%，以選擇每個顏色在混合中的佔比；拖曳時結果面板會即時更新。
- 從結果面板讀取產生的十六進位和 rgb() 值，使用漸層長條確認過渡看起來正確，然後點擊複製將十六進位值放入剪貼簿。
輸入您的兩個來源色
Color Mixer 提供兩個欄位，Color A 和 Color B，代表混合的兩側。您可以使用以下三種接受的格式之一填入任一欄位：
| 格式 | 範例 | 說明 |
|---|---|---|
| 短 HEX | #f00 | 三位數簡寫，在內部展開為六位數 |
| 完整 HEX | #3b82f6 | 標準六位數十六進位顏色 |
| rgb() 字串 | rgb(59, 130, 246) | 以逗號分隔、範圍 0 到 255 的整數通道 |
您也可以點擊每個欄位旁的原生色塊，如果沒有特定代碼，可以使用作業系統的顏色選擇器以視覺方式挑選顏色。輸入不區分大小寫，多餘的空白會被忽略，前置井字號為選用，因此 3b82f6 和 #3B82F6 都會解析為相同的值。這種寬的解析方式意味著您可以直接從 CSS 檔案、設計權杖、Slack 訊息或螢幕閱讀器友善的 rgb() 標記法貼上數值，無需先重新格式化。
使用滑桿設定混合比例
當兩種顏色都載入後，拖曳比例滑桿以決定結果中每個顏色的佔比。滑桿從 0% 跑到 100%，行為如下：
- 0% 產生純 Color A——完全不包含 Color B。
- 100% 產生純 Color B——完全不包含 Color A。
- 50% 產生兩種顏色通道值的精確中點。
- 介於其間的任何值都是加權混合，百分比反映 Color B 混入的比例。
比例標籤會始終顯示當前的分配（例如「70% A / 30% B」），因此結果是可重現的。在底層，Color Mixer 使用簡單的 sRGB 線性內插：對於每個紅、綠、藍通道，它計算加權平均——result = round(A × (1 − ratio) + B × ratio)。通道會四捨五入到最接近的整數並限制在 0–255 範圍內。對於滑桿位置比肉眼判斷結果更重要的專案，關於使用比例滑進行精確混合的指南詳細說明了如何記錄精確百分比。
計算範例。 以 0.5 的比例混合純紅色 (#ff0000) 和純藍色 (#0000ff)：
- R：round(255 × 0.5 + 0 × 0.5) = round(127.5) = 128
- G：round(0 × 0.5 + 0 × 0.5) = 0
- B：round(0 × 0.5 + 255 × 0.5) = 128
結果：rgb(128, 0, 128)，或 #800080——乾淨的洋紅色。這與您從 CSS 或任何標準 sRGB 感知混合工具獲得的值相符，這正是此方法在螢幕設計中如此有效的原因。
讀取結果與漸層預覽
結果面板同時以三種形式顯示您目前的混合：您可以看到的色塊、六位數小寫十六進位值，以及等效的 rgb() 字串。當您拖曳滑桿時，面板的每個部分都會即時更新，因此您可以即時來回瀏覽整個混合過程。
在面板下方，一條漸層長條顯示兩種來源顏色之間十一個等距的混合步驟，包括兩端的端點。這條長條本質上是整個過渡的視覺目錄：如果中點看起來不合適，您可以目測哪個步看起來合適，然後將滑桿拖回該比例。當您正在為圖表、UI 漸層或品牌調色盤建立多停止點的色彩刻度，並需要挑選三個或五個令人愉悅的步驟而非單一中點時，漸層預覽也非常有用。如需更深入地了解如何在情境中驗證結果的外觀，關於檢查混合結果的指南詳細說明了如何對照設計權杖和參考圖進行健全性檢查。
複製並套用混合後的 HEX
當您找到想要的顏色時，點擊複製將結果十六進位值放入剪貼簿。十六進位值以小寫六位數形式提供，這是大多數 CSS 管道、設計權杖和樣式指南所預期的格式。您可以將其直接貼入樣式表、Tailwind 設定、Figma 色彩樣式或 JSON 設計權杖檔案，無需進一步編輯。
如果您需要 rgb() 字串，結果面板會與十六進位值並列顯示，因此您可以手動選取來複製。滑桿位置、比例標籤和結果值都保持同步，因此稍後——即使在關閉分頁數天後——重新執行相同的混合會產生相同的十六進位值，前提是您重新輸入相同的兩個來源顏色和相同的比例。這使得 Color Mixer 成為您需要一致重現的任何調色盤的可靠真實來源。
sRGB 混合何時符合您的需求（以及何時不符合）
sRGB 線性內插適用於任何最終顯示在螢幕上的工作：網站、行動應用程式、儀表板、圖表、圖示、插圖和 UI 模型。它與 CSS 漸層、設計工具和大多數作業系統色選擇器使用的數學相同，因此您在這裡產生的混合將與您的工具和團隊成員計算的結果相符。如果您想找到兩種品牌顏色之間的半色調色、為圖表調色盤取樣步驟，或將一種強調色稍微推向另一種，sRGB 內插正是您想要的。
值得說明的是 sRGB 內插不是什麼。它以加法方式混合螢幕光線值，而非以減法方式混合實體顏料。在這裡混合紅色 (#ff0000) 和藍色 (#0000ff) 會得到乾淨的洋紅色 (#800080)，而在實際調色盤上物理混合紅色和藍色顏料則會產生混濁的深紫色或棕色。如果您的目標是預測壓克力、水彩或印刷油墨在紙張上的混合結果，本工具無法模擬這一點，而且沒有任何基於螢幕的混合能誠實地做到。
| 混合模型 | 模擬對象 | 適用場景 | 使用 Color Mixer？ |
|---|---|---|---|
| sRGB 線性內插 | 加法螢幕光線 | 網頁、應用程式、UI、圖表、圖示設計 | 是——這是該模型的強項 |
| Gamma 校正光學 | 物理光線強度 | HDR、科學影像、色彩科學 | 否——此處未建模 |
| 減法顏料 | 紙上的顏料、油墨、染料 | 印刷預覽、傳統藝術混合 | 否——此處未建模 |
對於大多數數位工作，Color Mixer 的 sRGB 混合是完全正確的。對於實體媒體，請將結果視為幕近似值而非物理預測，並改用具體的印刷工作流程。