在 Color Mixer 中混合兩種顏色,是分別對紅、綠、藍三個通道各自取加權平均,產生出混合結果,套用在三個通道上的公式是result = round(A × (1 − ratio) + B × ratio)。當你把比例滑桿設在 50% 時,工具會回傳兩個來源顏色 sRGB 通道值的精確中點,這與 CSS 漸層以及大多數 UI 設計系統所使用的計算方式相同。因為這個計算是在 8 位元的螢幕光線值上進行的,混合方式屬於「加法式」,而不是「顏料式」:把純紅(#ff0000)與純藍(#0000ff)混合,會得到一個乾淨的洋紅色(#800080),而不是真實顏料混合會得到的那種混濁紫色。結果面板會同時回報一組六位數的十六進位色碼與一個 rgb() 字串,方便你直接把混合出來的值貼進 CSS、設計檔案或圖表程式碼中。整個過程都在瀏覽器中執行,因此你可以盡情試驗不同的比例、格式與輸入值,不需要註冊帳號,也沒有任何使用次數限制。
sRGB 線性內插如何混合顏色
Color Mixer 產生的每一次混合,都是在 sRGB 色彩空間中逐通道取加權平均。對於紅、綠、藍每一個通道,工具會計算:
result = round(A × (1 − ratio) + B × ratio)
這裡的 ratio 是滑桿位置,以介於 0 到 1 之間的小數表示。比例為 0 時會原樣回傳顏色 A,比例為 1 時會原樣回傳顏色 B,比例為 0.5 時則會回傳每個通道的中點。各通道會四捨五入到最接近的整數,並維持在 0 到 255 之間,這正是 8 位元螢幕通道能顯示的完整範圍。
實際範例:以 50% 的比例混合 #ff0000(紅色)與 #0000ff(藍色)。
- 紅色通道:round(255 × (1 − 0.5) + 0 × 0.5) = round(127.5) = 128
- 綠色通道:round(0 × (1 − 0.5) + 0 × 0.5) = 0
- 藍色通道:round(0 × (1 − 0.5) + 255 × 0.5) = round(127.5) = 128
合併後的結果是 rgb(128, 0, 128),工具會把它寫成 #800080。這就是結果面板回報的那個乾淨洋紅色,也正是大多數設計工具在同樣兩個輸入值下會畫出的結果。
該用什麼顏色跟一個基底色混合
「要跟什麼混合」這個問題,每當你從一個已經調配好的基底出發時就會出現——不管是廚房裡一包現成的高麗菜絲沙拉,還是設計中的一個基底顏色——你都想知道接下來該加什麼。Color Mixer 會把你的基底顏色當成顏色 A,把任何候選夥伴當成顏色 B,讓你拖動比例滑桿,先感受一下結果,而不必馬上定案。
就像廚師可能會在高麗菜絲沙拉裡加蘋果、葡萄乾或酸味醬汁,讓它朝新的方向轉變,設計師也可以在起始的色碼上加入白色、黑色、互補色相,或另一個品牌色,把混合結果推向目標方向。這個工具的任務,就是讓這種探索變得又快、又可以隨時回頭。
幾組值得一試的實用搭配:
- 基底品牌色朝白色微調 20% ——會產生更柔和的色調,適合用在背景、hover 狀態與停用控制項上。
- 既有調色盤中兩個相鄰的色標 ——為圖表、色階與資料視覺化補上缺少的中間色。
- 一個主色與其互補色相 ——有助於找出一個均衡的強調色,因為你知道中點會落在某個中性或偏柔和的色調上。
- 兩個色溫不同的中性色 ——為文字排印與面板表面產生一個自訂的米白色或暖灰色。
因為漸層條會顯示 A 與 B 之間完整的過渡,你在複製任何東西之前,就能很快看出兩種顏色混合後是變成一個好看的中間色調,還是在過程中經過一個醜陋的過渡色。
如何用 Color Mixer 混合兩種顏色
- 在 Color A 欄位輸入你的第一個顏色。你可以輸入一個十六進位值,例如 #f00 或 #3b82f6,貼上一個 rgb() 字串,例如 rgb(59, 130, 246),或點擊色塊以視覺方式挑選顏色。
- 用同樣的方式,在 Color B 欄位輸入你的第二個顏色。
- 拖動比例滑桿,設定每種顏色在混合結果中所佔的比例。0% 是純顏色 A,100% 是純顏色 B,50% 則是中點。
- 在結果面板中讀取混合出來的十六進位與 RGB 值,並用漸層條預覽兩種顏色之間的每一個過渡步驟。
- 點擊 Copy,把結果的十六進位色碼複製到剪貼簿。
為什麼紅色加藍色會得到洋紅色,而不是紫色
人們第一次打開一個以螢幕為基礎的混色工具時,常見的意外是:純紅與純藍混合後會變成洋紅色,而不是用真實顏料混合時會得到的那種深紫色。原因在於這個工具混合的是 sRGB 螢幕值,其行為像加法式的光,而不是減法式的顏料。
在螢幕上,每一種可見的顏色都是由紅、綠、藍光組成的。把這些通道取平均,產生的是你實際上會看到的中間光線值,就像把兩塊發光面板疊加在一起一樣。而在顏料中,染料與色素是以減法方式吸收光線,因此把紅色顏料與藍色顏料混合,會產生更暗、更混濁,偏向棕色或深紫羅蘭色的結果。
如果你是在為螢幕做設計——網站、應用程式、圖示、儀表板或簡報——sRGB 內插正是你需要的計算方式,因為那正是你的螢幕實際使用的數學。如果你需要預測壓克力顏料、水彩,或印表機油墨混合後的結果,以螢幕為基礎的工具無法準確模擬那種情況,任何誠實的螢幕混色工具也都做不到。
如何解讀漸層條與結果面板
結果面板會為目前的混合結果回報兩種格式:一個小寫的六位數十六進位色碼,以及一個 rgb() 字串。兩者都是合法的 CSS 值,你可以貼上任何一種,只要適合你的專案即可。
下方的漸層條會顯示顏色 A 與顏色 B 之間十一個平均分布的混合步驟,包含兩端的顏色本身。當你想在兩個色標之間取一個中間色、卻不想自己計算時,或是當你在建立一個色階、想在確定中點之前先看到完整的過渡效果時,這會很有幫助。
比例標籤永遠會顯示目前的分配比例,例如 70% A / 30% B,因此結果是可以重現的。如果你找到一個喜歡的混合結果,滑桿位置再加上兩個十六進位輸入值,就足以讓你之後重新做出同樣的結果。
Color Mixer 接受的輸入格式
解析器在任一欄位都接受三種輸入格式,並容許多餘的空格、缺少井字號,以及大小寫字母混用。
| 格式 | 範例 | 說明 |
|---|---|---|
| 短版十六進位 | #f00 | 三位數簡寫會展開成 #ff0000 |
| 完整十六進位 | #3b82f6 | 帶前導井字號的六位數十六進位 |
| rgb() 函式 | rgb(59, 130, 246) | 以逗號分隔的 8 位元通道 |
| 視覺選色器 | 點擊色塊 | 欄位旁會開啟原生的選色輸入介面 |
以螢幕為基礎的混色工具常見用途
一款精確的螢幕混色工具,在許多日常任務中都很有用:
- 調色盤建構 ——在兩個品牌色之間找出一個中間色調,在不破壞既有調色盤的前提下延伸它。
- 漸層色標 ——為 CSS 的 linear-gradient 產生精確的中間色,讓過渡看起來平滑。
- 圖表色階 ——在一個低值與一個高值之間取樣五或七個平均分布的步驟,用於序列式的資料視覺化。
- UI 狀態 ——把按鈕顏色朝白色微調 20% 做成 hover 狀態,或朝黑色微調做成按下狀態。
- 快速試驗 ——在確定設計方向之前,先測試兩個隨機顏色搭配在一起的樣子。
隱私與限制
Color Mixer 完全在瀏覽器中執行。顏色值、滑桿位置與選色結果永遠不會離開頁面,因此你可以放心試驗品牌顏色或客戶專案,不必擔心上傳問題。
沒有使用次數上限,也不需要帳號。想開啟這個工具多少次都可以,想複製多少結果來滿足專案需求也都可以。
如果你還在權衡選項,How to Mix Two HEX Colors in Your Browser 對此有詳細說明。
如果你還在權衡選項,How to Check the Result After Mixing Two HEX Colors 對此有詳細說明。