一個混合兩個 HEX 顏色的完善計畫包含四個階段——確認你的兩個輸入值、選擇目標比例、在使用 sRGB 線性內插的工具中執行混色（每個色頻 result = round(A × (1 − ratio) + B × ratio)），並記錄結果的確切 hex 與 RGB 值。這個數學運算是兩個顏色紅、綠、藍數值的逐色頻加權平均，這代表答案僅取決於你開始時輸入的兩個 hex 碼以及滑桿位置，而非顏料或油墨。在點擊之前先規劃步驟，可以讓你避免重做工作、記錄下產生你所選中間色的比例，並最終得到一個可以直接貼入 CSS、Figma 檔案或圖表調色盤的 hex 值。免費的 Color Mixer 可以在你的瀏覽器中執行整個工作流程，是無需安裝軟體或撰寫程式碼就能落實這個計畫的最簡單方式。
HEX 顏色混合計畫實際涵蓋了什麼
「如何規劃使用混合兩個 hex 顏色工具所需步驟」這個問題，指向的是一個位於實際混色之前的規劃階段。有三件事必須事先決定：工具能解析的兩個來源顏色格式、你希望它們之間的比例，以及一旦得到結果 hex 後你打算怎麼使用它。跳過其中任何一項決策，會讓混色步驟變成探索而非執行，而探索正是產出無法重現的調色盤的元凶。
大多數需要「中間色」的設計與開發任務，可以歸納為少數幾種模式。你可能是在填補一個已經有兩個端點的漸層中缺失的一步、稍微把品牌色往中性色方向柔化、產生一個圖表調色盤（其中每個系列都必須與其相鄰色可區分），或是單純探索兩個顏色在中間相遇時的樣子。每種模式都有其自然的比例——真正中點用 50%、五步漸層的停頓點用 25% 或 75%、微妙的色調或陰影變化用 10–20%。
在打開工具之前先把這些目標寫下來，會把混色任務從探索變成一張檢查清單，這也正是讓工作流程成為一項計畫而非猜謎遊戲的原因。計畫中也應該說明成功的樣貌：一個可以貼上的特定 hex，或是一組構成色階的小量 hex 集合，並在每個旁邊註記產生該色的比例。
打開工具前先準備好兩個 HEX 輸入值
Color Mixer 接受三種輸入格式：像 #f00 這樣的三位數短 hex、像 #3b82f6 這樣的六位數完整 hex，以及像 rgb(59, 130, 246) 這樣的 rgb() 字串。輸入不區分大小寫，多餘的空格會被忽略，前端的井字號可加可不加。這種寬容的解析器代表你不必清理從樣式表、Figma 檢查器或開發者工具的顏色選擇器複製來的 hex 值——幾乎任何格式都可以直接貼上，工具都會自行判讀。
如果你心裡還沒有明確的 hex 值，可以點擊任一輸入欄位旁的色塊，使用原生作業系統的顏色挑選器以視覺方式選擇顏色。當你要從圖片、標誌或螢幕截圖中取色，又不想先透過外部滴管工具把像素繞一圈時，這個功能特別實用。色塊是真正的輸入替代方案而非裝飾，所以當來源是視覺素材時，請把它視為你計畫的一部分。
在進入滑桿步驟之前，請再次確認這兩個輸入值確實代表你預期的顏色。一個常見的規劃錯誤是直接從螢幕讀取 hex，卻忽略了顯示器校色不同的問題——你在自己螢幕上看到的，與協作者在他們螢幕上看到的可能並不一致。請事先決定混色的結果要對齊你的螢幕還是印刷參考，因為答案會改變你該選用哪個工具，以及該 hex 在哪些下游格式中仍然有效。
在 Color Mixer 中逐步執行混色
兩個輸入值設定好之後，實際混色其實是一段很短的流程。打開 Color Mixer，依序執行下列步驟：
- 在 Color A 欄位中以 hex 值（#f00 或 #3b82f6）、rgb() 字串輸入第一個顏色，或點擊色塊以視覺方式選取。
- 用同樣的方式在 Color B 欄位輸入第二個顏色。
- 拖動比例滑桿，設定每個顏色在混色中所佔的比例——0% 為純 A、100% 為純 B、50% 為精確中點。
- 在結果面板中讀取混色的 hex 與 RGB 值，並利用漸層條預覽兩個顏色之間的每一步。
- 點擊 Copy 將結果 hex 複製到剪貼簿。
在每個滑桿位置，結果面板都會顯示小寫六位數 hex 與對應的 rgb() 字串，而比例標籤會告訴你目前的分配——例如 70% A / 30% B——讓你之後可以重新輸入這些數字，重現同樣的混色結果。隨著滑桿移動，結果會即時更新，這代表工作流程是互動式的而非批次處理：你可以在確認之前先看到候選的 hex，也不用因為比例打錯而重新計算。
滑桿下方的漸層條會顯示兩個顏色之間均勻分布的 11 個混色步驟，包含兩端的端點。這讓你在鎖定特定比例之前，能快速用肉眼判斷滿意的中間色落在哪裡。如果漸層條告訴你中點對你的用途來說太灰，你已經知道該把滑桿往其中一端移動，改選 25% 或 75% 的停頓點。
解讀結果：Hex、RGB 與漸層條
兩種輸出格式永遠都可用。小寫六位數 hex（例如 #800080）是你要貼進 CSS 顏色屬性、HTML 屬性、設計工具的檢查器以及大多數程式碼編輯器中的格式。rgb() 字串（例如 rgb(128, 0, 128)）則是在下游格式需要明確的色頻清單時使用——例如使用 CSS 自訂屬性的舊樣式表，或是接收 tuple 格式輸入的 JavaScript 顏色函式庫。請在規劃階段就決定好格式，才不會在最後還來回轉換。
漸層條是多數人會跳過的部分，卻正是把單次混色變成有計畫調色盤的關鍵。由於它顯示 11 個均勻分布的停頓點，你可以直接取用其中任何一個作為候選中間色，不必反覆拖動滑桿並重讀結果面板。如果你的計畫要在兩個端點之間建立一個五步漸層，就依序把滑桿拖到每個目標比例——0%、25%、50%、75% 和 100%——並在每個位置從結果面板複製對應的 hex。
| 使用情境 | Color Mixer 如何提供協助 |
|---|---|
| 在兩個品牌色之間找出中點 | 將比例設為 50%，即可同時以 hex 與 rgb() 讀出精確的色頻中點。 |
| 建立一個五步的 CSS 漸層 | 依序將滑桿拖到 0%、25%、50%、75% 和 100%，並從結果面板複製每個對應的 hex。 |
| 取樣一組可區分的圖表調色盤 | 滑動比例以視覺比較相近的停頓點，選出讀起來差異明顯的顏色。 |
| 把一個顏色稍微推向另一個顏色 | 使用小幅度的比例變化（例如 10–30%）來產生受控的色調或陰影。 |
由於結果會在滑桿移動時即時更新，你可以快速來回滑動比較候選色，不必重新輸入輸入值。如果某個混色結果在你的版面配置中看起來不對，相關指南 修正看起來不對的 hex 混色結果 會說明造成這種情況的少數原因以及如何補救。
什麼時候 sRGB 內插是正確的方法（什麼時候不是）
Color Mixer 使用的是簡單的 sRGB 線性內插。對於紅、綠、藍每個色頻，結果為 round(A × (1 − ratio) + B × ratio)，其中比例會被限制在 0 到 1 的範圍，每個色頻會被限制在 0–255。當比例為 0.5 時，你會得到兩個色頻數值的精確中點。這和多數設計工具、CSS 漸層以及 UI 系統所使用的數學相同，因此對於網站、App、圖示、圖表以及任何螢幕上的設計來說，sRGB 內插正是你所需要的。
為了讓這個公式更具體，我們把純紅 #ff0000 與純藍 #0000ff 以 0.5 的比例混合。紅色色頻會變成 round(255 × 0.5 + 0 × 0.5) = 128。綠色色頻是 round(0 × 0.5 + 0 × 0.5) = 0。藍色色頻是 round(0 × 0.5 + 255 × 0.5) = 128。結果是 rgb(128, 0, 128)，也就是乾淨的洋紅色 #800080。這些精確的數字來自工具而非心算，這也是為什麼規劃步驟就是把兩個端點輸入進去，讓結果面板為你完成四捨五入。
這個方法「不是」減法混合，而這對你的計畫為何重要：螢幕光的混色是平均光的數值，顏料的混色則是相減。這就是為什麼在這裡把 #ff0000 和 #0000ff 混合會得到乾淨的洋紅色，但在調色盤上實體混合紅色與藍色顏料，卻會得到混濁的深紫或棕色。如果你的計畫是為了任何螢幕上的輸出對齊數位顏色，sRGB 內插就是正確的方法。如果你的計畫是預測真實的壓克力顏料或印刷油墨在紙上會如何混合，那麼任何基於螢幕的工具都無法誠實地模擬，你應該改用印刷專用的參考資料。
Planning Pitfalls to Avoid When Mixing HEX Colors
The first pitfall is skipping the input check. A hex code copied from a code editor, a design tool inspector, and a screenshot eyedropper can all differ by one or two channels because of color profiles. Before you commit to a blend ratio, confirm the two hex values you entered actually match the colors you intended on your screen, otherwise the blended hex will faithfully reproduce colors you did not mean to start with.
The second pitfall is treating 50% as the universal answer. The midpoint is one useful blend, not the only one. For a five-step gradient you need 0%, 25%, 50%, 75%, and 100%. For a subtle tint you might want 10% or 20%. Decide on the ratio your task actually needs before you move the slider, otherwise you will spend time exploring blends you never use.
The third pitfall is forgetting that the result is screen-light, not pigment. If you planned a brand palette that needs to print as well as display, your sRGB-interpolated midpoints will not survive the trip to a printer without an extra color-management step. Build that fact into the plan up front rather than discovering it after the fact, and add a print-validation pass to the workflow before the palette ships.
The fourth pitfall is not capturing the ratio. The Color Mixer displays the current split, for example 70% A / 30% B, and that label is part of the result. If you save only the hex and not the ratio, you have no way to reproduce the blend later, because the same hex can come from many different pairs and ratios. Write both down — hex and ratio — in any documentation or style guide you maintain, alongside the two source colors that produced the blend.
All the color math runs locally in your browser, so nothing you enter is uploaded to a server, there is no sign-up, and there are no usage limits. You can re-run the plan as many times as you need without worrying about cost or privacy, which is why the planning step stays cheap: the only cost of changing your mind is dragging the slider back to a different position.
For a deeper look, see Color Palette Generator From a HEX Code: Match a Scheme.