線上色彩混合是兩個 8 位元 sRGB 值的逐通道加權平均，計算方式為對紅、綠、藍各通道執行 result = round(A × (1 − ratio) + B × ratio)。這個公式與瀏覽器、CSS 漸層以及大多數設計工具在「混合」兩種顏色時所使用的公式相同，這就是為什麼遵循相同數學的線上色彩混合器所產生的數值，能與你其他設計工作流程的結果完全一致。Lizely Color Mixer 將這套數學套用到你所選擇的任意兩個十六進位或 rgb() 輸入值，比率可介於 0% 到 100% 之間，並同時顯示精確混合後的十六進位與 rgb() 輸出結果，以及兩者之間每個中間步驟的視覺漸層。輸入像 #3b82f6 的十六進位值，或像 rgb(59, 130, 246) 的 rgb() 字串，再拖動比率滑桿，結果就會即時更新。由於整個計算都在你的瀏覽器中執行，不會上傳任何資料、不需要註冊、也沒有使用次數限制。
如何在線上混合兩種顏色
當你需要一個快速、以瀏覽器為基礎的方式來合併兩種顏色並讀取精確輸出時，下面的步驟會逐步帶你走完 Color Mixer 頁面上的完整工作流程。
- 在 Color A 欄位中以十六進位值（#f00 或 #3b82f6）或 rgb() 字串輸入第一個顏色，或點擊色塊以視覺化方式挑選。
- 用同樣的方式在 Color B 欄位中輸入第二個顏色。
- 拖動比率滑桿，設定混合中每個顏色所佔的比例——0% 是純 A，100% 是純 B，50% 是中點。
- 在結果面板中讀取混合後顏色的十六進位與 RGB 值，並利用漸層條預覽兩種顏色之間的每個步驟。
- 點擊 Copy，將結果的十六進位值複製到剪貼簿。
混合背後的數學
每個現代螢幕上的色彩混合都使用相同的基礎概念：取出顏色 A 的紅色通道與顏色 B 的紅色通道，以權重進行平均，再對綠色和藍色通道執行相同的步驟。Lizely Color Mixer 在其實作中明確說明了這點：逐通道 sRGB 線性內插，公式為 result = round(A × (1 − ratio) + B × ratio)，其中比率會被限制在 [0, 1] 之間，而每個通道則限制在 0–255 並進行四捨五入。
代入一個具體的例子會讓這件事變得具體。將 #ff0000（純紅）與 #0000ff（純藍）以 50% 的比率混合：
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) = round(127.5) = 128
混合後的輸出為 rgb(128, 0, 128)，也就是十六進位代碼 #800080。這個工具會精準地回傳該數值，而漸層條會在兩個端點之間顯示十一個等距的混合步驟，讓你一眼就能看出完整的過渡，而不是去猜測中間的結果。
為什麼螢幕上的混合與顏料混合不同
線上色彩混合器從紅色與藍色產生 #800080，而不是大多數人從調色盤預期的混濁紫色或棕色，原因在於這個工具混合的是螢幕光線，而非實體顏料。sRGB 內插屬於加法式的螢幕光線混合：每個通道都是兩個來源值的線性組合，這就是為什麼完全飽和的紅色與完全飽和的藍色平均後，會剛好落在八位元色彩空間的正中央。
真實的壓克力顏料、水彩以及印刷油墨是以減法方式混合。每種顏料會吸收特定波長，最終得到的色塊主要由每種顏料從白光中去除的內容決定，而非兩個通道值的平均。沒有任何以螢幕為基礎的計算機能單純從十六進位輸入值忠實模擬出這種物理現象，任何誠實的工具也不會假裝可以做到。
這並非工具的缺陷，而是對其用途而言正確的行為。當你為螢幕設計時——網站、行動應用程式、圖示、儀表板、圖表、簡報、電子郵件模板或社群媒體圖片——sRGB 內插正是你的媒體會重現的結果。如果你需要預測銅版紙上的印刷結果看起來如何，就需要一套獨立的 CMYK 工作流程，而 RGB to CMYK converter 是比任何混合公式更合適的起點。對於紙本上的色彩檢查，HTML color names chart 在將品牌規格對應到標準化色塊、然後再送印之前，也是個有用的參考。
螢幕空間色彩混合的實際用途
螢幕空間的混合在介面與品牌工作中，有著不斷出現且定義明確的用途：
- 建立色彩色階。挑選最淺與最深的錨點，然後從漸層條中取樣中間步驟，組合出五、七或十一步的色階，用於按鈕、圖表或背景。
- 在兩種品牌色之間找到中間的色調或陰影。當兩組色系需要銜接時，50% 的混合會產生一個能與兩端協調的合理中點。
- 產生漸層停色點。將你希望位於兩端的十六進位值放進 CSS，再將結果面板的十六進位值拖入 linear-gradient 定義的中間停色點，即可得到平滑的三停色點過渡。
- 取樣圖表色盤。折線圖、長條圖與區域圖常常需要一系列相關但可區分的顏色；Color Mixer 的 11 步漸層就是現成、可供複製的一列色塊。
- 將某個顏色稍微往另一個顏色方向調整。將滑桿設為 20% 或 30%，會產生一種細微的偏移，讀起來像是相關的強調色，卻不會破壞來源的辨識度。
在上述任何任務中，結果面板上的比率標籤——例如「70% A / 30% B」——能確保混合結果可重現，讓你之後能回到完全相同的數值，而不必憑印象猜測。在鎖定互動狀態之前，特別是行動呼籲按鈕與表單欄位，可以搭配快速的 color contrast check 一起使用。
可接受的輸入格式與輸出值
Color Mixer 在顏色的表示方式上很寬容，但對回傳的內容則很精確。下表摘要說明解析器可接受的輸入格式，以及你可以複製的輸出值格式。
| 方向 | 格式 | 範例 | 備註 |
|---|---|---|---|
| 輸入 | 簡寫十六進位 | #f00 | 三位元簡寫會展開為六位數。 |
| 輸入 | 完整十六進位 | #3b82f6 | 六位數，可為小寫或大寫。 |
| 輸入 | rgb() 字串 | rgb(59, 130, 246) | 標準 CSS 語法，整數範圍 0–255。 |
| 輸入 | 原生色塊 | 點擊選擇器 | 透過作業系統的色彩對話框以視覺方式挑選。 |
| 輸出 | 十六進位（小寫） | #800080 | 可直接貼入 CSS 或設計工具。 |
| 輸出 | rgb() 字串 | rgb(128, 0, 128) | 以函式標記法表示的同一個顏色。 |
額外的空格、缺少前導井字號、以及大寫或小寫字母，在輸入端都可接受，因此你可以直接貼上剪貼簿中已有的內容，無需先重新格式化。輸出則一律同時以兩種形式呈現，讓你可以選用下游程式碼所預期的格式。如果你需要將結果轉換回不同的表示法，HEX to RGB converter 與 RGB to HEX converter 都能以單次點擊完成來回轉換。
如需更深入的說明，請參閱 CMYK to RGB CSS Code: Convert Print Inks to Hex。
如需更深入的說明，請參閱 How to Connect Mixer to Mixer: Blend Two Colors。