當您混合兩個 HEX 顏色後要查看結果時，請閱讀 顏色混合器 的結果面板：它會將混合後的顏色以小寫六位數十六進制和完整的 rgb() 字串顯示，透過 sRGB 線性插值計算，使用的公式為 result = round(A × (1 − ratio) + B × ratio)，分別套用於紅色、綠色和藍色通道。比例即為滑桿當前顯示的數值，從 0%（純顏色 A）到 100%（純顏色 B）。結果下方，漸層條繪製出十一個等距的混合步驟，讓您一眼就能看完整個過渡，並確認您所選比例處的值是否確實為您心中所想的顏色。一鍵複製按鈕隨即將該精確十六進制值放入您的剪貼簿，可直接用於 CSS、設計 token 檔案或圖表調色盤。一切都在您的瀏覽器中本地執行，因此您可以依需要多次驗證結果，而無需上傳任何資料。確認兩個品牌色之間的中間點、合理檢查產生的漸層停色點，或只是再次確認兩個色塊放在一起實際看起來如何，這一切都歸結為同樣的三步驟閱讀：比例標籤、結果面板、漸層條。
混合兩個顏色後，顏色混合器會輸出什麼
設定好輸入後，結果面板是唯一需要查看的地方。它的設計消除了混合值上的歧義，並排顯示兩種格式的相同顏色，並標示混合的計算方式。您一眼就能讀取的五個欄位如下：
| 欄位 | 顯示內容 | 為何在檢查結果時很重要 |
|---|---|---|
| Hex 碼 | 小寫六位數十六進制，例如 #800080 | 這是要貼到 CSS、SVG、設計工具或任何接受十六進制顏色的程式碼中的精確值。 |
| RGB 字串 | rgb(R, G, B)，每個通道介於 0 到 255 | 當顏色的消費者預期 RGB 輸入，或您想逐個讀取通道時很有用。 |
| 比例標籤 | 目前的混合比例，例如 70% A / 30% B | 精確告訴您套用了什麼數學運算，使結果可重現且易於說明。 |
| 漸層條 | 從顏色 A 到顏色 B 的十一個等距混合步驟 | 讓您一目了然地確認結果在整個過渡中的位置，並輕鬆挑選中間停色點。 |
| 複製按鈕 | 一鍵複製結果 hex | 消除將值轉錄到其他檔案時的打字錯誤和大小寫敏感問題。 |
這五個欄位共同回答了讀者在混合後通常會問的三個問題：最終值是什麼、如何計算、實際看起來是否如我所預期。
如何在混合兩個顏色後檢查 HEX 與 RGB 結果
- 開啟顏色混合器，並在顏色 A 欄位中輸入您的第一個顏色。輸入短格式的 hex 例如 #f00、完整格式的 hex 例如 #3b82f6，或貼上 rgb() 字串例如 rgb(59, 130, 246)。輸入可解析為上述三種格式，容許額外的空格、可選的井字號前綴，以及大寫或小寫字母。您也可以點擊欄位旁的色塊，使用原生選色器以視覺化方式挑選顏色。
- 在顏色 B 欄位中使用完全相同的選項輸入您的第二個顏色 —— hex、rgb() 字串或視覺化色塊。
- 拖曳比例滑桿，直到標籤顯示您想要的比例。0% 為純顏色 A，100% 為純顏色 B，50% 為兩個通道值的精確中點。
- 閱讀結果面板。混合後的 hex 以小寫六位數格式出現，rgb() 字串緊鄰其旁，每個通道介於 0 到 255。兩者會隨著滑桿移動即時更新，因此您可以來回拖曳滑桿，即時觀察數值的變化。
- 瞥一眼漸層條，確認混合後的顏色在整個過渡中位於您預期的位置。如果您的比例是 50%，結果應該位於中間的色塊；如果是 70% A / 30% B，結果應偏向顏色 A 兩格。
- 點擊結果 hex 旁的複製按鈕，將其放入剪貼簿，然後貼到 CSS、設計 token 或任何其他檔案。這可避免打字錯誤和大小寫不符的問題。
閱讀漸層條以找出中間步驟
漸層條是結果面板的視覺輔助工具，是無需重新輸入數字即可確認混合的最快方式。它顯示介於顏色 A 和顏色 B 之間的十一個等距步驟，兩端點皆包含在內，因此整個過渡可在一瞥之間一目了然。每個步驟都是套用相同的 sRGB 插值公式於 0%、10%、20%、…… 100% 的結果。當您已經知道想要的比例時，漸層條會顯示該比例的色塊是否如您所想像的那樣來確認結果。當您還不知道比例時，漸層條讓您能快速瀏覽所有十一個步驟，挑選視覺上最符合您意圖的那一個，然後直接從結果面板讀取 hex。因為步驟等距分布，且公式與 CSS 漸層所使用的相同，您從漸層條複製的任何步驟都是可放入樣式表的合法漸層停色點。
驗證混合運算：sRGB 線性插值解析
如果結果看起來不對，第一步是確認運算。顏色混合器使用簡單的 sRGB 線性插值進行混合：對於紅色、綠色和藍色各通道，它計算加權平均，result = round(A × (1 − ratio) + B × ratio)，比例會被限制在 [0, 1] 範圍內。然後將各通道限制在 0–255 並四捨五入為整數。沒有 gamma 校正、沒有感知調整，也沒有轉換到其他色彩空間 —— 只是 8-bit sRGB 值的直接加權平均。
一個具體的計算範例可以釐清這一點。取顏色 A = #ff0000 (255, 0, 0) 和顏色 B = #0000ff (0, 0, 255)，滑桿設為 50%（ratio = 0.5）：
- 紅色通道：round(255 × (1 − 0.5) + 0 × 0.5) = round(255 × 0.5 + 0) = round(127.5) = 128
- 綠色通道：round(0 × (1 − 0.5) + 0 × 0.5) = 0
- 藍色通道：round(0 × (1 − 0.5) + 255 × 0.5) = round(0 + 127.5) = 128
- 結果：rgb(128, 0, 128) = #800080
如果您想手動確認工具的輸出結果，這就是要逐通道套用的公式。若要對較小的偏移量進行快速合理性檢查，您也可以將兩個十六進制值輸入到 RGB 轉 HEX 轉換器指南 中，一次讀取一個通道。
使用結果前應確認的常見事項
在將結果貼到設計系統或部署到生產環境之前，請在結果面板上跑過一份簡短的檢查清單：
- Hex 為六位數小寫。工具輸出一致的規範化小寫 hex，因此任何抱怨大小寫問題的工具現在都一致了。
- RGB 通道為 0–255 範圍內的整數。如果任何通道讀數超出該範圍，代表輸入格式有誤；工具會在內部進行限制和四捨五入，因此結果永遠是有效的 8-bit 顏色。
- 比例標籤與意圖一致。如果您想要中點，標籤應顯示 50% A / 50% B。如果不是，代表滑桿在您複製之前就已經偏移了。
- 在漸層條中的位置一致。30% A / 70% B 的混合在漸層條中應明顯更靠近顏色 B。如果不是，請重新整理並重新輸入。
- 複製的內容到了正確的欄位。有些工作流程會將 hex 貼到 CSS，將 rgb() 貼到圖表函式庫 —— 請確認剪貼簿中持有的是您預期的格式。
這項五點檢查只需花幾秒鐘，就能抓到那些稍後以視覺錯誤形式出現的小失誤（滑桿偏移、輸入打錯、複製目標錯誤）。
當螢幕結果與實體顏料不符時
在閱讀結果時，有一點值得確認：混合後的顏色是螢幕上的值，而非顏料的值。sRGB 線性插值混合的是加法式的螢幕光源，這正是 CSS 漸層和多數 UI 系統所使用的數學，這正是您在網站、應用程式、圖示、圖表和任何螢幕設計上所需要的。它不是 gamma 校正後的光學混光，也不是減法式的顏料或油墨混色。這就是為什麼在工具內將純紅色 (#ff0000) 和純藍色 (#0000ff) 以 50% 混合會得到乾淨的洋紅色 (#800080) —— 而在調色盤上將紅色和藍色壓克力顏料實體混合，則會產生混濁的深紫色或棕色。如果您的目標是預測兩種真實顏料或印刷油墨在紙上會如何組合，那麼沒有任何誠實的螢幕工具能模擬這一點，顏色混合器也不會假裝能。對於數位工作，結果面板提供了一個準確、可重現的值，您可以使用該公式驗證並直接複製到您的專案中。