顏色混合器
新以任意比例混合兩種顏色，並複製結果或任一階段色。
Click a swatch to copy its hex.
Mix colors from an image
Upload an image, choose a target color above, then click the image to sample that pixel. Images are decoded in your browser and never uploaded.
Paint (subtractive) results are realistic approximations of pigment mixing, not exact recipes — real paints and inks vary by brand and opacity.
Runs entirely in your browser. Nothing is uploaded.
適用於顏料或光的免費線上顏色混合器
這個顏色混合器將兩種顏色——或更多——混合成新顏色，並顯示它們之間步驟的完整漸層。用色板選擇顏色、輸入hex代碼，或直接從上傳的圖片中提取顏色；然後以HEX、RGB、HSL和CMYK格式讀取混合結果。所有操作都在瀏覽器中執行，即時響應，您上傳的任何內容都不會被傳送到伺服器。
大多數工具只做簡單的線性混合，而這個工具讓您以三種不同方式在線上混合兩種顏色，並即時顯示差異——讓您得到畫家所期望的結果、螢幕所產生的結果，或用於漸層和設計系統的純數學中點。
減法、加法或簡單混合——三種混合模型
減法混合模擬顏料和染料：顏色吸收（減去）光線，因此藍+黃=綠、紅+黃=橙、紅+藍=紫——這些直觀的「兩種顏色混成X」結果與實體顏料、墨水和CMYK印刷相符。加法混合模擬光線：紅、綠、藍疊加，因此紅+綠=黃，三者全加得白色——螢幕、投影機和舞台燈光就是這樣工作的。
第三種模式混合是直接線性插值，對RGB通道取平均值以找到精確的數值中點——非常適合漸層、UI色調和設計令牌產生。單個按鈕可在三者之間切換，混合條立即重繪，讓您看到藍到黃的顏料混合如何在減法中點通過真實的綠色。
兩種顏色混成綠色、橙色、紫色和棕色？
內建的顏色混合圖表一鍵回答最常搜尋的顏料問題：藍+黃=綠、紅+黃=橙、紅+藍=紫、藍+綠=青色，以及像橙+藍這樣的互補色混出真實的棕色。點擊圖表中的任意一對，在減法模式下將其載入混合器中，查看精確的十六進位結果。
因為減法引擎的混色方式與實際顏料相同，二次色輸出真實，三次色自然地向棕色加深——就像過度混合真實顏料時產生的混濁效果。比例滑桿讓您精確控制比例：70%紅+30%藍比50/50混合產生更溫暖、更偏洋紅的紫色。
從圖片取色混合——以及混合兩種以上顏色
上傳任意照片，使用滴管直接從中提取顏色——非常適合從產品照片、色樣或靈感圖片中匹配品牌顏色。選擇兩個或多個像素並混合它們。圖片在HTML畫布上本地解碼，因此從圖片混合顏色意味著您的檔案永遠不會離開裝置——適用於保密品牌資產和未發布的設計原型。
需要混合兩種以上顏色？點擊「新增顏色」新增第三、第四、第五或第六個色樣，每個都有自己的權重滑桿。工具返回所有輸入的加權混合——可用於平均調色板、重建多顏料混合，或找到一組品牌顏色的視覺中心。
與Adobe Color、Coolors和colordesigner.io的對比
Adobe Color（color.adobe.com）專為色彩和諧探索而設計——互補色、三角色、類似色——需要Adobe帳號，會將資料同步到Adobe伺服器。它沒有減法（顏料）或加法（光）混合模型，也沒有用於混合特定十六進位代碼的比例滑桿。Coolors（coolors.co）非常適合調色板產生，但其顏色混合器只進行基本線性混合——相當於本工具的「混合」模式。
colordesigner.io提供兩色線性混合和漸層條，但只輸出十六進位值——沒有RGB、HSL或CMYK——缺乏基於物理的混合模型。本工具填補了這一空白：三種混合模型、四種同步輸出格式、圖片顏色採樣、最多六種顏色的獨立權重滑桿，以及可分享的URL。無需帳號、無使用限制、無伺服器上傳。
每種代碼隨時可複製——以及可分享的連結
結果卡片顯示混合顏色的HEX、RGB、HSL和CMYK值以及最接近的CSS命名顏色，單擊即可複製任意一個到剪貼簿。在兩種顏色之間產生2–20個均勻分布的中間色樣，複製單個步驟，或一次性獲取整個序列以用於CSS漸層或設計系統色階。可分享的URL可擷取您的顏色、比例和模型，方便與同事或客戶分享。
無需安裝任何軟體，無需建立帳號。顏色混合、圖片採樣和代碼轉換全部在瀏覽器中本地完成——您的顏色和圖片保留在您的裝置上。將此線上顏色混合器加入書籤，並與UtiloKit上的調色板產生器和對比度檢查器配合使用，打造完整的零上傳顏色工作流程。
Frequently asked questions
如何線上混合兩種顏色？
用色板選擇兩種顏色或輸入十六進位代碼，選擇混合模型（顏料/減法、光/加法或簡單線性混合），然後拖動比例滑桿——例如30%/70%——控制每種顏色對結果的貢獻。混合顏色及其HEX、RGB、HSL和CMYK代碼即時更新；點擊任意格式列將其複製到剪貼簿。
哪兩種顏色混合成綠色？
混合顏料或染料時，藍色和黃色混合成綠色（減法混合）。將模型設定為減法，將#2563EB之類的藍色與#FACC15之類的黃色混合，得到約#61A73A的綠色。在螢幕上混合光（加法）時規則不同——紅光+綠光=黃色，三者最大強度=白色。
加法混色和減法混色有什麼區別？
加法混色合併光線：紅、綠、藍通道相加，因此紅+綠=黃，三者全功率=白色。螢幕、投影機和電視都是這樣工作的。減法混色合併顏料或染料，它們吸收（減去）光的波長；添加的顏料越多，顏色越深。藍+黃=綠，三原色全部混合產生棕色。CMYK印刷是減法的。
如何混合兩個十六進位顏色？
在各自的欄位中輸入或貼上十六進位代碼——帶或不帶前導#——例如#FF5733和#33C1FF。混合器立即按當前比例混合它們，並返回結果十六進位代碼及其RGB、HSL和CMYK等效值。也接受#F53之類的三位數簡寫十六進位。點擊任意結果列進行複製。
可以從圖片中混合顏色嗎？
可以。開啟「從圖片混合」面板，上傳任意照片或設計截圖，然後點擊畫布將顏色直接從圖片採樣到您的顏色槽中。圖片使用JavaScript在瀏覽器中的HTML畫布上本地解碼——不會向任何伺服器傳送資料，您的圖片在裝置上完全保密。
可以在兩種顏色之間產生多少個漸層步驟？
步驟控制讓您在兩種輸入顏色之間產生2到20個均勻分布的色樣。十一個步驟給出兩個端點加九個中間點——非常適合建構CSS漸層或設計系統的完整色階。點擊產生條中的任意單個色樣複製其十六進位代碼，或使用「全部複製」一次性獲取整個序列。
免費嗎？需要註冊嗎？
不需要。顏色混合器完全免費，無需帳號、無需註冊、無付費牆、無使用限制。開啟頁面立即開始混合。與某些設計平台將進階顏色混合鎖在訂閱後面不同，這裡的每項功能——減法和加法模型、圖片採樣、多色混合、漸層步驟和所有輸出格式——在首次造訪時就免費提供。
Related tools
檢視所有工具
新 Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.
選色器與轉換器
選取顏色並在 HEX、RGB、HSL 與 OKLCH 之間轉換。
新 色彩對比度檢查器
檢查文字與背景顏色之間的 WCAG AA/AAA 對比度。
新 CSS 漸層產生器
製作線性、放射狀與圓錐 CSS 漸層，附即時預覽。
新 CSS Box-Shadow 產生器
製作多層 CSS box-shadow，附預設與即時預覽。可立即複製 CSS、數值或 React 樣式。
新 調色盤產生器
產生互補色、類似色、三等分色與單色調色盤。