顏色混合器

使用量杯直覺混合顏色。選擇顏色、調整比例，並查看混合結果的 RGB、HSL 和 HEX 數值。

調色區

量杯 1

5

量杯 2

5

混合結果

輸入比例

50%

RGB 組成

紅: 142 (35.9%)

綠: 114 (28.8%)

藍: 140 (35.4%)

混合顏色

顏色詳情

HEX

#8E728C

RGB

rgb(142, 114, 140)

HSL

hsl(304, 11%, 50%)

顏色混合器 – 運作原理

顏色混合的原理

顏色混合主要分為兩種方式：

加色混合用於螢幕與光源系統。當有色光重疊時，光線會相互疊加增強。紅 + 綠 = 黃，紅 + 藍 = 洋紅，綠 + 藍 = 青色。三種顏色全部疊加至最高亮度時，結果為白色。

減色混合用於顏料、油墨等材質。材料會吸收部分波長的光，只反射其餘部分。減色法的三原色為青色（Cyan）、洋紅色（Magenta）和黃色（Yellow），即 CMY。大量混合後，顏色會趨向黑色。

本工具採用加色 RGB 模型，這是數位螢幕與網頁設計的通用標準。

RGB 顏色模型

RGB 透過三個色彩通道來定義一種顏色：

紅色（R）：0–255
綠色（G）：0–255
藍色（B）：0–255

螢幕上的每個像素都包含紅、綠、藍三個子像素。透過調整每個通道的亮度，顯示器可呈現超過 1677 萬種顏色（ $256^3 = 16{,}777{,}216$ ）。

常見顏色格式

格式	範例	說明
HEX	#FF6B35	6 位十六進位格式，CSS 常用
RGB	rgb(255, 107, 53)	以十進位表示的紅、綠、藍分量
HSL	hsl(16, 100%, 60%)	色相、飽和度、明度，視覺調整更直觀

混合結果的計算方式

混色器透過對每個 RGB 通道取加權平均值來計算混合結果。若有 $N$ 種輸入顏色，各顏色的比例為 $a_1, a_2, \ldots, a_N$ ，RGB 值分別為 $(r_i, g_i, b_i)$ ，則結果為：

R_{\text{mix}} = \frac{\sum_{i=1}^{N} a_i \cdot r_i}{\sum_{i=1}^{N} a_i}

G_{\text{mix}} = \frac{\sum_{i=1}^{N} a_i \cdot g_i}{\sum_{i=1}^{N} a_i}

B_{\text{mix}} = \frac{\sum_{i=1}^{N} a_i \cdot b_i}{\sum_{i=1}^{N} a_i}

簡單來說，比例越高的顏色，對最終結果的影響就越大。

舉例：將 3 份紅色（#FF0000）與 1 份藍色（#0000FF）混合：

R = \frac{3 \times 255 + 1 \times 0}{4} = 191

G = \frac{3 \times 0 + 1 \times 0}{4} = 0

B = \frac{3 \times 0 + 1 \times 255}{4} = 64

混合後的顏色約為 #BF0040，是一種深紅紫色。

實際應用場景

網頁設計與 UI

利用顏色混合建立配色方案、測試透明疊加效果，並從基礎色中衍生出強調色。

教學用途

這是一種直觀展示光、人類色覺感知與色彩數學之間關係的實用方式。

數位藝術

幫助設計師與插畫師預判顏色在插圖、設計和影像編輯軟體中疊加後的最終效果。

混色小技巧

從三原色開始 — 紅、綠、藍是 RGB 混色的基礎。
調整各顏色的比例 — 比例越高，該顏色對混合結果的影響越大。
比較不同輸出格式 — 根據實際使用情境，在 CSS、設計工具或程式碼中分別選用 HEX、RGB 或 HSL 格式。
RGB 三通道相等即為灰色 — 當紅、綠、藍三個分量數值相同時，混合結果為中性灰。

常見問題

加色混合與減色混合有何差異？加色混合使用光，顏色越疊加越亮，最終趨向白色。減色混合使用顏料，顏色越疊加越暗，最終趨向黑色。

為什麼混合效果和顏料混色不一樣？因為本工具基於 RGB 光色混合，而非顏料混色。在螢幕上，紅色 + 藍色 = 洋紅色；而顏料中，由於顏料會吸收光線，混色效果截然不同。

混合結果的顏色代碼可以直接用於 CSS 嗎？可以。輸出的 HEX、RGB 和 HSL 值均可直接用於 CSS 程式碼和大多數設計工具。

每個量杯上的「比例」代表什麼？它表示該顏色在混合中所佔的相對量。比例為 8 的顏色，對混合結果的貢獻是比例為 4 的同色顏色的兩倍。